{"id":2105,"date":"2022-04-07T19:14:00","date_gmt":"2022-04-07T19:14:00","guid":{"rendered":"https:\/\/mdr.foobrdigital.com\/?p=2105"},"modified":"2022-04-07T19:14:00","modified_gmt":"2022-04-07T19:14:00","slug":"gridview-extent","status":"publish","type":"post","link":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/2022\/04\/07\/gridview-extent\/","title":{"rendered":"GridView.extent()"},"content":{"rendered":"\n<p>This property is used when we want to&nbsp;<strong>create a grid with custom extent values<\/strong>. It means each tile has a maximum cross-axis extent.<\/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.<\/p>\n\n\n\n<p><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  \/\/ This widget is the root of your application.  \n  @override  \n  Widget build(BuildContext context) {  \n    return MaterialApp(  \n      home: MyGridScreen(),  \n    );  \n  }  \n}  \n  \nclass MyGridScreen extends StatefulWidget {  \n  MyGridScreen({Key key}) : super(key: key);  \n  \n  @override  \n  _MyGridScreenState createState() => _MyGridScreenState();  \n}  \n  \nclass _MyGridScreenState extends State&lt;MyGridScreen> {  \n  @override  \n  Widget build(BuildContext context) {  \n    return Scaffold(  \n      appBar: AppBar(  \n        title: Text(\"Flutter GridView Demo\"),  \n        backgroundColor: Colors.green,  \n      ),  \n      body: Center(  \n          child: GridView.extent(  \n            primary: false,  \n            padding: const EdgeInsets.all(16),  \n            crossAxisSpacing: 10,  \n            mainAxisSpacing: 10,  \n            maxCrossAxisExtent: 200.0,  \n            children: &lt;Widget>&#91;  \n              Container(  \n                padding: const EdgeInsets.all(8),  \n                child: const Text('First', style: TextStyle(fontSize: 20)),  \n                color: Colors.yellow,  \n              ),  \n              Container(  \n                padding: const EdgeInsets.all(8),  \n                child: const Text('Second', style: TextStyle(fontSize: 20)),  \n                color: Colors.blue,  \n              ),  \n              Container(  \n                padding: const EdgeInsets.all(8),  \n                child: const Text('Third', style: TextStyle(fontSize: 20)),  \n                color: Colors.blue,  \n              ),  \n              Container(  \n                padding: const EdgeInsets.all(8),  \n                child: const Text('Four', style: TextStyle(fontSize: 20)),  \n                color: Colors.yellow,  \n              ),  \n              Container(  \n                padding: const EdgeInsets.all(8),  \n                child: const Text('Fifth', style: TextStyle(fontSize: 20)),  \n                color: Colors.yellow,  \n              ),  \n              Container(  \n                padding: const EdgeInsets.all(8),  \n                child: const Text('Six', style: TextStyle(fontSize: 20)),  \n                color: Colors.blue,  \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-gridview3.png\" alt=\"Flutter GridView\"\/><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>This property is used when we want to&nbsp;create a grid with custom extent values. It means each tile has a maximum cross-axis extent. Example 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\u00a0main.dart\u00a0file. Output When we run the app [&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\/2105"}],"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=2105"}],"version-history":[{"count":0,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/posts\/2105\/revisions"}],"wp:attachment":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/media?parent=2105"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/categories?post=2105"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/tags?post=2105"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}