[Flutter] Use staggered_grid_view package to create a pretty grid widget

I ever recorded how to use the built-in ListView component in [Flutter] Use "ListView" to create a list component, and its display result is as follows:

But in order to show more pretty widget, I searched for various components, and finally found a pleasing module: flutter_staggered_grid_view.

Please forgive me for directly quoting their pictures on pub.dev:

how is it? Isn't it beautiful? Different grids are combined into a Widget, and you can also slide down. In view of this, I started the study of this module and recorded it here.

For more detailed content, please refer to the developer's pub.dev https://pub.dev/packages/flutter_staggered_grid_view

Preparation

Since this is an external module, not Flutter's own, we have to go to pubspec.yaml to set this module first.

When I was studying, the version of this module reached 0.3.0, but I will definitely continue to update it in the future. It is best to check the current latest version on the developer's pub.dev at any time.

After writing the version number to be quoted, click on the Packages get above, it should be completed within a few seconds.

How to use flutter_staggered_grid_view

import 'package:flutter/material.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text('staggered_grid_view TEST'),
        ),
        body: StaggeredGridView.countBuilder(
            crossAxisCount: 4,
            itemCount: 20,
            itemBuilder: (BuildContext context, int index) => new Container(
              color: Colors.deepOrange,
              child: new Center(
                child: new CircleAvatar(
                  backgroundColor: Colors.white,
                  child: new Text('$index'),
                  ),
                ),
              ),
            staggeredTileBuilder: (int index) =>
              new StaggeredTile.count(2, 2),
    mainAxisSpacing: 4.0,
    crossAxisSpacing: 4.0,
      ),
      ),
    );
  }
}

Output:

In order to show, I did not carefully design the beautiful interface adjusted by the developer above, but simply set it to be left-right symmetrical and contain round-framed numbers on a white background.

The following explains the various settings in the code:

• StaggeredGridView.countBuilder: module widget builder
• crossAxisCount: The number of widths
• itemCount: Number of components
• StaggeredTile.count: Length and width settings
• mainAxisSpacing: Interval between upper and lower components
• crossAxisSpacing: Left and right component spacing

Of course, we can adjust the above settings. For example:

itemBuilder: (BuildContext context, int index) => new Container(
              color: Colors.deepOrange,

We change the component to blue color:

itemBuilder: (BuildContext context, int index) => new Container(
      color: index%3==0?Colors.deepOrange:Colors.blueAccent,

In this way, only the components whose component number is divisible by 3 will display dark orange, and all other components will be blue.

For example, we set all length and width equal to 2:

staggeredTileBuilder: (int index) =>
    new StaggeredTile.count(2, 2),

Change to:

staggeredTileBuilder: (int index) =>
    new StaggeredTile.count(2, index.isOdd?1:2),

The length is 2 only when the component number is an even number, and the length is only 1 if it is an odd number.

Output:

We will get such an arrangement pattern of components with different colors, length and width.

Of course, due to my poor art and time factors, I did not use this module very well.

But if you see the sample picture set by the developer, you can definitely feel the power of this module.

I hope everyone can make beautiful apps.