1. Introduction

Flutter, as one of the most popular technologies, has attracted the attention of many technology enthusiasts due to its excellent performance and advantages of smoothing multiple differences. Some big companies, such as Xianyu, Meituan and Tencent, have already put Flutter into production. Although the ecosystem of Flutter is not yet fully mature, thanks to the support of Google, it is growing fast enough that we can expect the need for Flutter developers to grow in the future.

Whether it’s for today’s technology or future trends, 9102 years on, as a front-end developer, there seems to be no reason not to try it. It is with this mentality that the author also began to learn Flutter and built a warehouse for practice. All subsequent codes will be hosted on it. Welcome Star to learn Flutter together. This is my series on Flutter:

  • Build a beautiful UI with Flutter – Basic Components
  • Flutter rolling container component – ListView chapter
  • Flutter grid layout – GridView article
  • Use custom ICONS in Flutter

After the last article on ListView component learning, we have a preliminary understanding of the use of rolling components, which is very helpful to learn today’s GridView component. Because both inherit from BoxScrollView, their properties are more than 80% the same and their usage is very similar.

As you can see in the following figure, the GridView grid layout is used very frequently in the APP, so let’s take a look at how to use Flutter

2. Meet the GridView

GridView constructor: GridView, GridView.Builder, GridView.count, GridView.extent and GridView.custom But don’t panic, because it’s safe to say that you can master its default constructor

Let’s look at the GridView constructor (unusual attributes omitted) :

GridView({
  Key key,
  Axis scrollDirection = Axis.vertical,
  bool reverse = false,
  ScrollController controller,
  ScrollPhysics physics,
  bool shrinkWrap = false,
  EdgeInsetsGeometry padding,
  @required this.gridDelegate,
  double cacheExtent,
  List<Widget> children = const <Widget>[],
})
Copy the code

Except for one mandatory parameter, the gridDelegate parameter is the same as the default constructor parameter of the ListView, which is why it is so easy to learn GridView after you have learned the ListView.

So let’s focus on the gridDelegate parameter, which is a delegate for how the GridView component controls the arrangement of child elements. Dart shows that SliverGridDelegate is of type SliverGridDelegate, and sliver_grid.dart shows that SliverGridDelegate is an abstract class. And there are two implementation classes:

  • SliverGridDelegateWithFixedCrossAxisCount: used for scenarios with a fixed number of columns;
  • SliverGridDelegateWithMaxCrossAxisExtent: for scenarios where child elements have a maximum width limit;

2.1 SliverGridDelegateWithFixedCrossAxisCount

Let’s look at SliverGridDelegateWithFixedCrossAxisCount, according to the name of the class we can probably guess what it is: if you are in the layout of the each line of the number of columns is fixed, then you should use it.

Let’s look at its constructor:

SliverGridDelegateWithFixedCrossAxisCount({
  @required this.crossAxisCount,
  this.mainAxisSpacing = 0.0.this.crossAxisSpacing = 0.0.this.childAspectRatio = 1.0,})Copy the code
  • crossAxisCount: number of columns, that is, the number of child elements in a row;
  • mainAxisSpacing: Gap spacing along the main axis;
  • crossAxisSpacing: Void spacing along the secondary axis;
  • childAspectRatio: Width-to-height ratio of child elements.

If you look at the example above, you can see what each parameter means. However, there is one important caveat here: if your child element has a width to height ratio of one, you must set the childAspectRatio property.

2.2 SliverGridDelegateWithMaxCrossAxisExtent

SliverGridDelegateWithMaxCrossAxisExtent may be less in the practical application, look at the constructor:

SliverGridDelegateWithMaxCrossAxisExtent({
  @required this.maxCrossAxisExtent,
  this.mainAxisSpacing = 0.0.this.crossAxisSpacing = 0.0.this.childAspectRatio = 1.0,})Copy the code

Can see besides maxCrossAxisExtent, other parameters and SliverGridDelegateWithFixedCrossAxisCount are the same. So what does maxCrossAxisExtent do? Let’s look at an example:

Assuming the screen width is 375 and crossAxisSpacing is 0,

  • maxCrossAxisExtentA value of125, the grid column number will be3. because125 times 3 is 375The width of each column is just375/3.
  • maxCrossAxisExtentA value of126, the grid column number will be3. because126 times 3 is more than 375, the width of each column will be375/3.
  • maxCrossAxisExtentA value of124, the grid column number will be4. because124 times 3 is less than 375The width of each column will be375/4.

As you can see, maxCrossAxisExtent is basically telling the GridView component what the maximum possible width of its child elements is, and then calculating the appropriate column width (in fact, we don’t use this method very often either, so we don’t use it very often).

3. Practical application

Now that we have an overview of the GrdiView component, let’s take a look at how to use it. Remember all the constructors of the GridView? In fact:

  1. GridViewThe default constructor can be analogous toListViewThe default constructor, applied toFinite number of childrenBecauseGridViewComponents are rendered all at oncechildrenChild element component in;
  2. GridView.builderConstructors can be analogous toListView.builderConstructor, applicable toA long list ofBecauseGridViewComponents dynamically create and destroy child elements based on whether they appear on the screen, reducing memory consumption and rendering more efficiently;
  3. GridView.countThe constructor isGrdiViewuseSliverGridDelegateWithFixedCrossAxisCountThe abbreviation of “grammar sugar” is exactly the same;
  4. GridView.extentConstructor expressionGridViewuseSliverGridDelegateWithMaxCrossAxisExtentThe shorthand for “grammar sugar” is exactly the same.

Let’s start with a simple example that uses the GridView.count constructor to mimic the meituan home page service list (the code for the service menu item can be seen here, further reinforcing the use of the base component) :

Code (Address of the file)

GridView.count(
  crossAxisCount: 5,
  padding: EdgeInsets.symmetric(vertical: 0),
  children: serviceList.map((item) => ServiceItem(data: item)).toList(),
)

/* * * * ** * * * ** * */
/* is exactly the same as */
/* * * * ** * * * ** * /

GridView(
  padding: EdgeInsets.symmetric(vertical: 0),
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 5,
  ),
  children: serviceList.map((item) => ServiceItem(data: item)).toList(),
)
Copy the code

preview

Gridview. builder to create a grid layout (cross talk card code can be seen here) :

Code (Address of the file)

GridView.builder(
  shrinkWrap: true,
  itemCount: programmeList.length,
  physics: NeverScrollableScrollPhysics(),
  padding: EdgeInsets.symmetric(horizontal: 16),
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 3,
    mainAxisSpacing: 10,
    crossAxisSpacing: 10,
    childAspectRatio: 0.7,
  ),
  itemBuilder: (context, index) {
    returnProgramme(data: programmeList[index]); },)Copy the code

preview

4. To summarize

This article first introduces the properties of the GridView component. And the emphasis on SliverGridDelegateWithFixedCrossAxisCount and SliverGridDelegateWithMaxCrossAxisExtent applicable application scenarios, respectively. Then, through two practical application examples, we introduce the common constructor usage method of GridView component. Hopefully, this introduction will help you understand the use of the grid layout of Flutter

All the code of this article is hosted here, you can also follow my Blog, welcome to exchange learning ~