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