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'])), ], ), ); })); } } |
Flutter GridView and Different ways of Constructors