Flutter GridView | RRTutors

Flutter GridView

GridView displays the values of a data source in a table where each column represents a field and each row represents a record

 

Constructors

GridView.builder()

GridView.count()

GridView.custom()

GridView.extent()


 

GridView.builder({

 Key key,

 Axis scrollDirection = Axis.vertical,

 bool reverse = false,

 ScrollController controller,

 bool primary,

 ScrollPhysics physics,

 bool shrinkWrap = false,

 EdgeInsetsGeometry padding,

 @required this.gridDelegate,

 @required IndexedWidgetBuilder itemBuilder,

 int itemCount,

 bool addAutomaticKeepAlives = true,

 bool addRepaintBoundaries = true,

 bool addSemanticIndexes = true,

 int semanticChildCount,

})

 

Example

 

class GridViewWidget extends StatelessWidget {

 List list = new List();

 GridViewWidget() {

   for (int i = 1; i < 20; i++) {

     int j = (i % 9) + 1;

     var temp = {

       "imageurl": "https://cdn.pixabay.com/photo/2016/10/17/17/41/priyanka-chopra-1748248_960_720.jpg",

       "title": "Image  $i"

     };

     list.add(temp);

   }

 }

 @override

 Widget build(BuildContext context) {

   // TODO: implement build

   return Scaffold(

       appBar: AppBar(

         title: Text("GridView"),

         backgroundColor: Colors.pink,

       ),

       body: GridView.builder(

           gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(

             crossAxisCount: 3,

             mainAxisSpacing: 5,

             crossAxisSpacing: 5,

           ),

           itemCount: list.length,

           itemBuilder: (BuildContext context, int index) {

             return Container(

               decoration: BoxDecoration(

                   border: Border.all(

                 color: Colors.red,

                 width: 2,

               )),

               child: Column(

                mainAxisSize: MainAxisSize.max,

                 mainAxisAlignment: MainAxisAlignment.end,

                 children: <Widget>[

                   Image.network(

                     list[index]['imageurl'],

                     fit: BoxFit.cover,

                   ),

                   Expanded(child: Text(list[index]['title'])),

                 ],

               ),

             );

           }));

 }

}

GridView

 

Flutter GridView and Different ways of Constructors
Advertisements