Question 184770 in Flutter Question posted in
The official Flutter documentation can be found here.

How to make original Grid View on Flutter

I would like to implement something like this picture using Grid View or another way by Flutter.

I implemented to use of GridView.builder below like codes. But this code doesn’t work like the picture.

Could you give me your idea to express like this picture?

GridView.builder(
  itemCount: items.length,
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 3,
  ),
  itemBuilder: (BuildContext context, int index) {
    final isDoubleWidth = (index + 1) % 5 == 0;
    final itemWidth = isDoubleWidth ? MediaQuery.of(context).size.width / 3 * 2 : MediaQuery.of(context).size.width / 3;
    return SizedBox(
      width: itemWidth,
      child: Text(item[index].title.toString),
    );
  },
);

enter image description here

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    With this code, I could make that picture likely.

     final itemLength = (items.length) / 5;

        return ListView.builder(
            itemCount: itemLength.toInt(),
            itemBuilder: (BuildContext context, int index) {
              index *= 5;
              return Column(
                children: [
                  Row(
                    children: [
                      SizedBox(
                        width: MediaQuery.of(context).size.width * 2 / 3,
                        child: Text(items[index].title.toString()),
                      ),
                      SizedBox(
                        width: MediaQuery.of(context).size.width * 1 / 3,
                        child: Text(items[index + 1].title.toString()),
                      ),
                    ],
                  ),
                  Row(
                    children: [
                      SizedBox(
                        width: MediaQuery.of(context).size.width * 1 / 3,
                        child: Text(items[index + 2].title.toString()),
                      ),
                      SizedBox(
                        width: MediaQuery.of(context).size.width * 1 / 3,
                        child: Text(items[index + 3].title.toString()),
                      ),
                      SizedBox(
                        width: MediaQuery.of(context).size.width * 1 / 3,
                        child: Text(items[index + 4].title.toString()),
                      ),
                    ],
                  ),
                ],
              );
            });

  2. 0

    GridView does not support something like what you have shown in the picture. If you don’t want to use 3rd party plugins, I suggest you use ListView and Row widgets to build this UI. You can consider this UI as a list of rows, and each row would contain either 2 or 3 elements. So based on the index of the ListView.builder()‘s itemBuilder parameter, you can calculate which elements you should show for this list item (the entire row), and from there you can construct your own row using Row widget.

    Login or Signup to reply.
  3. 0

    Just use flutter_staggered_grid_view: ^0.6.2

    import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';

StaggeredGrid.count(
  crossAxisCount: 4,
  mainAxisSpacing: 4,
  crossAxisSpacing: 4,
  children: const [
    StaggeredGridTile.count(
      crossAxisCellCount: 2,
      mainAxisCellCount: 2,
      child: Tile(index: 0),
    ),
    StaggeredGridTile.count(
      crossAxisCellCount: 2,
      mainAxisCellCount: 1,
      child: Tile(index: 1),
    ),
    StaggeredGridTile.count(
      crossAxisCellCount: 1,
      mainAxisCellCount: 1,
      child: Tile(index: 2),
    ),
    StaggeredGridTile.count(
      crossAxisCellCount: 1,
      mainAxisCellCount: 1,
      child: Tile(index: 3),
    ),
    StaggeredGridTile.count(
      crossAxisCellCount: 4,
      mainAxisCellCount: 2,
      child: Tile(index: 4),
    ),
  ],
);

    enter image description here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search