Search code examples
flutterdartgridviewstaggered-gridview

Flutter - Custom staggered grid view

I am using flutter_staggered_grid_view: ^0.3.4 to build a menu of 5 elements (tiles) that I want to display according to a specific layout, below you will find an image of the desired output and the output I am currently having, this is my code so far:

Padding(
    padding: const EdgeInsets.symmetric(horizontal: 14),
    child: StaggeredGridView.countBuilder(
        shrinkWrap: true,
        itemCount: gridItems.length,
        crossAxisSpacing: 2,
        mainAxisSpacing: 2,
        crossAxisCount: 4,
        itemBuilder: (context, index) {
            return GestureDetector(
                child: gridItems[index]);
        },
        staggeredTileBuilder: (index) {
            return StaggeredTile.fit(2);
        }),
),

The closest I got is with :

• StaggeredTile.fit(2)

and

• StaggeredTile.count(2, 1)

which they both gave the same results.

This is the image: enter image description here

Solution

  • it's not what exactly you're looking for but

    StaggeredTile.fit(index.isEven ? 2 : 1);

    will give you an even display of 5 tiles on two lines