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 :

. . .

Leave a Comment

Your email address will not be published. Required fields are marked*


Be the first to comment.

css.php

Big thanks to Webkul and his team for helping get Opencart 3.0.3.7 release ready!

Deniel Kerr

Owner and Founder. Opencart

Talk to Sales
Start a Project

    Message Sent!

    If you have more details or questions, you can reply to the received confirmation email.

    Back to Home