Shulou(Shulou.com)06/02 Report--

This article introduces the knowledge of "how to use flutter_staggered_grid_view to achieve the effect of paging waterfall flow". In the operation of actual cases, many people will encounter this dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Explain

1. Words of the preface

GridView is scrollable, and 2D array controls can use this component to achieve scrolling, but it renders at the same height.

If you want to implement scrolling waterfall flows at different heights, use this plug-in:

Flutter_staggered_grid_view

Note: to configure pubspec.yaml files, it is best to use version 0.3.2 or above. In this case, the flutter version needs more than 1.17 support.

Because the lower version of plug-in support is not friendly.

Flutter_staggered_grid_view: ^ 0.3.2

If the component cannot slide, it may be a problem with the version

two。 Git address of the plug-in

Https://github.com/letsar/flutter_staggered_grid_view

Import this plug-in in the flutter component you are using

Import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart'

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,)

4. Implement drop-down refresh with RefreshIndicator

CustomScrollView (controller: _ scrollController, slivers: [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),],))

5. Six creation methods and attributes

StaggeredGridView.count and StaggeredGridView.extent, the former creates a layout with a fixed number of Tile in the longitudinal axis, while the latter only specifies a maximum number of Tile in the vertical axis method. Both of them are set by List when the number of aptamers is relatively small.

StaggeredGridView.countBuilder and StaggeredGridView.extentBuild, which are similar in meaning to the above, differ in situations where a large number of aptamers Widget need to be created dynamically.

More advanced are StaggeredGridView.builder and StaggeredGridView.custom, which differ in the way they are created and are more flexible

StaggeredTile.count: number of fixed vertical and spindle

StaggeredTile.extent: the number on the vertical axis and the maximum range on the spindle

StaggeredTile.fit: number on vertical axi

Several columns of StaggeredGridView are the result of dividing crossAxisCount by the number of vertical axes on the StaggeredTile setting

Part of the source code (can not be run directly, debug according to your own logic) 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 ([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, 0x00, 0x00, 0x00, 0x00 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 _ createSizes (int count) {Random rnd = new Random (); return new List.generate (count, (I) = > new IntSize);} class Example08 extends StatefulWidget {@ override Example08State createState () = > new Example08State ();} class Example08State extends State {static const int _ kItemCount = 10; final List _ 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, crossAxisSpacing: 4, itemBuilder: (context, index) = > new _ Tile (index) _ sizes [index]), staggeredTileBuilder: (index) = > new StaggeredTile.fit (2),) } @ override void initState () {super.initState (); print ('initialize entry'); _ scrollController.addListener (() {print ('I heard');});}} 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: [new Stack (children: [/ / 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 EdgeInsets.all Child: new Column (children: [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),),],) }} "how to use flutter_staggered_grid_view to achieve paging waterfall flow effect" content is introduced here, thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.