Flutter实现 瀑布流+高斯模糊效果+上拉加载+下拉刷新

1.心动我的

/// 我心动的列表
///
/// created by hujintao
/// created at 2019-09-11
//
import 'package:flutter/material.dart';
import 'package:flutter_easyrefresh/easy_refresh.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:fpdxapp/components/dialogs/app_update.dart';
import 'package:fpdxapp/components/dialogs/dialog_wrapper.dart';
import 'package:fpdxapp/components/dialogs/unlock_cp_dialog.dart';
import 'package:fpdxapp/components/vip_tag.dart';
import 'package:fpdxapp/constants/icons.dart';
import 'package:fpdxapp/constants/style.dart';
import 'package:fpdxapp/dao/friends/heartBeat.dart';
import 'package:fpdxapp/model/friends/heartBeat.dart';
import 'package:fpdxapp/utils/date_util.dart';
import 'package:fpdxapp/utils/toast.dart';
import 'package:fpdxapp/utils/utils.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';

class MyHeartBeatList extends StatefulWidget {
  @override
  _MyHeartBeatListState createState() => _MyHeartBeatListState();
}

class _MyHeartBeatListState extends State<MyHeartBeatList> with AutomaticKeepAliveClientMixin{

  //加载更多key 必填
  GlobalKey<RefreshFooterState> _footerKey =
      new GlobalKey<RefreshFooterState>();

  //下拉刷新key 必填
  GlobalKey<RefreshHeaderState> _headerKey =
      new GlobalKey<RefreshHeaderState>();

  List<HeartBeatList> heartBeatList = [];
  int _page;
  ScrollController _scrollController;

  @override
  // TODO: implement wantKeepAlive
  bool get wantKeepAlive => true;
  /// 渐变色
  final gradient = Utils.parseAngleToAlignment(90);

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    this._refreshData();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: this.heartBeatList != null && this.heartBeatList.length > 0
          ? _buildContent()
          : _noDataWidget(),
    );
  }

  Widget _buildContent() {
    return EasyRefresh(
      refreshHeader: ClassicsHeader(
        key: _headerKey,
        bgColor: Colors.white,
        textColor: Colors.pink,
        moreInfoColor: Colors.pink,
        refreshReadyText: '下拉刷新',
        refreshingText: '正在努力刷新',
        refreshedText: '加载完成',
        showMore: true,
        moreInfo: '正在加载中',
      ),
      refreshFooter: ClassicsFooter(
        key: _footerKey,
        bgColor: Colors.white,
        textColor: Colors.pink,
        moreInfoColor: Colors.pink,
        showMore: true,
        noMoreText: '暂时没有更多了',
        loadReadyText: '上拉加载',
        loadedText: '加载完毕',
        loadText: '上拉加载更多',
        loadingText: '正在努力加载更多',
        moreInfo: '正在加载中',
      ),
      child: new StaggeredGridView.countBuilder(
        itemCount:
            this.heartBeatList.length > 0 ? this.heartBeatList.length : 0,
        primary: false,
        crossAxisCount: 4,
        mainAxisSpacing: ScreenUtil().setWidth(30),
        crossAxisSpacing: ScreenUtil().setWidth(30),
        itemBuilder: (BuildContext context, int index) => new Container(
          height: ScreenUtil().setHeight(582),
            color: Colors.transparent,
            child: _buildImageItem(heartBeatList[index])),
        staggeredTileBuilder: (int index) =>
            new StaggeredTile.count(2, index.isEven ? 3 : 2.5),
        padding: EdgeInsets.only(
            left: ScreenUtil().setWidth(32), right: ScreenUtil().setWidth(32)),
      ),
      loadMore: () async {
        print('没有更多了.......');
        _addMoreData();
      },
      onRefresh: () async {
        print('下拉刷新~~~~');
        _refreshData();
      },
    );
  }

  /// DetailItem
  Widget _buildImageItem(HeartBeatList item) {
    return new GestureDetector(
      onTap: () {
        Toast.show("点击了");
      },
      child: Container(
        decoration: BoxDecoration(
            color: Color(0xffF3F4F5),
            borderRadius: BorderRadius.circular(10.0),
            image: DecorationImage(
                image: NetworkImage(
                    item != null && item.photoSrc != null ? item.photoSrc : ''),
                fit: BoxFit.cover) //设置图片的填充模式
            ),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            // 顶部阴影
            Container(
              height: ScreenUtil().setHeight(129),
              decoration: BoxDecoration(
                gradient: LinearGradient(
                    colors: [
                      Color(0xFF030303).withOpacity(0.06),
                      Color(0xFF565656).withOpacity(0.06),
                    ],
                    begin: Alignment(gradient['beginX'], gradient['beginY']),
                    end: Alignment(gradient['endX'], gradient['endY'])),
                borderRadius: BorderRadius.only(
                  topLeft: Radius.circular(10.0),
                  topRight: Radius.circular(10.0),
                ),
              ),
              child: Container(
                margin: EdgeInsets.only(
                  left: ScreenUtil().setWidth(10),
                  right: ScreenUtil().setWidth(17),
                ),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    Container(
                      margin: EdgeInsets.only(top: ScreenUtil().setHeight(17)),
                      child: Row(
                        children: <Widget>[
                          Icon(
                            MyIcons.heart,
                            size: ScreenUtil().setSp(40),
                            color: Colors.white,
                          ),
                          Container(
                            margin: EdgeInsets.only(
                              left: ScreenUtil().setWidth(5),
                              top: ScreenUtil().setWidth(5),
                            ),
                            child: Text(
                              item != null && item.praises != null
                                  ? item.praises.toString()
                                  : '',
                              style: TextStyle(
                                fontSize: ScreenUtil().setSp(20),
                                color: Colors.white,
                              ),
                              textAlign: TextAlign.center,
                            ),
                          )
                        ],
                      ),
                    ),
                    Container(
                      margin: EdgeInsets.only(top: ScreenUtil().setHeight(19)),
                      child: ClipOval(
                        child: Container(
                          color: Colors.black.withOpacity(0.24),
                          padding: EdgeInsets.all(ScreenUtil().setWidth(10)),
                          child: Icon(
                            MyIcons.lock,
                            size: ScreenUtil().setSp(42),
                            color: Colors.white,
                          ),
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            ),
            // 底部阴影
            Container(
              height: ScreenUtil().setHeight(129),
              decoration: BoxDecoration(
                gradient: LinearGradient(
                    colors: [
                      Color(0xFF030303).withOpacity(0.06),
                      Color(0xFF565656).withOpacity(0.06),
                    ],
                    begin: Alignment(gradient['beginX'], gradient['beginY']),
                    end: Alignment(gradient['endX'], gradient['endY'])),
                borderRadius: BorderRadius.only(
                  bottomLeft: Radius.circular(10.0),
                  bottomRight: Radius.circular(10.0),
                ),
              ),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  // 标签
                  Container(
                    margin: EdgeInsets.only(top: ScreenUtil().setHeight(33)),
                    child: Row(
                      children: <Widget>[
                        // 性别标识
                        item.sex == 1
                            ? Container(
                                margin: EdgeInsets.only(
                                    left: ScreenUtil().setHeight(22)),
                                child: ClipOval(
                                  child: Container(
                                    color: Color(0xff6CC1FD),
                                    padding: EdgeInsets.all(
                                        ScreenUtil().setWidth(3)),
                                    child: Icon(
                                      MyIcons.sex_boy,
                                      size: ScreenUtil().setSp(20),
                                      color: Colors.white,
                                    ),
                                  ),
                                ),
                              )
                            : Container(
                                margin: EdgeInsets.only(
                                    left: ScreenUtil().setHeight(22)),
                                child: ClipOval(
                                  child: Container(
                                    color: MyColors.primary,
                                    padding: EdgeInsets.all(
                                        ScreenUtil().setWidth(3)),
                                    child: Icon(
                                      MyIcons.sex_girl,
                                      size: ScreenUtil().setSp(20),
                                      color: Colors.white,
                                    ),
                                  ),
                                ),
                              ),
                        // 认证标识
                        item.user.wxAuth != null && item.user.wxAuth != 0
                            ? Container(
                                margin: EdgeInsets.only(
                                    left: ScreenUtil().setHeight(9)),
                                child: Image(
                                  image: NetworkImage(
                                      'https://oss.pocketuniversity.cn/media/2019-01-05/5c3029ad417ce.png'),
                                  width: ScreenUtil().setWidth(25),
                                ),
                              )
                            : Container(),
                        SizedBox(
                          width: ScreenUtil().setWidth(5),
                        ),
                        // VIP标识
                        VipTag(item.user?.beVipAt ?? 0,
                            item.user?.supvipEndat ?? 0, 0)
                      ],
                    ),
                  ),
                  // 描述
                  Container(
                    margin: EdgeInsets.only(
                        left: ScreenUtil().setWidth(21),
                        right: ScreenUtil().setWidth(21)),
                    child: Text(
                      item.updatedAt != null
                          ? DateUtil.howLongAgo(item.updatedAt) + '心动过你'
                          : '',
                      overflow: TextOverflow.ellipsis,
                      maxLines: 1,
                      textAlign: TextAlign.left,
                      style: TextStyle(
                        fontSize: ScreenUtil().setSp(31),
                        color: Colors.white,
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }

  /// 无数据占位
  Widget _noDataWidget() {
    return Container(
      child: Center(
        child: Column(
          children: <Widget>[
            // 图片
            Container(
              margin: EdgeInsets.only(
                top: ScreenUtil().setHeight(199),
              ),
              child: Image(
                image: Utils.getAssetImgWithPath('nodata_heartBeatMine'),
                width: ScreenUtil().setWidth(451),
                height: ScreenUtil().setHeight(357),
                fit: BoxFit.cover,
              ),
            ),
            // 文字
            Container(
              margin: EdgeInsets.only(
                top: ScreenUtil().setHeight(29),
              ),
              child: Text(
                '你目前还没有心动的人～',
                style: TextStyle(
                    color: Color(0xFF999999), fontSize: ScreenUtil().setSp(30)),
              ),
            ),
            // 按钮
            GestureDetector(
              onTap: () {
                Toast.show('去首页心动');
              },
              child: Container(
                margin: EdgeInsets.only(
                  top: ScreenUtil().setHeight(70),
                ),
                width: ScreenUtil().setWidth(520),
                height: ScreenUtil().setHeight(100),
                decoration: BoxDecoration(
                  color: Color(0xffFFF1F2),
                  // 设置渐变色
                  gradient: LinearGradient(
                    colors: [Color(0xFFFFF9FB1), Color(0xFFFF69A2)],
                    begin: Alignment(-1, -1),
                    end: Alignment(1.0, 0.56),
                  ),
                  borderRadius:
                      BorderRadius.circular(ScreenUtil().setHeight(50)),
                ),
                child: Center(
                  child: Text(
                    '去首页心动',
                    style: TextStyle(
                        color: Colors.white, fontSize: ScreenUtil().setSp(35)),
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

  /// 下拉刷新数据
  Future<Null> _refreshData() async {
    _page = 0;
    _getPostData(false);
  }

  /// 上拉加载数据
  Future<Null> _addMoreData() async {
    _page++;
    _getPostData(true);
  }

  /// 获取我心动的列表数据
  void _getPostData(bool _beAdd) async {
    print('page:${_page}');
    var r = await HeartBeatDao.getMyHeartBeatAllList(page: _page);
    setState(() {
      if (!_beAdd) {
        heartBeatList.clear();
        heartBeatList = r.data;
      } else {
        heartBeatList.addAll(r.data);
      }
    });
  }

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    _scrollController = ScrollController();

    _scrollController.addListener(_handleScroll);
  }

  void _handleScroll() {}

  @override
  void dispose() {
    _scrollController?.removeListener(_handleScroll);
    super.dispose();
  }
}

2.我心动的列表

import 'dart:ui';

/// 心动我的列表
///
/// created by hujintao
/// created at 2019-09-11
//
import 'package:flutter/material.dart';
import 'package:flutter_easyrefresh/easy_refresh.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
import 'package:fpdxapp/components/blur_widget/blur_widget.dart';
import 'package:fpdxapp/components/vip_tag.dart';
import 'package:fpdxapp/constants/icons.dart';
import 'package:fpdxapp/constants/style.dart';
import 'package:fpdxapp/dao/friends/heartBeat.dart';
import 'package:fpdxapp/model/friends/heartBeat.dart';
import 'package:fpdxapp/utils/date_util.dart';
import 'package:fpdxapp/utils/toast.dart';
import 'package:fpdxapp/utils/utils.dart';

class HeartBeatMineList extends StatefulWidget {
  @override
  _HeartBeatMineListState createState() => _HeartBeatMineListState();
}

class _HeartBeatMineListState extends State<HeartBeatMineList>
    with AutomaticKeepAliveClientMixin {
  //加载更多key 必填
  GlobalKey<RefreshFooterState> _footerKey =
      new GlobalKey<RefreshFooterState>();

  //下拉刷新key 必填
  GlobalKey<RefreshHeaderState> _headerKey =
      new GlobalKey<RefreshHeaderState>();

  List<HeartBeatList> heartBeatList = [];
  int _page;

  ScrollController _scrollController;

  @override
  // TODO: implement wantKeepAlive
  bool get wantKeepAlive => true;

  /// 渐变色
  final gradient = Utils.parseAngleToAlignment(90);

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    this._refreshData();
  }

  /// 下拉刷新数据
  Future<Null> _refreshData() async {
    _page = 0;
    _getPostData(false);
  }

  /// 上拉加载数据
  Future<Null> _addMoreData() async {
    _page++;
    _getPostData(true);
  }

  /// 获取我心动的列表数据
  void _getPostData(bool _beAdd) async {
    print('page:${_page}');
    var r = await HeartBeatDao.getHeartBeatMineAllList(page: _page);
    setState(() {
      if (!_beAdd) {
        heartBeatList.clear();
        heartBeatList = r.data;
      } else {
        heartBeatList.addAll(r.data);
      }
    });
  }

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    _scrollController = ScrollController();

    _scrollController.addListener(_handleScroll);
  }

  void _handleScroll() {}

  @override
  void dispose() {
    _scrollController?.removeListener(_handleScroll);
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: this.heartBeatList != null && this.heartBeatList.length > 0
          ? _buildContent()
          : _noDataWidget(),
    );
  }

  Widget _buildContent() {
    return EasyRefresh(
      refreshHeader: ClassicsHeader(
        key: _headerKey,
        bgColor: Colors.white,
        textColor: Colors.pink,
        moreInfoColor: Colors.pink,
        refreshReadyText: '下拉刷新',
        refreshingText: '正在努力刷新',
        refreshedText: '加载完成',
        showMore: true,
        moreInfo: '正在加载中',
      ),
      refreshFooter: ClassicsFooter(
        key: _footerKey,
        bgColor: Colors.white,
        textColor: Colors.pink,
        moreInfoColor: Colors.pink,
        showMore: true,
        noMoreText: '暂时没有更多了',
        loadReadyText: '上拉加载',
        loadedText: '加载完毕',
        loadText: '上拉加载更多',
        loadingText: '正在努力加载更多',
        moreInfo: '正在加载中',
      ),
      child: new StaggeredGridView.countBuilder(
        itemCount:
            this.heartBeatList.length > 0 ? this.heartBeatList.length : 0,
        primary: false,
        crossAxisCount: 4,
        mainAxisSpacing: ScreenUtil().setWidth(30),
        crossAxisSpacing: ScreenUtil().setWidth(30),
        itemBuilder: (BuildContext context, int index) => new Container(
            color: Colors.transparent,
            child: _buildImageItem(heartBeatList[index])),
        staggeredTileBuilder: (int index) =>
            new StaggeredTile.count(2, index.isEven ? 3 : 2.5),
        padding: EdgeInsets.only(
            left: ScreenUtil().setWidth(32), right: ScreenUtil().setWidth(32)),
      ),
      loadMore: () async {
        print('没有更多了.......');
        _addMoreData();
      },
      onRefresh: () async {
        print('下拉刷新~~~~');
        _refreshData();
      },
    );
  }

  /// DetailItem
  Widget _buildImageItem(HeartBeatList item) {
    return new GestureDetector(
      onTap: () {
        Toast.show("点击了");
      },
      child: Container(
        decoration: BoxDecoration(
          color: Colors.white,
          boxShadow: [
            BoxShadow(
                color: Color(0xffF3F4F5), offset: Offset(1, 1), spreadRadius: 1)
          ],
          borderRadius: BorderRadius.only(
            bottomLeft: Radius.circular(10.0),
            bottomRight: Radius.circular(10.0),
          ),
        ),
        child: Stack(
          overflow: Overflow.clip,
          alignment: Alignment(-1, 1),
          children: <Widget>[
            // 背景图片
            Container(
              decoration: BoxDecoration(
                  color: Color(0xffF3F4F5),
                  borderRadius: BorderRadius.only(
                    topLeft: Radius.circular(10.0),
                    topRight: Radius.circular(10.0),
                  ),
                  image: DecorationImage(
                      image: NetworkImage(item != null && item.photoSrc != null
                          ? item.photoSrc
                          : ''),
                      fit: BoxFit.cover) //设置图片的填充模式
                  ),
              margin: EdgeInsets.only(bottom: ScreenUtil().setHeight(20)),
            ),
            // 矩形高斯模糊效果
            BlurRectWidget(
              child: Container(),
              opacity: 0.8,
            ),
            // 主题
            Positioned(
              top: 0,
              left: 0,
              right: 0,
              bottom: ScreenUtil().setHeight(20),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: <Widget>[
                  // 顶部阴影
                  Container(
                    height: ScreenUtil().setHeight(129),
                    decoration: BoxDecoration(
                      gradient: LinearGradient(
                          colors: [
                            Color(0xFF030303).withOpacity(0.06),
                            Color(0xFF565656).withOpacity(0.06),
                          ],
                          begin:
                              Alignment(gradient['beginX'], gradient['beginY']),
                          end: Alignment(gradient['endX'], gradient['endY'])),
                      borderRadius: BorderRadius.only(
                        topLeft: Radius.circular(10.0),
                        topRight: Radius.circular(10.0),
                      ),
                    ),
                    child: Container(
                      margin: EdgeInsets.only(
                        left: ScreenUtil().setWidth(10),
                        right: ScreenUtil().setWidth(17),
                      ),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: <Widget>[
                          Container(
                            margin: EdgeInsets.only(
                                top: ScreenUtil().setHeight(17)),
                            child: Row(
                              children: <Widget>[
                                Icon(
                                  MyIcons.heart,
                                  size: ScreenUtil().setSp(40),
                                  color: Colors.white,
                                ),
                                Container(
                                  margin: EdgeInsets.only(
                                    left: ScreenUtil().setWidth(5),
                                    top: ScreenUtil().setWidth(5),
                                  ),
                                  child: Text(
                                    item != null && item.praises != null
                                        ? item.praises.toString()
                                        : '',
                                    style: TextStyle(
                                      fontSize: ScreenUtil().setSp(20),
                                      color: Colors.white,
                                    ),
                                    textAlign: TextAlign.center,
                                  ),
                                )
                              ],
                            ),
                          ),
                          Container(
                            margin: EdgeInsets.only(
                                top: ScreenUtil().setHeight(19)),
                            child: ClipOval(
                              child: Container(
                                color: Colors.black.withOpacity(0.24),
                                padding:
                                    EdgeInsets.all(ScreenUtil().setWidth(10)),
                                child: Icon(
                                  MyIcons.lock,
                                  size: ScreenUtil().setSp(42),
                                  color: Colors.white,
                                ),
                              ),
                            ),
                          ),
                        ],
                      ),
                    ),
                  ),
                  // 底部阴影
                  Container(
                    height: ScreenUtil().setHeight(129),
                    decoration: BoxDecoration(
                      gradient: LinearGradient(
                          colors: [
                            Color(0xFF030303).withOpacity(0.06),
                            Color(0xFF565656).withOpacity(0.06),
                          ],
                          begin:
                              Alignment(gradient['beginX'], gradient['beginY']),
                          end: Alignment(gradient['endX'], gradient['endY'])),
                    ),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: <Widget>[
                        // 标签
                        Container(
                          margin:
                              EdgeInsets.only(top: ScreenUtil().setHeight(33)),
                          child: Row(
                            children: <Widget>[
                              // 性别标识
                              item.sex == 1
                                  ? Container(
                                      margin: EdgeInsets.only(
                                          left: ScreenUtil().setHeight(22)),
                                      child: ClipOval(
                                        child: Container(
                                          color: Color(0xff6CC1FD),
                                          padding: EdgeInsets.all(
                                              ScreenUtil().setWidth(3)),
                                          child: Icon(
                                            MyIcons.sex_boy,
                                            size: ScreenUtil().setSp(20),
                                            color: Colors.white,
                                          ),
                                        ),
                                      ),
                                    )
                                  : Container(
                                      margin: EdgeInsets.only(
                                          left: ScreenUtil().setHeight(22)),
                                      child: ClipOval(
                                        child: Container(
                                          color: MyColors.primary,
                                          padding: EdgeInsets.all(
                                              ScreenUtil().setWidth(3)),
                                          child: Icon(
                                            MyIcons.sex_girl,
                                            size: ScreenUtil().setSp(20),
                                            color: Colors.white,
                                          ),
                                        ),
                                      ),
                                    ),
                              // 认证标识
                              item.user.wxAuth != null && item.user.wxAuth != 0
                                  ? Container(
                                      margin: EdgeInsets.only(
                                          left: ScreenUtil().setHeight(9)),
                                      child: Image(
                                        image: NetworkImage(
                                            'https://oss.pocketuniversity.cn/media/2019-01-05/5c3029ad417ce.png'),
                                        width: ScreenUtil().setWidth(25),
                                      ),
                                    )
                                  : Container(),
                              SizedBox(
                                width: ScreenUtil().setWidth(5),
                              ),
                              // VIP标识
                              VipTag(item.user?.beVipAt ?? 0,
                                  item.user?.supvipEndat ?? 0, 0)
                            ],
                          ),
                        ),
                        // 描述
                        Container(
                          margin: EdgeInsets.only(
                              left: ScreenUtil().setWidth(21),
                              right: ScreenUtil().setWidth(21)),
                          child: Text(
                            item.updatedAt != null
                                ? DateUtil.howLongAgo(item.updatedAt) + '心动过你'
                                : '',
                            overflow: TextOverflow.ellipsis,
                            maxLines: 1,
                            textAlign: TextAlign.left,
                            style: TextStyle(
                              fontSize: ScreenUtil().setSp(31),
                              color: Colors.white,
                            ),
                          ),
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),
            // 进度条
            Container(
              height: ScreenUtil().setHeight(20),
              child: _ProgressBar(
                start: 0,
                end: 0,
              ),
            ),
          ],
        ),
      ),
    );
  }

  /// 无数据占位
  Widget _noDataWidget() {
    return Container(
      child: Center(
        child: Column(
          children: <Widget>[
            // 图片
            Container(
              margin: EdgeInsets.only(
                top: ScreenUtil().setHeight(199),
              ),
              child: Image(
                image: Utils.getAssetImgWithPath('nodata_myHeartBeat'),
                width: ScreenUtil().setWidth(451),
                height: ScreenUtil().setHeight(357),
                fit: BoxFit.cover,
              ),
            ),
            // 文字
            Container(
              margin: EdgeInsets.only(
                top: ScreenUtil().setHeight(29),
              ),
              child: Text(
                '你目前还没有心动的人～',
                style: TextStyle(
                    color: Color(0xFF999999), fontSize: ScreenUtil().setSp(30)),
              ),
            ),
          ],
        ),
      ),
    );
  }

  /// 创建交友卡片 占位
  Widget _noIDCardWidget() {
    return Container(
      child: Center(
        child: Column(
          children: <Widget>[
            // 图片
            Container(
              margin: EdgeInsets.only(
                top: ScreenUtil().setHeight(199),
              ),
              child: Image(
                image: Utils.getAssetImgWithPath('nodata_heartBeatMine_noID'),
                width: ScreenUtil().setWidth(451),
                height: ScreenUtil().setHeight(357),
                fit: BoxFit.cover,
              ),
            ),
            // 文字
            Container(
              margin: EdgeInsets.only(
                top: ScreenUtil().setHeight(29),
              ),
              child: Text(
                '创建交友卡片后，可解锁“心动我的”人',
                style: TextStyle(
                    color: Color(0xFF999999), fontSize: ScreenUtil().setSp(30)),
              ),
            ),
            // 按钮
            GestureDetector(
              onTap: () {
                Toast.show('创建交友卡片');
              },
              child: Container(
                margin: EdgeInsets.only(
                  top: ScreenUtil().setHeight(70),
                ),
                width: ScreenUtil().setWidth(520),
                height: ScreenUtil().setHeight(100),
                decoration: BoxDecoration(
                  color: Color(0xffFFF1F2),
                  // 设置渐变色
                  gradient: LinearGradient(
                    colors: [Color(0xFFFFF9FB1), Color(0xFFFF69A2)],
                    begin: Alignment(-1, -1),
                    end: Alignment(1.0, 0.56),
                  ),
                  borderRadius:
                      BorderRadius.circular(ScreenUtil().setHeight(50)),
                ),
                child: Center(
                  child: Text(
                    '创建交友卡片',
                    style: TextStyle(
                        color: Colors.white, fontSize: ScreenUtil().setSp(35)),
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

}

/// 进度条
class _ProgressBar extends StatelessWidget {

  /// 起始进度, <1
  final double start;

  /// 结束进度, <=1
  final double end;

  _ProgressBar({this.start, this.end});

  @override
  Widget build(BuildContext context) {
    return FutureBuilder(
        future: Future.delayed(const Duration(milliseconds: 300)),
        builder: (_, data) => AnimatedContainer(
              height: ScreenUtil().setHeight(6),
              width: MediaQuery.of(context).size.width * this.end,
              duration: Duration(milliseconds: 300),
              decoration: BoxDecoration(
                color: MyColors.primary,
                borderRadius: BorderRadius.only(
                  bottomLeft: Radius.circular(10.0),
                  bottomRight: Radius.circular(10.0),
                ),
              ),
            ));
  }
}

效果图

补充

1.瀑布流关键代码

Widget _buildContent() {
    return EasyRefresh(
      refreshHeader: ClassicsHeader(
        key: _headerKey,
        bgColor: Colors.white,
        textColor: Colors.pink,
        moreInfoColor: Colors.pink,
        refreshReadyText: '下拉刷新',
        refreshingText: '正在努力刷新',
        refreshedText: '加载完成',
        showMore: true,
        moreInfo: '正在加载中',
      ),
      refreshFooter: ClassicsFooter(
        key: _footerKey,
        bgColor: Colors.white,
        textColor: Colors.pink,
        moreInfoColor: Colors.pink,
        showMore: true,
        noMoreText: '暂时没有更多了',
        loadReadyText: '上拉加载',
        loadedText: '加载完毕',
        loadText: '上拉加载更多',
        loadingText: '正在努力加载更多',
        moreInfo: '正在加载中',
      ),
      child: new StaggeredGridView.countBuilder(
        itemCount:
            this.heartBeatList.length > 0 ? this.heartBeatList.length : 0,
        primary: false,
        crossAxisCount: 4,
        mainAxisSpacing: ScreenUtil().setWidth(30),
        crossAxisSpacing: ScreenUtil().setWidth(30),
        itemBuilder: (BuildContext context, int index) => new Container(
          height: ScreenUtil().setHeight(582),
            color: Colors.transparent,
            child: _buildImageItem(heartBeatList[index])),
        staggeredTileBuilder: (int index) =>
            new StaggeredTile.count(2, index.isEven ? 3 : 2.5),
        padding: EdgeInsets.only(
            left: ScreenUtil().setWidth(32), right: ScreenUtil().setWidth(32)),
      ),
      loadMore: () async {
        print('没有更多了.......');
        _addMoreData();
      },
      onRefresh: () async {
        print('下拉刷新~~~~');
        _refreshData();
      },
    );
  }

2.高斯模糊效果

import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

/// 矩形高斯模糊效果
class BlurRectWidget extends StatefulWidget {

  final Widget child;

  /// 模糊值
  final double sigmaX;
  final double sigmaY;

  /// 透明度
  final double opacity;

  /// 外边距
  final double blurMargin;


  const BlurRectWidget(
      {Key key,
      this.child,
      this.sigmaX,
      this.sigmaY,
      this.opacity,
      this.blurMargin})
      : super(key: key);

  @override
  _BlurRectWidgetState createState() => _BlurRectWidgetState();
}

class _BlurRectWidgetState extends State<BlurRectWidget> {
  @override
  Widget build(BuildContext context) {
    return Container(
      margin: widget.blurMargin != null
          ? widget.blurMargin
          : EdgeInsets.only(bottom: ScreenUtil().setHeight(20)),
      child: ClipRRect(
        borderRadius: BorderRadius.only(topLeft: Radius.circular(10),topRight: Radius.circular(10)),
        child: BackdropFilter(
          filter: ImageFilter.blur(
            sigmaX: this.widget.sigmaX != null ? this.widget.sigmaX : 20,
            sigmaY: this.widget.sigmaY != null ? this.widget.sigmaY : 20,
          ),
          child: Container(
            color: Colors.white10,
            child: this.widget.opacity != null
                ? Opacity(
                    opacity: widget.opacity,
                    child: this.widget.child,
                  )
                : this.widget.child,
          ),
        ),
      ),
    );
  }
}