Redeem Now
Read More
Read now

Flutter make different span count at different row in Staggered Grid View

Save

Flutter Staggered grid view :

Flutter Staggered grid view supports multiple columns with different row sizes.
In this blog, we will look to design a page with the different column count at the different row.

Different Column Count At Different Row

StaggeredTileBuilder is used to create different no of the column in row and height of each tile.

There are three types of staggered tile, StaggeredTile.countStaggeredTile.fit  StaggeredTile.extent .

We will use StaggeredTile.extent(this.crossAxisCellCount, this.mainAxisExtent).

Where crossAxisCellCount is the number of column in a row and mainAxisExtent  is the height of row item/tile.

Here, we will show the 1,2,3 column count on different rows.

Calculation of crossAxisCellCount

Let’s calculate crossAxisCellCount

SingleColumn crossAxisCellCount  = 1*2*3=6/1 =6

TwoColumnGrid crossAxisCellCount  = 1*2*3=6/2 =3

ThreeColumnGrid crossAxisCellCount  = 1*2*3=6/3 =2

 

We will get the result as attached image

 

StaggeredGridView
Staggered GridView In Flutter

 

Staggered grid view example:

Let’s check the complete code.

 

I hope this blog will help to make the different number of columns in different rows.

Happy Learning 🙂

 

Reference Links :

. . .

Comment

Add Your Comment

Be the first to comment.

css.php
Hire Us!
Brief us about your requirements and we'll get back to you.
Woo! Hooy!
We have just recieved your project brief and our expert will contact you shortly.
Send Again
Close