A list,

Flutter/Staggered Gridview is a layout that supports multi-column grids of varying sizes, Android, iOS, and Web, where each cell can be called a Tile. It has the following characteristics:

  • Multiple columns can be set up like a GridView
  • You can set the number of tiles or the proportion to be occupied on the vertical and main axes (e.g. CrossAxisCount: If staggeredtile. fit(1), staggeredtile. Count(2,index==0? 2.5:3) indicates that there are two columns on the vertical axis and the size of the first Tile along the main axis is 2.5:3 of the height of the other tiles.
  • You can set the row spacing and column spacing between tiles
  • Can be used within CustomScollerView (with shrinkWrap:true and ScrollerController associated with two widgets)
  • Tile can adjust height in the main axis (this is better than GridView, no aspect ratio, no overflow)

Second, the use of

2.1. Pubspec. yaml adds dependencies

dependencies:
   flutter_staggered_grid_view:
Copy the code

2.2, guide package

The import 'package: flutter_staggered_grid_view/flutter_staggered_grid_view. Dart';Copy the code

2.3. Six creation methods

The difference between:

  • StaggeredGridView.countandStaggeredGridView.extent, the former creates a layout with a fixed number of tiles along the vertical axis, while the latter only specifies the maximum number of tiles on the vertical axis. Both are suitable for small child widgets and are set by List
  • StaggeredGridView.countBuilderandStaggeredGridView.extentBuild, these two meanings are similar to the above, except that they are suitable for situations where there are a large number of child widgets that need to be created dynamically
  • Even more advancedStaggeredGridView.builderandStaggeredGridView.customThe difference is that the creation method is different and more flexible

2.4 use of Staggeredtiles

  • Staggeredtile. count: Fixed the number on the vertical and main axes

  • Staggeredtile. extent: The amount on the vertical axis and the maximum extent on the main axis

  • Staggeredtile. fit: Quantity on the vertical axis

    StaggeredGridView has several columns that are the result of dividing crossAxisCount by the number of vertical axes on the StaggeredTile setting.

Three, application scenarios

3.1. The height of the item in the GridView cannot be determined, so the aspect ratio cannot be set. In this case, the StaggeredGridView can be used to automatically adjust the height

StaggeredGridView.countBuilder(
  shrinkWrap: true,
    controller: _scrollController,
    crossAxisCount: 4,
    crossAxisSpacing: 4,
    mainAxisSpacing: 10,
    itemCount: _count,
    itemBuilder: (context, index) {
      return Container(
          color: Colors.green,
          child: new Center(
            child: new CircleAvatar(
              backgroundColor: Colors.white,
              child: new Text('$index'),),)); }, staggeredTileBuilder: (index) => StaggeredTile.fit(2))
Copy the code

3.2 waterfall flow style

StaggeredGridView.countBuilder(
  shrinkWrap: true,
    controller: _scrollController,
    crossAxisCount: 4,
    crossAxisSpacing: 4,
    mainAxisSpacing: 10,
    itemCount: _count,
    itemBuilder: (context, index) {
      return Container(
          color: Colors.green,
          child: new Center(
            child: new CircleAvatar(
              backgroundColor: Colors.white,
              child: new Text('$index'),),)); }, staggeredTileBuilder: (index) => StaggeredTile.count(2, index == 0 ? 2.5 : 3))
Copy the code

3.3. Implement drop-down refresh with RefreshIndicator

CustomScrollView(
  controller: _scrollController,
  slivers: <Widget>[
    SliverToBoxAdapter(
      child: RefreshIndicator(
        onRefresh: () async {
          await Future.delayed(Duration(seconds: 5));
        },
        child: StaggeredGridView.countBuilder(
          shrinkWrap: true,
            controller: _scrollController,
            crossAxisCount: 4,
            crossAxisSpacing: 4,
            mainAxisSpacing: 10,
            itemCount: _count,
            itemBuilder: (context, index) {
              return Container(
                  color: Colors.green,
                  child: new Center(
                    child: new CircleAvatar(
                      backgroundColor: Colors.white,
                      child: new Text('$index'),),)); }, staggeredTileBuilder: (index) => StaggeredTile.count(2, index == 0 ? 2.5 : 3(), (), [, ()Copy the code

Iv. Summary of Frequently asked Questions (continuously updated)

4.1. Nested CustomScrollView cannot slide when used

1, upgrade StaggeredGridView version, it is said that version 0.3.0 or above has been resolved

StaggeredGridView set shrinkWrap to true