flutter 简单实现瀑布流 上拉加载，下拉刷新

使用组件

上拉加载，下拉刷新组件

flutter_easyrefresh: 2.2.1

下面直接上代码

Widget build(BuildContext context) {
    
    
    return Scaffold(
      appBar: AppBar(
        title: Text('瀑布流'),
        centerTitle: true,
      ),
      body: EasyRefresh(
        onRefresh: () async {
    
    
          print("我是刷新");
        },
        onLoad: () async {
    
    
          print("我是加载");
        },
        footer: ClassicalFooter(
          bgColor: Colors.white,
          //  更多信息文字颜色
          infoColor: Colors.blue,
          // 字体颜色
          textColor: Colors.red,
          // 加载失败时显示的文字
          loadText: "加载失败时显示的文字",
          // 没有更多时显示的文字
          noMoreText: '没有更多时显示的文字',
          // 是否显示提示信息
          showInfo: false,
          // 正在加载时的文字
          loadingText: "正在加载时的文字",
          // 准备加载时显示的文字
          loadReadyText: "准备加载时显示的文字",
          // 加载完成显示的文字
          loadedText: "加载完成显示的文字",

        ),
        header: ClassicalHeader(
            bgColor: Colors.white,
            //  更多信息文字颜色
            infoColor: Colors.blue,
            // 字体颜色
            textColor: Colors.red,
            refreshingText: "加载中的提示文字",
            refreshedText: "加载完成提示的文字",
            refreshFailedText: "加载失败提示的文字"
            // 是否显示提示信息
            // showInfo: false,
            ),
        child: StaggeredGridView.countBuilder(
          // 横轴单元格数量
          crossAxisCount: 4,
          // 元素的数量
          itemCount: 20,
          // cell 单元格的样式
          itemBuilder: (context, index) {
    
    
            return Material(
              elevation: 8.0,
              borderRadius: BorderRadius.all(Radius.circular(8)),
              child: CachedNetworkImage(
                imageUrl:
                    'https://lupic.cdn.bcebos.com/20191203/3016244278_14.jpg',
                imageBuilder: (context, imageProvider) => Container(
                  width: 100,
                  height: 100,
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.all(Radius.circular(8)),
                    image: DecorationImage(
                      image: imageProvider,
                      fit: BoxFit.fill,
                    ),
                  ),
                ),
              ),
            );
          },
          //第一个参数是横轴所占的单元数，第二个参数是主轴所占的单元数
          staggeredTileBuilder: (index) {
    
    
            return StaggeredTile.count(2, index.isEven ? 2 : 1);
          },
          padding: EdgeInsets.all(8),
          mainAxisSpacing: 8,
          crossAxisSpacing: 8,
        ),
      ),
    );
  }```