Making Grids
Depending on what you need to achieve with your app, a grid can be formed in two different ways: using the GridView or nested Rows and Columns.
The GridView
The GridView is to grids what the ListView is to vertical layout, and it is useful for grids similar to the ones seen in photo apps: long, scrollable grids of a variable number of fixed-size elements. A lot like a ListView, it can be created using multiple constructors. The default constructor will be discussed in the section Slivers, Custom Scrollables, and Collapsable App Bars.
Grids with a Fixed Cross-Axis Count
The GridView.count constructor takes a List of children Widgets and the crossAxisCount as the basic arguments to build the grid, like in the following example:
| | GridView.count( |
| | crossAxisCount: 3, |
| | crossAxisSpacing: 50.0, |
| | mainAxisSpacing: 100.0, |
| | padding: EdgeInsets.all(20.0), |
| | children: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15] |
| | .map( |
| | (n) => |
| | Text( |
| | "$n", |
| | style: Theme.of(context).textTheme.display1, |
| | ), |
| | ).toList(), |
| | ) |
which produces:
Grids with a Maximum Per-Widget Cross-Axis Extent
The GridView.extent constructor takes a List of children Widgets and the maxCrossAxisExtent, which is the maximum amount of pixels each child can take up on the cross-axis. The bigger the maxCrossAxisExtent is, the bigger each tile is going to be.
For example, the following:
| | GridView.extent( |
| | maxCrossAxisExtent: 50.0, |
| | crossAxisSpacing: 50.0, |
| | mainAxisSpacing: 100.0, |
| | padding: EdgeInsets.all(20.0), |
| | children: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15] |
| | .map( |
| | (n) => |
| | Text( |
| | "$n", |
| | style: Theme.of(context).textTheme.display1, |
| | ), |
| | ).toList(), |
| | ) |
produces, on a 2880x1440 560dpi screen with default Android scaling, the following grid:
Grids Built Using Builder Functions
The GridView.builder constructor which uses an itemBuilder to build the children and a gridDelegate for the size and position of the widgets, like the following example, which produces the same grid as the GridView.count example (here):
| | GridView.builder( |
| | padding: EdgeInsets.all(20.0), |
| | |
| | itemCount: 15, |
| | |
| | gridDelegate: SliverGridDelegateWithFixedCrossAxisCount( |
| | crossAxisCount: 3, |
| | crossAxisSpacing: 50.0, |
| | mainAxisSpacing: 100.0, |
| | ), |
| | itemBuilder: (context, i) => Text("${i+1}"), |
| | ), |
Grid delegates have (unusually long) names such as SliverGridDelegateWithFixedCrossAxisCount and SliverGridDelegateWithMaxCrossAxisExtent to get, respectively, the GridView.count and GridView.extent properties. They take grid layout-related properties as named arguments.
If you wanted to exactly replicate the behavior of the GridView.extent shown here you would write the following:
| | GridView.builder( |
| | padding: EdgeInsets.all(20.0), |
| | |
| | itemCount: 15, |
| | |
| | gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent( |
| | maxCrossAxisExtent: 50.0, |
| | crossAxisSpacing: 50.0, |
| | mainAxisSpacing: 100.0, |
| | ), |
| | itemBuilder: (context, i) => Text("${i+1}"), |
| | |
| | ) |
The GridView’s Properties
Other grid properties are:
-
childAspectRatio, which is the ratio between cross-axis and main axis size of each of the grid’s children.
-
shrinkWrap, which is the same as the ListView’s (in How You Use It).
-
scrollDirection, which sets the direction along which the grid scrolls (which also serves as the main axis of the grid).
Nested Rows and Columns
If, instead, you need to create a (perhaps smaller) non-scrollable grid of a fixed number of widgets you would use a Column of Rows.
A simple 2x2 grid would be implemented in the following way:
| | Column( |
| | children: <Widget> [ |
| | Row( |
| | children: <Widget> [ |
| | Text(topLeftString), |
| | Text(topRightString), |
| | ], |
| | ), |
| | Row( |
| | children: <Widget> [ |
| | Text(bottomLeftString), |
| | Text(bottomRightString), |
| | ], |
| | ), |
| | ], |
| | ) |