Let’s talk about grid view builder in flutter app, but first if you are new and want a complete setup and want to build your first app in flutter app instantly, then click here, now let’s jump into grid view builder widget, what it really is, its role, and usage in flutter apps. So the first thing that would come to your mind will be, what exactly is a grid view builder in the flutter app?
Introduction
Grid view, as the name suggests, its a grid of widgets, you give it one widget and it will build multiple widgets using its builder from that widget. Grid view is a really cool way to show case your widgets in flutter app. Top App bar that you see in the design, if you want to know how to implement it then we have written a complete blog on it as well. Click here to understand how it is implemented. By the end of this article, you will be able to design the above mentioned design in flutter app and all the details that you would need to implement a grid view like this, so you can customize the grid view in flutter app according to your desired requirements. Let’s start it now.
Implementation
GridView.builder(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
mainAxisSpacing: 5,
crossAxisSpacing: 5,
crossAxisCount: 3,
childAspectRatio: 1.2),
itemBuilder: (context, index) {
return Container();
},
)
Grid view class is used for that and by using its builder function, we have implemented our grid. Using its grid delegate constructor, we can customize the the size etc. of the grid items and the number of rows as well. Let’s see how:
Extend Body Behind App Bar
extendBodyBehindAppBar: true
Cross Axis Count
Child Aspect Ratio
childAspectRatio: 1.2
Main Axis Spacing
mainAxisSpacing: 5
Cross Axis Spacing
crossAxisSpacing: 5
Item Count
itemCount: 10
Padding
Item Builder
itemBuilder: (context, index) {
return Container(
color: Colors.green,
);
},
The item builder constructor is what builds and returns the list of widgets. It has two parameters, build context and index. Index starts from 0 to infinity if you don’t specify the number of items. In our case, we have given it a container widget. If you want to know how to customize a container then click here. It will return an infinite number of containers if we didn’t specify the item count.
Container Modifications
itemBuilder: (context, index) {
return Container(
alignment: Alignment.center,
margin: EdgeInsets.all(5),
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.pink.shade300,
boxShadow: [
BoxShadow(
color: Colors.black54,
spreadRadius: 2,
blurRadius: 4,
offset: Offset(2, 2))
]),
child: Container(
alignment: Alignment.center,
margin: EdgeInsets.all(15),
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.blue.shade500,
boxShadow: [
BoxShadow(
color: Colors.black54,
spreadRadius: 2,
blurRadius: 4,
offset: Offset(2, 2))
]),
child: Text(
index.toString(),
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 20),
)));
}
Let’s understand the container item that the grid view builder is returning in flutter app. We have used margin in the container and made it’s shape circular. We have also given it a shadow and color. Now in its child constructor, we have give it another container with shadow, color and margin and in that container’s child constructor, we have given it a text widget. If you are interested in understanding how the text widget works then you can click here. Now let’s see what we have made from the grid view builder:
image here
Source Code
This code only have grid view implementation, you can click here to get the source code for app bar implementation and just use that app bar inside that code. If we put the app bar implementation here then it will become too messy here so that’s why you have to do it yourself. Let’s see the list view implementation now:
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Grid View',
debugShowCheckedModeBanner: false,
home: HomePage(),
);
}
}
class HomePage extends StatelessWidget {
const HomePage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
extendBodyBehindAppBar: true,
body: GridView.builder(
padding: EdgeInsets.all(10).copyWith(top: 150),
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
mainAxisSpacing: 5,
crossAxisSpacing: 5,
crossAxisCount: 3,
childAspectRatio: 1.2),
itemBuilder: (context, index) {
return Container(
alignment: Alignment.center,
margin: EdgeInsets.all(5),
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.pink.shade300,
boxShadow: [
BoxShadow(
color: Colors.black54,
spreadRadius: 2,
blurRadius: 4,
offset: Offset(2, 2))
]),
child: Container(
alignment: Alignment.center,
margin: EdgeInsets.all(15),
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.blue.shade500,
boxShadow: [
BoxShadow(
color: Colors.black54,
spreadRadius: 2,
blurRadius: 4,
offset: Offset(2, 2))
]),
child: Text(
index.toString(),
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 20),
)));
},
),
));
}
}
Note:
That’s all for this article, hope you enjoyed it and have learnt a lot from it. Implement it in your code and share your experience with us. We would love to see how you have used and customized grid view builder. We would be looking forward for your response. Hope to see you in our next articles in which we will dig deep into list views and other amazing widgets. Thanks.
