{"id":2101,"date":"2022-04-07T19:11:45","date_gmt":"2022-04-07T19:11:45","guid":{"rendered":"https:\/\/mdr.foobrdigital.com\/?p=2101"},"modified":"2022-04-07T19:11:45","modified_gmt":"2022-04-07T19:11:45","slug":"gridview-count","status":"publish","type":"post","link":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/2022\/04\/07\/gridview-count\/","title":{"rendered":"GridView.count()"},"content":{"rendered":"\n

It is the most frequently used grid layout in\u00a0Flutter\u00a0because here, we already know the grid’s size. It allows developers to\u00a0specify the fixed number of rows and columns<\/strong>. The GriedView.count() contains the following properties:<\/p>\n\n\n\n

crossAxisCount:<\/strong> It is used to specify the number of columns in a grid view.<\/p>\n\n\n\n

crossAxisSpacing:<\/strong> It is used to specify the number of pixels between each child widget listed in the cross axis.<\/p>\n\n\n\n

mainAxisSpacing:<\/strong> It is used to specify the number of pixels between each child widget listed in the main axis.<\/p>\n\n\n\n

padding(EdgeInsetsGeometry):<\/strong> It is used to specify the space around the whole list of widgets.<\/p>\n\n\n\n

scrollDirection:<\/strong> It is used to specify the direction in which the items on GridView scrolls. By default, it scrolls in a vertical direction.<\/p>\n\n\n\n

reverse:<\/strong> If it is true, it will reverse the list in the opposite direction along the main axis.<\/p>\n\n\n\n

physics:<\/strong> It is used to determine how the list behaves when the user reaches the end or the start of the widget while scrolling.<\/p>\n\n\n\n

shrinkWrap:<\/strong> If it is false, the scrollable list takes more space for scrolling in scroll direction. It is not good because it wastage memory and reduces app performance. Therefore, we will wrap our children widgets using shrinkWrap by setting it to true to avoid memory leakage while scrolling.<\/p>\n\n\n\n

Example<\/h3>\n\n\n\n

Let us understand it with an example to see how to create GridView in\u00a0Flutter\u00a0for creating grid lists. First, create a new project in the IDE you are using. Open the project, navigate to the lib folder, and replace the below code with the\u00a0main.dart<\/strong>\u00a0file.<\/a><\/a><\/a><\/p>\n\n\n\n

import 'package:flutter\/material.dart';  \n  \nvoid main() {runApp(MyApp());}  \n  \nclass MyApp extends StatelessWidget {  \n  @override  \n  Widget build(BuildContext context) {  \n    return MaterialApp(  \n        home: Scaffold(appBar: AppBar(  \n          title: Text(\"Flutter GridView Demo\"),  \n        ),  \n            body: GridView.count(  \n                crossAxisCount: 3,  \n                crossAxisSpacing: 4.0,  \n                mainAxisSpacing: 8.0,  \n                children: List.generate(choices.length, (index) {  \n                  return Center(  \n                    child: SelectCard(choice: choices[index]),  \n                  );  \n                }  \n                )  \n            )  \n        )  \n    );  \n  }  \n}  \n  \nclass Choice {  \n  const Choice({this.title, this.icon});  \n  final String title;  \n  final IconData icon;  \n}  \n  \nconst List<Choice> choices = const <Choice>[  \n  const Choice(title: 'Home', icon: Icons.home),  \n  const Choice(title: 'Contact', icon: Icons.contacts),  \n  const Choice(title: 'Map', icon: Icons.map),  \n  const Choice(title: 'Phone', icon: Icons.phone),  \n  const Choice(title: 'Camera', icon: Icons.camera_alt),  \n  const Choice(title: 'Setting', icon: Icons.settings),  \n  const Choice(title: 'Album', icon: Icons.photo_album),  \n  const Choice(title: 'WiFi', icon: Icons.wifi),  \n];  \n  \nclass SelectCard extends StatelessWidget {  \n  const SelectCard({Key key, this.choice}) : super(key: key);  \n  final Choice choice;  \n  \n  @override  \n  Widget build(BuildContext context) {  \n    final TextStyle textStyle = Theme.of(context).textTheme.display1;  \n    return Card(  \n        color: Colors.orange,  \n        child: Center(child: Column(  \n            crossAxisAlignment: CrossAxisAlignment.center,  \n            children: <Widget>[  \n              Expanded(child: Icon(choice.icon, size:50.0, color: textStyle.color)),  \n              Text(choice.title, style: textStyle),  \n            ]  \n        ),  \n        )  \n    );  \n  }  \n} <\/code><\/pre>\n\n\n\n
In the above code, we have created a class for the items that we want to show in the grid and then add some data. Next, we have constructed the widget that we are going to show in the GridView.<\/p>\n\n\n\n
Output<\/strong><\/p>\n\n\n\n
When we run the app in Android Studio, we can see the following screen in our Emulator.<\/p>\n\n\n\n
\"Flutter<\/figure>\n","protected":false},"excerpt":{"rendered":"
It is the most frequently used grid layout in\u00a0Flutter\u00a0because here, we already know the grid’s size. It allows developers to\u00a0specify the fixed number of rows and columns. The GriedView.count() contains the following properties: crossAxisCount: It is used to specify the number of columns in a grid view. crossAxisSpacing: It is used to specify the number of pixels […]<\/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\/2101"}],"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=2101"}],"version-history":[{"count":0,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/posts\/2101\/revisions"}],"wp:attachment":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/media?parent=2101"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/categories?post=2101"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/tags?post=2101"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}