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. 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{ Card( ],), } here SliverGridDelegateWithFixedCrossAxisCount will manage the Grid items with below properties. 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. if crossAxisCount is 5 and Total gride items 9, then 5 rows will generates each with 2 coloumns. SliverGridDelegateWithMaxCrossAxisExtent: 2) GridView.count() Most Commonly used grid layout is GridView.count() AspectRatio 2.0 / 3.0 AspectRatio 4.0 / 2.0 Properties physics:
@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: [
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),)),
),
),
);
}
crossAxisCount: Sets the grid items with required 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
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
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
This Property will handle the scrolling behaviour of the GridView.
controller :
Controll the scroll behviour
Article Contributed By :
|
|
|
|
4808 Views |