GridView List Widget In Flutter
In this blog, I will talk about the GridView List widget in a flutter by implementing a demo of the GridView List widget in your flutter applications. Now let’s start.
Table of Contents :
Flutter :
“ Flutter is Google’s UI toolkit that helps you build beautiful and natively combined applications for mobile, web, and desktop in a single code base in record time ”
GridView List widget:
GridView Flutter has a widget that. Which displays the item in 2D. As its name suggests. We then use it. When we have to show the grid’s form items. We can tap on them. And go to another page. In this, we can take image text icon etc. as per our requirement.GridView widget is also considered to be scrollable. Because it is scrollable. To see an example of a grid view, we have many such apps like an e-commerce app such as snapdeal, etc. in which an example will be found.
GridView widget individually it has four more options.
- GridView.count
- GridView.builder
- GridView.custom
- GridView.extent
First of all, the following property is important to understand when we implement the grid view widget.
- scrollDirection: Axis.Vertical or Axis.Horizontal. We can change the direction vertical and horizontal.
- physics: We use scrolling to scroll the item. The utility scrolls from the list end of the list to the beginning.
- shrinkWrap: If shrinkwrap is false then the item takes up more space to scroll. which is not good, This causes memory loss. And reduce the performance app. So we set it to avoid memory leakage while scrolling.
- padding: It is used to specify the space around the whole list of widgets..
- crossAxisSpacing: The crossAxisSpacing use to specify the number of pixels between widgets to all the children listed in the cross axis.
- crossAxisCount: It is used to specify the number of columns in a grid view.
- mainAxisSpacing: The crossAxisSpacing use to specify the number of pixels between widgets to all the children listed in the main axis.
Demo Module :
Code Implement :
GridView.count:
GridView.count is the most commonly used grid layout. Because we already know the size of the grid. The GridView count has a required end, known as the crossAxisCount.The essential property in the GridView is taken in the grid SliverGridDelegateWithFixedCrossAxis It is known in the same way as the crossAxisCount.This is obviously the most common.
Let us understand this with the help of a reference.
GridView.count(
crossAxisCount: 2,
childAspectRatio: (2 / 1),
crossAxisSpacing: 5,
mainAxisSpacing: 5,
//physics:BouncingScrollPhysics(),
padding: EdgeInsets.all(10.0),
children: items
.map(
(data) => GestureDetector(
onTap: () {
Navigator.of(context).pushNamed(RouteName.GridViewBuilder);
},
child: Container(
padding: const EdgeInsets.all(16),
// margin:EdgeInsets.symmetric(vertical: 5, horizontal: 5),
//color:data.color,
color: RandomColorModel().getColor(),
child: Column(
children: [
Icon(
data.icon,
size: 25,
color: Colors.black,
),
Text(data.title,
style: TextStyle(fontSize: 18, color: Colors.black),
textAlign: TextAlign.center)
],
),
)),
)
.toList(),
),
-----------------------------------------------------------
class RandomColorModel {
Random random = Random();
Color getColor() {
return Color.fromARGB(random.nextInt(300), random.nextInt(300),
random.nextInt(300), random.nextInt(300));
}
}
GridView.builder:
We use the GridView.builder when we want to make a big item grid list with a large number of children you can displays data dynamically or data on demand can be shown. Then we can use GridView.builder.
The following are 3 common features of GridViewbuilder.
- itemCount: The itemCount is used to define the amount of list item data.
- gridDelegate: The gridDelegate determines the divider. Its argument must not be null.
- itemBuilder (BuildContext context, int index): The gridViewBuider we use is used to create the item that is displayed on the grid view.
Let us understand this with the help of a reference.
GridView.builder(
itemCount:items.length,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: MediaQuery.of(context).orientation ==
Orientation.landscape ? 3: 2,
crossAxisSpacing: 8,
mainAxisSpacing: 8,
childAspectRatio: (2 / 1),
),
itemBuilder: (context,index,) {
return GestureDetector(
onTap:(){
Navigator.of(context).pushNamed(RouteName.GridViewCustom);
},
child:Container(
color: RandomColorModel().getColor(),
child: Column(
mainAxisAlignment:MainAxisAlignment.spaceEvenly,
children: [
Icon(items[index].icon),
Text(items[index].title,style: TextStyle(fontSize: 18, color: Colors.black),
textAlign: TextAlign.center),
],
),
),
);
},
)
-----------------------------------------------------------
class RandomColorModel {
Random random = Random();
Color getColor() {
return Color.fromARGB(random.nextInt(300), random.nextInt(300),
random.nextInt(300), random.nextInt(300));
}
}
GridView.custom :
Grid view is custom. It creates its own custom grid view. All property is the same. It has two essential assets. Which need to be defined using GridDevigate, GridDelegate, and ChildDelegate. Let us discuss Childelgate. Childelgate takes it in two different types of slivers.
- SliverChildListDelegate.
- SliverChildBuilderDelegate.
This is another way to show both the data or the length of the data. SliverChildListDelegate in which the specified number can specify the number of children. In SliverChildBuilderDelegate we can display many items.
Let us understand this with the help of an reference.
GridView.custom(
padding: EdgeInsets.all(10.0),
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
childAspectRatio: (2 / 1),
crossAxisSpacing: 5,
mainAxisSpacing: 5,
),
childrenDelegate: SliverChildListDelegate(
items.map((data) =>
GestureDetector(
onTap: (){
Navigator.of(context).pushNamed(RouteName.GridViewExtent);
},
child: Container(
padding: const EdgeInsets.all(16),
color: RandomColorModel().getColor(),
child: Column(
children: [
Icon(data.icon),
Text(data.title,
style: TextStyle(fontSize: 22, color: Colors.white),
textAlign: TextAlign.center)
],
),
)),
).toList(),
)),
-----------------------------------------------------------
class RandomColorModel {
Random random = Random();
Color getColor() {
return Color.fromARGB(random.nextInt(300), random.nextInt(300),
random.nextInt(300), random.nextInt(300));
}
}
GridView.extent:
GridView Extent property is used when we want to create a grid with custom extent values. It means each tile has a maximum cross-axis extent.
Let us understand this with the help of a reference.
GridView.extent(
childAspectRatio: (2 / 2),
crossAxisSpacing: 4,
mainAxisSpacing: 4,
padding: EdgeInsets.all(10.0),
maxCrossAxisExtent: 200.0,
children: List.generate(50, (index) {
return Container(
padding: EdgeInsets.all(20.0),
child: Center(
child: GridTile(
footer: Text(
'Item $index',
textAlign: TextAlign.center,
style:TextStyle(color:Colors.white,fontSize:15,fontWeight:FontWeight.bold),
),
child: Icon(Icons.access_alarm,
size: 40.0, color: Colors.white),
),
),
color: RandomColorModel().getColor(),
margin: EdgeInsets.all(1.0),
);
}),
),
-----------------------------------------------------------
class RandomColorModel {
Random random = Random();
Color getColor() {
return Color.fromARGB(random.nextInt(300), random.nextInt(300),
random.nextInt(300), random.nextInt(300));
}
}
Code File:
import 'package:flutter/material.dart';
import 'package:flutter_gridview_demo/model/color_model.dart';
import 'package:flutter_gridview_demo/model/grid_items_model.dart';
import 'package:flutter_gridview_demo/route_names.dart';
class GridViewDemo extends StatefulWidget {
@override
_GridViewDemoState createState() => _GridViewDemoState();
}
class _GridViewDemoState extends State<GridViewDemo> {
List<GridListItems> items = [
GridListItems(color:Colors.green,title: 'Bicycle', icon: Icons.directions_bike),
GridListItems(color:Colors.pink[300],title:'Boat', icon: Icons.directions_boat),
GridListItems(color:Colors.pink[300],title: 'Bus', icon: Icons.directions_bus),
GridListItems(color:Colors.pink[300],title: 'Train', icon: Icons.directions_railway),
GridListItems(color:Colors.pink[300],title: 'Walk', icon: Icons.directions_walk),
GridListItems(color:Colors.pink[300],title: 'Contact', icon: Icons.contact_mail),
GridListItems(color:Colors.green,title: 'Bicycle', icon: Icons.directions_bike),
GridListItems(color:Colors.pink[300],title:'Boat', icon: Icons.directions_boat),
GridListItems(color:Colors.pink[300],title: 'Bus', icon: Icons.directions_bus),
GridListItems(color:Colors.pink[300],title: 'Train', icon: Icons.directions_railway),
GridListItems(color:Colors.pink[300],title: 'Walk', icon: Icons.directions_walk),
GridListItems(color:Colors.pink[300],title: 'Contact', icon: Icons.contact_mail),
GridListItems(color:Colors.green,title: 'Bicycle', icon: Icons.directions_bike),
GridListItems(color:Colors.pink[300],title:'Boat', icon: Icons.directions_boat),
GridListItems(color:Colors.pink[300],title: 'Bus', icon: Icons.directions_bus),
GridListItems(color:Colors.pink[300],title: 'Train', icon: Icons.directions_railway),
GridListItems(color:Colors.pink[300],title: 'Walk', icon: Icons.directions_walk),
GridListItems(color:Colors.pink[300],title: 'Contact', icon: Icons.contact_mail),
];
@override
Widget build(BuildContext context) {
return Scaffold(
body: GridView.count(
crossAxisCount: 2,
childAspectRatio: (2 / 1),
crossAxisSpacing: 5,
mainAxisSpacing: 5,
//physics:BouncingScrollPhysics(),
padding: EdgeInsets.all(10.0),
children: items.map((data) =>
GestureDetector(
onTap: (){
Navigator.of(context).pushNamed(RouteName.GridViewBuilder);
},
child: Container(
padding: const EdgeInsets.all(16),
// margin:EdgeInsets.symmetric(vertical: 5, horizontal: 5),
//color:data.color,
color: RandomColorModel().getColor(),
child: Column(
children: [
Icon(data.icon,size:25,color:Colors.black,),
Text(data.title,
style: TextStyle(fontSize: 18, color: Colors.black),
textAlign: TextAlign.center)
],
),
)),
).toList(),
),
);
}
}
Conclusion :
In this article, I have explained a GridView List widget demo, you can modify and experiment according to your own, this little introduction was from the GridView List widget from our side.
I hope this blog helps will provide you with sufficient information in Trying up the GridView List widget in your flutter project. In this demo explain the GridView List widget in flutter. So please try it.
❤ ❤ Thanks for reading this article ❤❤
Feel free to connect with us
And read more articles from FlutterDevs.com
FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter related queries.
