Flutter 下拉刷新花式玩法

用过RefreshIndicator官方的下拉刷新，只能说效果不适合国内的产品，其实仍是很简洁的。。可是身在天朝，产品经理就是爸爸

FlutterCandies QQ群:181398081

下面这些应该是国内下拉刷新的样子吧。。原谅个人随主流。。 没图没真相，请上我作好的效果图

先说下实现吧,整个状态判断都在_innerhandleScrollNotification方法里面 经过对下拉总的距离_DragOffset来判断当前的状态.状态比官方的多一个error

enum RefreshIndicatorMode {
  drag, // Pointer is down.
  armed, // Dragged far enough that an up event will run the onRefresh callback.
  snap, // Animating to the indicator's final "displacement". refresh, // Running the refresh callback. done, // Animating the indicator's fade-out after refreshing.
  canceled, // Animating the indicator's fade-out after not arming. error, //refresh failed } 复制代码

其实我这个作的主要是提供整个下拉刷新的状态，而后用户能够根据本身的需求，定义出不同的效果，这样比较灵活

const PullToRefreshNotification({
    Key key,
    @required this.child,
    @required this.onRefresh,
    this.color,
    this.pullBackOnRefresh: false,
    this.maxDragOffset,
    this.notificationPredicate = defaultNotificationPredicate,
  })  : assert(child != null),
        assert(onRefresh != null),
        assert(notificationPredicate != null),
        super(key: key);
复制代码

pullBackOnRefresh 当在refresh状态的时候是否要回弹 maxDragOffset 下拉的最大距离

PullToRefreshContainer 是用来建立下拉刷新效果的组件，它有一个回调 PullToRefreshScrollNotificationInfo 是告诉使用者当前的状态，而且提供了默认的refresh组件（安卓下面是圈圈，ios下面是菊花转）

typedef PullToRefreshContainerBuilder = Widget Function(
    PullToRefreshScrollNotificationInfo info);
    
class PullToRefreshScrollNotificationInfo {
  final RefreshIndicatorMode mode;
  final double dragOffset;
  final Widget refreshWiget;
  final PullToRefreshNotificationState pullToRefreshNotificationState;
  PullToRefreshScrollNotificationInfo(this.mode, this.dragOffset,
      this.refreshWiget, this.pullToRefreshNotificationState);
}
复制代码

Sample code

我一共写了3个效果，下面我讲下Appbar这种，其余原理都是同样的。当你掌握技巧以后。你能构建出任意你想要的效果。

Widget buildPulltoRefreshAppbar(PullToRefreshScrollNotificationInfo info) {
        print(info?.mode);
        print(info?.dragOffset);
    //    print("------------");
        var action = Padding(
          child: info?.refreshWiget ?? Icon(Icons.more_horiz),
          padding: EdgeInsets.all(15.0),
        );
        var offset = info?.dragOffset ?? 0.0;
    //    var mode = info?.mode;
    //    if (mode != null && mode == RefreshIndicatorMode.done) {
    //      //showToast("Refresh done");
    //    }
        return SliverAppBar(
            pinned: true,
            title: Text("PullToRefreshAppbar"),
            centerTitle: true,
            expandedHeight: 200.0 + offset,
            actions: <Widget>[action],
            flexibleSpace: FlexibleSpaceBar(
                //centerTitle: true,
                title: Text(
                  info?.mode?.toString() ?? "",
                  style: TextStyle(fontSize: 10.0),
                ),
                collapseMode: CollapseMode.pin,
                background: Image.asset(
                  "assets/467141054.jpg",
                  //fit: offset > 0.0 ? BoxFit.cover : BoxFit.fill,
                  fit: BoxFit.cover,
                )));
      }
复制代码

代码就是这么简单，经过告诉你的状态，将appbar的expandedHeight进行改变，达到整个background 拉伸的效果，而且改变右上角的action。

最后放上 Github pull_to_refresh_notification，若是你想要其余效果或者有什么不明白的地方，都请告诉我。