First, the old routine, look at the style first

Second, the interpretation of the

1. Preface

GridView is a scrollable 2D array control that can use this component to achieve the scrolling effect, but it will render at the same height.

If you want to implement a rolling waterfall flow of different heights, use this plugin:

flutter_staggered_grid_view
Copy the code

Note: To configure the Pubspec. yaml file, it is best to use version 0.3.2 or above, for which the Flutter version requires support of 1.17 or above

Because the earlier version of the plug-in support is not friendly

Flutter_staggered_grid_view: ^ 0.3.2Copy the code

If the component doesn’t slide, there may be a versioning problem

2. The Git address of the plug-in

Github.com/letsar/flut…

Import this plug-in into the flutter component you use

import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
Copy the code

3. Effect experience

new StaggeredGridView.countBuilder( crossAxisCount: 4, itemCount: 8, itemBuilder: (BuildContext context, int index) => new Container( color: Colors.green, child: new Center( child: new CircleAvatar( backgroundColor: Colors.white, child: new Text('$index'), ), )), staggeredTileBuilder: (int index) => new StaggeredTile.count(2, index.isEven ? 2:1) mainAxisSpacing: 4.0, crossAxisSpacing: 4.0,)Copy the code

4. Use the RefreshIndicator to refresh

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

5. Six creation methods and attributes

  • Staggeredgridview. count and StaggeredGridView.extent, the former creates a layout with a fixed number of tiles on the vertical axis, and the latter just specifies a maximum number of tiles on the vertical axis. It’s all set by List

  • StaggeredGridView. CountBuilder and StaggeredGridView. ExtentBuild, both to keep up with the meaning about the same, the difference is suited to the needs of the number of child widgets more dynamically created conditions

  • More advanced and StaggeredGridView. Builder and StaggeredGridView. The custom, the difference is created in a different way, but also more flexible

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

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

  • Staggeredtile. fit: The number on the vertical axis

  • The StaggeredGridView has several columns that are the result of crossAxisCount divided by the number of vertical axes on the StaggeredTile setting

Three, part of the source code (not directly run, according to their own logic debugging)

import 'dart:math'; import 'dart:typed_data'; import 'package:flutter/material.dart'; import 'package:dio/dio.dart'; import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart'; final Uint8List kTransparentImage = new Uint8List.fromList(<int>[ 0x89, 0x50, 0x4E, 0x47, 0x0D, 0x0A, 0x1A, 0x0A, 0x00, 0x00, 0x00, 0x0D, 0x49, 0x48, 0x44, 0x52, 0x00, 0x00, 0x00, 0x01, 0x00, 0x00, 0x00, 0x01, 0x08, 0x06, 0x00, 0x00, 0x00, 0x1F, 0x15, 0xC4, 0x89, 0x00, 0x00, 0x00, 0x0A, 0x49, 0x44, 0x41, 0x54, 0x78, 0x9C, 0x63, 0x00, 0x01, 0x00, 0x00, 0x05, 0x00, 0x01, 0x0D, 0x0A, 0x2D, 0xB4, 0x00, 0x00, 0x00, 0x00, 0x49, 0x45, 0x4E, 0x44, 0xAE, ]); List<IntSize> _createSizes(int count) { Random rnd = new Random(); return new List.generate(count, (i) => new IntSize((rnd.nextInt(500) + 200), rnd.nextInt(800) + 200)); } class Example08 extends StatefulWidget { @override Example08State createState() => new Example08State(); } class Example08State extends State<Example08> { static const int _kItemCount = 10; final List<IntSize> _sizes = _createSizes(_kItemCount).toList(); ScrollController _scrollController = new ScrollController(); @override Widget build(BuildContext context) { return new Scaffold( appBar: new AppBar( title: new Text('random dynamic tile sizes'), ), body: new StaggeredGridView.countBuilder( controller: _scrollController, itemCount: 10, primary: false, crossAxisCount: 4, mainAxisSpacing: 4.0, crossAxisSpacing: 4 4.0, itemBuilder: (context, index) => new _Tile(index, _sizes[index]), staggeredTileBuilder: (index) => new StaggeredTile.fit(2), ), ); } @override void initState() { super.initState(); Print (' initialize to enter '); _scrollController. AddListener (() {print (' I listen to the '); }); } } class IntSize { const IntSize(this.width, this.height); final int width; final int height; } class _Tile extends StatelessWidget { const _Tile(this.index, this.size); final IntSize size; final int index; @override Widget build(BuildContext context) { return new Card( child: new Column( children: <Widget>[ new Stack( children: <Widget>[ //new Center(child: new CircularProgressIndicator()), new Center( child: new FadeInImage.memoryNetwork( placeholder: kTransparentImage, image: 'https://picsum.photos/${size.width}/${size.height}/', ), ), ], ), new Padding( padding: Const edgeinset.all (4.0), child: new Column(children: <Widget>) [new Text('Image number $index', style: const TextStyle(fontWeight: FontWeight.bold), ), new Text( 'Width: ${size.width}', style: const TextStyle(color: Colors.grey), ), new Text( 'Height: ${size.height}', style: const TextStyle(color: Colors.grey), ), ], ), ) ], ), ); }}Copy the code

Keep updating……