flutter_easyrefresh

正如名字一样，EasyRefresh很容易就能在Flutter应用上实现下拉刷新以及上拉加载操作，它支持几乎所有的Flutter控件。它的功能与Android的SmartRefreshLayout很相似，同样也吸取了很多三方库的优点。EasyRefresh中集成了多种风格的Header和Footer，但是它并没有局限性，你可以很轻松的自定义。使用Flutter强大的动画，甚至随便一个简单的控件也可以完成。EasyRefresh的目标是为Flutter打造一个强大，稳定，成熟的下拉刷新框架。github地址：https://github.com/xuelongqy/flutter_easyrefresh

特点功能:

支持Andorid(光晕)，ios(越界回弹)效果
支持绝大多数Widget
支持自定义并且已经集成了很多炫酷的 Header 和 Footer
支持下拉刷新、上拉加载(可自动)
支持 Header 和 Footer 列表嵌入以及视图浮动两种形式
支持列表事件监听，制作任何样子的 Header 和 Footer，并且能够放在任何位置
支持首次刷新，并自定义视图
支持自定义列表空视图

这次就用easy_refresh插件，实现下拉刷新以及上拉加载功能。

1.在 pubspec.yaml 中添加依赖：

  flutter_easyrefresh: ^1.2.7

然后页面引入：

import 'package:flutter_easyrefresh/easy_refresh.dart';

2.在布局文件中添加 EasyreFresh

// 方式一
  EasyRefresh(
    child: ScrollView(),
    onRefresh: () async{
      ....
    },
    onLoad: () async {
      ....
    },
  )
  // 方式二
  EasyRefresh.custom(
    slivers: <Widget>[],
    onRefresh: () async{
      ....
    },
    onLoad: () async {
      ....
    },
  )
  // 方式三
  EasyRefresh.builder(
    builder: (context, physics, header, footer) {
      return CustomScrollView(
        physics: physics,
        slivers: <Widget>[
          ...
          header,
          ...
          footer,
        ],
      );
    }
    onRefresh: () async{
      ....
    },
    onLoad: () async {
      ....
    },
  )

3.触发刷新和加载动作

EasyRefreshController _controller = EasyRefreshController();
  ....
  EasyRefresh(
    controller: _controller,
    ....
  );
  ....
  _controller.callRefresh();
  _controller.callLoad();

4.控制加载和刷新完成

 EasyRefreshController _controller = EasyRefreshController();
  ....
  EasyRefresh(
    enableControlFinishRefresh: true,
    enableControlFinishLoad: true,
    ....
  );
  ....
  _controller.finishRefresh(success: true);
  _controller.callLoad(success： true, noMore: false);

制作上拉加载效果

使用这个插件，要求我们必须是一个ListView，所以我们要改造以前的代码，改造成ListView。

return EasyRefresh(
     child: ListView(
        children: <Widget>[
            ...
            ...
        ]
     ),
    loadMore: ()async { //更多回调方法
                  print('开始加载更多......');
                  var formData = {'page' : page};
                  await request('homePageBelowConten',formData: formData).then((val){
                    var data = json.decode(val.toString());
                    List<Map> newGoodsList = (data['data'] as List).cast();
                    setState(() {
                      hotGoodsList.addAll(newGoodsList);
                      page++;
                    });
                  });
     },
);

自定义上拉加载效果

refreshFooter: ClassicsFooter( //自定义refreshFooter
                  key: _footerkey,
                  bgColor: Colors.white,
                  textColor: Colors.red,
                  moreInfoColor: Colors.red,//加载时显示的文字颜色
                  showMore: true,
                  noMoreText: '',
                  moreInfo: '加载中', //加载时显示的文字
                  loadReadyText: '上拉加载...', //准备文字
     ),

Flutter 页面下拉刷新和上拉加载