Flutter GridView and Different ways of Constructors

Last updated Nov 07, 2019

In this example we are going to learn how to create a Grid List in flutter.

Flutter Provided GridView Widget to arrange the data in grid. 

 

 

Below are the different contructors to use the GridView widget.

• GridView()
• GridView.builder()
• GridView.count()
• GridView.custom()
• GridView.extent()

We will create Grid with all above types. Click here to check GridView.builder() constructor 

Here we are going with GridView() default constuctor

GridView()

class GridConstructor extends StatelessWidget{   @override   Widget build(BuildContext context) {     return Scaffold(       appBar: AppBar(         title: Text("Gride with Constructor Type"),       ),       body: Container(         child: GridView(gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount:  3,mainAxisSpacing: 0,crossAxisSpacing: 0,childAspectRatio: 1),         scrollDirection: Axis.vertical,               children: [           Card(             color: Colors.deepOrange,             child: Center(child: Text("Gride 1",style: TextStyle(color: Colors.white),),),           ),           Card(             color: Colors.deepOrange,             child: Center(child: Text("Gride 2",style: TextStyle(color: Colors.white),)),           ),           Card(             color: Colors.deepOrange,             child: Center(child: Text("Gride 3",style: TextStyle(color: Colors.white),)),           ),           Card(             color: Colors.white,             child: Center(child: Text("Gride 4",style: TextStyle(color: Colors.black),)),           ),           Card(             color: Colors.white,             child: Center(child: Text("Gride 5",style: TextStyle(color: Colors.black),)),           ),           Card(             color: Colors.white,             child: Center(child: Text("Gride 6",style: TextStyle(color: Colors.black),)),           ),           Card(             color: Colors.green,             child: Center(child: Text("Gride 5",style: TextStyle(color: Colors.white),)),           ),           Card(             color: Colors.green,             child: Center(child: Text("Gride 6",style: TextStyle(color: Colors.white),)),           ), Card(             color: Colors.green,             child: Center(child: Text("Gride 6",style: TextStyle(color: Colors.white),)),           ),         ],),       ),     );   } }

 

here SliverGridDelegateWithFixedCrossAxisCount will manage the Grid items with below properties.
crossAxisCount: Sets the grid items with required count.

if scrollDirection is Axis.vertical then arrange the grid items vertically with coloumn count.

Ex: if crossAxisCount is 2 and Total gride items 9, then 5 rows will generates each with 2 coloumns.

 

 

if crossAxisCount is 5 and Total gride items 9, then 2 rows will generates each with 5 coloumns

 

if scrollDirection is Axis.horizontal then arrange the grid items horizontally with coloumn count.
 check the above scenario with horizontal direction
 
 if crossAxisCount is 2 and Total gride items 9, then 2 rows will generates each with 5 coloumns

 

if crossAxisCount is 5 and Total gride items 9, then 5 rows will generates each with 2 coloumns.

 

SliverGridDelegateWithMaxCrossAxisExtent:
 
 This will allow the grid item to set the max dimension.
 EX:
 gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(maxCrossAxisExtent:  120)
 So the Each Grid item will set to max 120 width & height

 

2) GridView.count()

Most Commonly used grid layout is GridView.count()
 which creates a layout with fixed number of grid items.
 unlike SliverGridDelegateWithMaxCrossAxisExtent, GridView.count doesn't have CrossAxisExtent, instead we will use the childAspectRatio  property .
 
 Below screens we can find the differnce AspectRatio

AspectRatio 2.0 / 3.0	AspectRatio 4.0 / 2.0

 

Properties

physics: 
 This Property will handle the scrolling behaviour of the GridView.
 

1.  physics:AlwaysScrollableScrollPhysics()-> Will scroll the entire tiles.
2.  physics: ScrollPhysics(),-> Will scroll the tiles based on velocity of fling.
3.  physics: NeverScrollableScrollPhysics(),-> Tiles never scroll
4.  physics: PageScrollPhysics(),-> Scroll the tiles in page wise
5.  physics: BouncingScrollPhysics(),-> Scroll will show the bounce at the bottom/top like iOS

 
 controller :
 Controll the scroll behviour

1.  controller:PageController(initialPage:1)-> Scroll the tiles as page and scroll to 1 page position
2.  controller: ScrollController(initialScrollOffset:  100) scroll the tile to 100 offset distance.

 

Click here to check GridView.builder() constructor 

Check complete code at Github