Used the RefreshIndicator pull down refresh, it doesn’t work for domestic products, it’s pretty simple. But in China, product managers are poop

QQ group: 181398081

The following should be the appearance of the domestic pulldown refresh. Forgive me for being mainstream. No picture no truth, please go to my renderings

Say the first implementation, the whole state judgment in _innerhandleScrollNotification method Through the drop-down _DragOffset the total distance to determine the current state of the. The status is one more error than the official status

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
}
Copy the code

In fact, I do this is mainly to provide the state of the whole pulldown refresh, and then users can according to their needs, define different effects, so more flexible

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);Copy the code

PullBackOnRefresh Whether to rebound when in the refresh state. MaxDragOffset Maximum pulldown distance

PullToRefreshContainer is used to create the drop-down refresh effect components, it has a callback PullToRefreshScrollNotificationInfo is to tell the current state of the user, and provides the default refresh components (android below is a circle, Under ios, chrysanthemum turn)

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);
}
Copy the code

Sample code

I’ve written three effects, and I’m going to talk about Appbar, but everything else is the same. When you get the hang of it. You can create any effect you want.

Widget buildPulltoRefreshAppbar(PullToRefreshScrollNotificationInfo info) { print(info? .mode); print(info? .dragOffset); // print("------------"); var action = Padding( child: info? .refreshWiget ?? Icon (the 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),), collapse semode: collapsemode.pin, background: Asset ("assets/467141054.jpg", //fit: offset > 0.0? Boxfit.cover: boxfit.fill, fit: boxfit.cover,))); }Copy the code

The code is as simple as that, by telling you the state, changing the Appbar’s expandedHeight to achieve the effect of stretching the entire background, and changing the action in the upper right corner.

Finally put the Github pull_to_REFRESH_notification, if you want any other effects or anything you don’t understand, please let me know.

QQ group: 181398081