We have discussed GridView and GridView.count before. However, the GridView.extent constructor is also very interesting and we can use it for the same purpose.
What is the purpose?
To create a scrollable, two dimensional array of widgets with tiles that each have a maximum cross-axis extent.
We’ll talk about the cross axis and main axis, in a minute. Before that let’s learn what is the biggest advantage of GridView?
The greatest advantage of GridView widget is it lets us scroll its content.
How does it happen?
Like CustomScrollView and ListView, the GridView’s parent class is the class, ScrollView. As a result, GridView can scroll its content.
Moreover, many parameters of GridView gets their stimulation from the parent class ScrollView.
Since GridView is a two dimensional array of widgets, so we can define cross axis and main axis quite easily.
The cross axis represents the column, we can also say the horizontal part of the tiles. On the contrary, the main axis represents the rows down below the vertical side.
Similarly, we can also say that GridView.extent constructor has one property, which is required. If we look at the implementation of the parameters, we’ll have an idea.
GridView.extent(
{Key? key,
Axis scrollDirection = Axis.vertical,
bool reverse = false,
ScrollController? controller,
bool? primary,
ScrollPhysics? physics,
bool shrinkWrap = false,
EdgeInsetsGeometry? padding,
required double maxCrossAxisExtent,
double mainAxisSpacing = 0.0,
double crossAxisSpacing = 0.0,
double childAspectRatio = 1.0,
bool addAutomaticKeepAlives = true,
bool addRepaintBoundaries = true,
bool addSemanticIndexes = true,
double? cacheExtent,
List<Widget> children = const <Widget>[],
int? semanticChildCount,
DragStartBehavior dragStartBehavior = DragStartBehavior.start,
ScrollViewKeyboardDismissBehavior keyboardDismissBehavior = ScrollViewKeyboardDismissBehavior.manual,
String? restorationId,
Clip clipBehavior = Clip.hardEdge}
) The named parameter maxCrossAxisExtent plays a key role in displaying the items.
required double maxCrossAxisExtent,If maxCrossAxisExtent is 400, we cannot keep two columns side by side. Because that will take almost all of the horizontal screen space.
Therefore we need to be careful about make it 200, so that we can at least place two columns side by side.
To get an idea, let’s see an image of the upper part of GridView.extent constructor.
Let’s look at the full code snippet, so that we can have a better idea.
After that, we’ll discuss the code.
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
class GridViewExtent extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text("Flutter GridView Demo"),
backgroundColor: Colors.green,
),
body: Center(
child: GridView.extent(
primary: false,
padding: const EdgeInsets.all(16),
crossAxisSpacing: 10,
mainAxisSpacing: 10,
maxCrossAxisExtent: 200.0,
children: <Widget>[
Container(
margin: const EdgeInsets.all(10),
padding: const EdgeInsets.all(8),
width: 250,
height: 250,
child: Text(
'The Beginning',
style: TextStyle(
backgroundColor: Colors.amberAccent,
fontSize: 30,
fontFamily: 'Anton',
fontWeight: FontWeight.bold,
),
),
),
Container(
margin: const EdgeInsets.all(10),
padding: const EdgeInsets.all(8),
child: Image.network(
'https://cdn.pixabay.com/photo/2015/09/05/07/28/writing-923882_960_720.jpg'),
),
Container(
margin: const EdgeInsets.all(10),
padding: const EdgeInsets.all(8),
child: Image.network(
'https://cdn.pixabay.com/photo/2015/11/19/21/14/glasses-1052023_960_720.jpg'),
),
Container(
margin: const EdgeInsets.all(10),
padding: const EdgeInsets.all(8),
child: Image.network(
'https://cdn.pixabay.com/photo/2015/09/05/21/51/reading-925589_960_720.jpg'),
),
Container(
margin: const EdgeInsets.all(10),
padding: const EdgeInsets.all(8),
child: Image.network(
'https://cdn.pixabay.com/photo/2015/11/19/21/10/glasses-1052010_960_720.jpg'),
),
Container(
margin: const EdgeInsets.all(10),
padding: const EdgeInsets.all(8),
child: Image.network(
'https://cdn.pixabay.com/photo/2016/09/10/17/18/book-1659717_960_720.jpg'),
),
Container(
margin: const EdgeInsets.all(10),
padding: const EdgeInsets.all(8),
child: Image.network(
'https://cdn.pixabay.com/photo/2014/09/05/18/32/old-books-436498_960_720.jpg'),
),
Container(
margin: const EdgeInsets.all(10),
padding: const EdgeInsets.all(8),
child: Image.network(
'https://cdn.pixabay.com/photo/2015/09/05/21/51/reading-925589_960_720.jpg'),
),
Container(
margin: const EdgeInsets.all(10),
padding: const EdgeInsets.all(8),
child: Image.network(
'https://cdn.pixabay.com/photo/2016/09/10/17/18/book-1659717_960_720.jpg'),
),
Container(
margin: const EdgeInsets.all(10),
padding: const EdgeInsets.all(8),
width: 250,
height: 250,
child: Text(
'The End',
style: TextStyle(
backgroundColor: Colors.lightBlueAccent,
fontSize: 30,
fontFamily: 'Anton',
fontWeight: FontWeight.bold,
),
),
),
],
),
),
),
);
}
}
Especially this part of the code needs our attention.
child: GridView.extent(
primary: false,
padding: const EdgeInsets.all(16),
crossAxisSpacing: 10,
mainAxisSpacing: 10,
maxCrossAxisExtent: 200.0,
....There are many other named parameters, which at present we have not used.
Certainly, we can scroll down and see the end row, like the following screenshot.
To sum up, we can say that 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.
Moreover, a GridView displays items in a two dimensional rows and columns. And GridView widget implements this material component.
Leave a Reply