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

This article will explain in detail how to achieve the waterfall flow effect of Flutter StaggeredGridView. The editor thinks it is very practical, so I share it for you as a reference. I hope you can get something after reading this article.

The details are as follows

Add dependencies in the root pubspec.yaml file

Dependencies: flutter_staggered_grid_view: 0.4.0import 'dart:math';import' package:flutter/cupertino.dart';import 'package:flutter/material.dart';import' package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';void main (List args) {runApp (app ());} class app extends StatelessWidget {const app ({Key key}): super (key: key) Override Widget build (BuildContext context) {return MaterialApp (home: homebody (),) }} class homebody extends StatelessWidget {@ override Widget build (BuildContext context) {return Scaffold (appBar: AppBar (title: const Text ('StaggeredGridView'),), body: Padding (padding: const EdgeInsets.all (4), child: StaggeredGridView.countBuilder (shrinkWrap: true, crossAxisCount: 4, crossAxisSpacing: 4, mainAxisSpacing: 4, itemCount: 100 ItemBuilder: (context, index) {return Container (height:100+200*Random () .nextDouble (), color: Colors.green, child: new Center (child: new CircleAvatar (backgroundColor: Colors.white, child: new Text ('$index')) ),)) }, staggeredTileBuilder: (index) = > StaggeredTile.fit (1)),),);}}

The effect is as follows:

This is the end of the article on "how to achieve waterfall flow in Flutter StaggeredGridView". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

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.