Flutter - Custom staggered grid view

Question

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:

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

Comments

[Metronom]

another solution is that you make a 2x2 grid then expand a row under the grid and place your 5th item there

[Thorvald]

I went with it for the time being until I find the layout I am looking for.