A grid view in flutter is a material component widget that must have a MaterialApp as one of its ancestors.
Since this tutorial is intended for beginners, we’ll try to describe GridView as simple as possible.
As a graphical control element a grid view shows items in a tabular form. Consequently, we can say that GridView is a widget that consists of a grid list consists of a repeated pattern of cells, which are arrayed in a vertical and horizontal layout.
To clarify, a GridView displays items in a two dimensional rows and columns. And GridView widget implements this material component.
How do we show a GridView?
As the name suggests, while GridView displays items in a grid we can also tap any item to see the detail of that item.
As a result, to show items in a grid, GridView uses many other widgets, such as Image, Text, Icon, etc.
To make GridView work we can use various constructors, such as, count, builder, custom and extent.
We’ll learn the usage of GridView widget with each constructor, however, each method has some advantages and disadvantages.
For example, in most common cases, grid layouts use GridView.count constructor. But it creates a layout with a fixed number of tiles in the cross axis.
On the other hand, GridView.extent constructor creates a layout with tiles that have a maximum cross-axis extent.
Therefore, if we want to create a grid with a large number of children, we use GridView.builder constructor with either SliverGridDelegateWithFixedCrossAxisCount, or a SliverGridDelegateWithMaxCrossAxisExtent for the gridDelegate.
The main axis direction of a grid is the direction in which it scrolls, later in a separate article we’ll learn the scrollDirection that helps GridView to scroll.
In this tutorial we’ll concentrate on GridView.builder constructor only.
Firstly, let’s see how we can display a list of items with the help of GridView.
Secondly, we’ll see the code.
So the image first.
The above screen shows us a grid view that displays book items. After that, we can tap each item and see the detail page like the following image.
To make it happen, we have used many advanced concepts, such as, provider package, Navigator, List and Map and other layout widgets.
At present, we should concentrate on GridView only, so let’s see how GridView.builder constructor works with SliverGridDelegateWithFixedCrossAxisCount.
Widget build(BuildContext context) {
final productsData = Provider.of<Books>(context);
final products = showFavs ? productsData.favoriteItems : productsData.items;
return GridView.builder(
padding: const EdgeInsets.all(10.0),
itemCount: products.length,
itemBuilder: (ctx, i) => ChangeNotifierProvider.value(
// builder: (c) => products[i],
value: products[i],
child: const BookItem(),
),
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
childAspectRatio: 3 / 2,
crossAxisSpacing: 10,
mainAxisSpacing: 10,
),
);
}
// the code is incomplete for brevity, for full code snippet please visit the GitHub repositoryThe GridView.builder constructor uses “itemBuilder” parameter that plays a major role in building the grid that displays the items.
Therefore, let’s take a look at the custom BookItem widget.
Widget build(BuildContext context) {
final product = Provider.of<Book>(context, listen: false);
return ClipRRect(
borderRadius: BorderRadius.circular(10),
child: GridTile(
child: GestureDetector(
onTap: () {
Navigator.of(context).pushNamed(
BookDetailScreen.routeName,
arguments: product.id,
);
},
child: Image.network(
product.imageUrl,
fit: BoxFit.cover,
),
),
footer: GridTileBar(
backgroundColor: Colors.black87,
leading: Consumer<Book>(
builder: (ctx, product, _) => IconButton(
icon: Icon(
product.isFavorite ? Icons.favorite : Icons.favorite_border,
),
color: Theme.of(context).primaryColor,
onPressed: () {
product.toggleFavoriteStatus();
},
),
),
title: Text(
product.title,
textAlign: TextAlign.center,
),
trailing: IconButton(
icon: const Icon(
Icons.shopping_cart,
),
onPressed: () {},
color: Theme.of(context).primaryColor,
),
),
),
);
}
// the code is incomplete for brevity, for full code snippet please visit the GitHub repositoryThe GridView display is incomplete without the GridTile widget and GestureDetector widget. We’ll discuss them separately in another article.
Leave a Reply