PK creative Spring Festival, I am participating in the “Spring Festival creative submission contest”, please see: Spring Festival creative submission Contest

Author: Nuts

Public account: “Big Front End Tour”

Huawei Cloud sharing expert, InfoQ contract writer, Ali Cloud expert blogger, 51CTO blog chief Experience officer, one of the open source project GVA, focusing on the sharing of big front-end technologies, including Flutter, applets, Android, VUE, JavaScript.

The New Year is coming soon. Have you decided how to celebrate the New Year? Today I take you to write happy New Year in the waterfall flow layout.

In the Web and mobile development world, waterfall flow layouts are useful when we want to display a grid of projects of varying sizes. An axis uses a strict grid layout, usually columns. On the other axis, items have different heights, but can be arranged flexibly to fill the available space. A famous example of using waterfall flow layouts is Pinterest. They implemented this layout for their website and mobile app to display images of different sizes.

This article will provide you with a popular package, fluter_staggered_grid_view, by using the name MasonryGridView.

Application to preview

The application we will build contains a three-column waterfall flow layout. Each item has a random background color and a dynamic height. :

code

By running the install plug-in:

flutter pub add flutter_staggered_grid_view
Copy the code

Then execute this command:

flutter pub get
Copy the code

Dart Complete source code and description:

// main.dart import 'package:flutter/material.dart'; import 'dart:math'; import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart'; void main() { runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false, title: ThemeData(primarySwatch: color.amber,), home: const HomePage(),); } } class HomePage extends StatefulWidget { const HomePage({Key? key}) : super(key: key); @override _HomePageState createState() => _HomePageState(); } class _HomePageState extends State<HomePage> { // Generate a list of dummy items final List<Map<String, Dynamic >> _items = List. Generate (200, (index) => {"id": index, "title": "happy New Year ", "height": The Random (). NextInt (150) + 50.5}); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Const Text(' Happy New Year to you, big front-end Flight '),), // Implement the Masslayout body: MasonrygridView. count(itemCount: _items.length, padding: const EdgeInsets.symmetric(vertical: 30, horizontal: 10), // the number of columns crossAxisCount: 3, // vertical gap between two items mainAxisSpacing: 4, // horizontal gap between two items crossAxisSpacing: 4, itemBuilder: (context, index) { // display each item with a card return Card( // Give each item a random background color color: Color.fromARGB( Random().nextInt(256), Random().nextInt(256), Random().nextInt(256), Random().nextInt(256)), key: ValueKey(_items[index]['id']), child: SizedBox( height: _items[index]['height'], child: Center( child: Text(_items[index]['title']), ), ), ); })); }}Copy the code

conclusion

You have learned how to make a waterfall flow layout in Flutter. This knowledge can be helpful in many situations where you want to build beautiful and professional user interfaces. If you want to explore more new and interesting things about Flutter and Dart, check out the following article:

Implementation of the latest Flutter wechat Sharing Function

Everyone’s likes and support are the biggest encouragement for me.