{"id":2103,"date":"2022-04-07T19:12:40","date_gmt":"2022-04-07T19:12:40","guid":{"rendered":"https:\/\/mdr.foobrdigital.com\/?p=2103"},"modified":"2022-04-07T19:12:40","modified_gmt":"2022-04-07T19:12:40","slug":"gridview-builder","status":"publish","type":"post","link":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/2022\/04\/07\/gridview-builder\/","title":{"rendered":"GridView.builder()"},"content":{"rendered":"\n<p>This property is used when we want to&nbsp;<strong>display data dynamically or on-demand<\/strong>. In other words, if the user wants to create a grid with a large (infinite) number of children, then they can use the GridView.builder() constructor with either a SliverGridDelegateWithFixedCrossAxisCount or a SliverGridDelegateWithMaxCrossAxisExtent.<\/p>\n\n\n\n<p>The common attributes of this widget are:<\/p>\n\n\n\n<p><strong>itemCount<\/strong>: It is used to define the amount of data to be displayed.<\/p>\n\n\n\n<p><strong>gridDelegate<\/strong>: It determines the grid or its divider. Its argument should not be null.<\/p>\n\n\n\n<p><strong>itemBuilder<\/strong>: It is used to create items that will be displayed on the grid view. It will be called only when the indices &gt;= zero &amp;&amp; indices &lt; itemCount.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Example<\/h3>\n\n\n\n<p>Let us understand it with the help of an example. Open the project, navigate to the lib folder, and replace the below code with the\u00a0<strong>main.dart<\/strong>\u00a0file.<a href=\"https:\/\/www.javatpoint.com\/flutter-gridview#\"><\/a><a href=\"https:\/\/www.javatpoint.com\/flutter-gridview#\"><\/a><a href=\"https:\/\/www.javatpoint.com\/flutter-gridview#\"><\/a><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import 'package:flutter\/material.dart';  \n  \nvoid main() => runApp(MyApp());  \n  \nclass MyApp extends StatelessWidget {  \n  \n  List&lt;String> images = &#91;  \n    \"https:\/\/static.javatpoint.com\/tutorial\/flutter\/images\/flutter-logo.png\",  \n    \"https:\/\/static.javatpoint.com\/tutorial\/flutter\/images\/flutter-logo.png\",  \n    \"https:\/\/static.javatpoint.com\/tutorial\/flutter\/images\/flutter-logo.png\",  \n    \"https:\/\/static.javatpoint.com\/tutorial\/flutter\/images\/flutter-logo.png\"  \n  ];  \n  \n  @override  \n  Widget build(BuildContext context) {  \n    return MaterialApp(  \n      home: Scaffold(  \n        appBar: AppBar(  \n          title: Text(\"Flutter GridView Demo\"),  \n          backgroundColor: Colors.red,  \n        ),  \n        body: Container(  \n            padding: EdgeInsets.all(12.0),  \n            child: GridView.builder(  \n              itemCount: images.length,  \n              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(  \n                  crossAxisCount: 2,  \n                  crossAxisSpacing: 4.0,  \n                  mainAxisSpacing: 4.0  \n              ),  \n              itemBuilder: (BuildContext context, int index){  \n                return Image.network(images&#91;index]);  \n              },  \n            )),  \n      ),  \n    );  \n  }  \n}  <\/code><\/pre>\n\n\n\n<p><strong>Output<\/strong><\/p>\n\n\n\n<p>When we run the app in Android Studio, we can see the following screen in our Emulator.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/static.javatpoint.com\/tutorial\/flutter\/images\/flutter-gridview2.png\" alt=\"Flutter GridView\"\/><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>This property is used when we want to&nbsp;display data dynamically or on-demand. In other words, if the user wants to create a grid with a large (infinite) number of children, then they can use the GridView.builder() constructor with either a SliverGridDelegateWithFixedCrossAxisCount or a SliverGridDelegateWithMaxCrossAxisExtent. The common attributes of this widget are: itemCount: It is used [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[550],"tags":[],"_links":{"self":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/posts\/2103"}],"collection":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/comments?post=2103"}],"version-history":[{"count":0,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/posts\/2103\/revisions"}],"wp:attachment":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/media?parent=2103"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/categories?post=2103"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/tags?post=2103"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}