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

Webkul is a truly trusted and supported IT Company to develop business ideas for e-commerce. They provide professional support after deploying the solution to production and be responsible to act for fixing the reported issues or system errors. We highly encourage to deal with Webkul for business development.

Hussein Zawia

Hussein Zawia

Co-founder, 24Dokan

Talk to Sales

Global

Live Chat
Start a Project


    Message Sent!

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

    Back to Home