MJRefresh on iOS, familiar to native developers, uses UIScrollView offsets to trigger load events. Here is a brief description of the flutter third party SmartRefresher implementing a similar loading process.

Step 1 Configure third-party dependencies.

Open the pubspec.yaml file under Flutter and configure third-party dependency libraries in the Dependencies option.

Tip: This file can also be configured with custom fonts, image local images.

dependencies: flutter: sdk: flutter # The following adds the Cupertino Icons font to your application. # Use with the CupertinoIcons class for iOS Cupertino_icons: ^1.0.2 // refresh the ICONS library pull_to_refresh: ^1.5.6Copy the code

Open the terminal and enter the execution command flutter packages get

If the message FLUTTER not found is displayed, the environment variables of the flutter are not configured for the current terminal environment.

To declare the environment variables, in the red line fill in the path to build the environment Flutter SDK

Export PATH=/(your SDK PATH)/flutter/bin:$PATHCopy the code

Ok, run the Flutter Packages get again to install the dependencies.

Cannot run with sound null safety, because the following dependencies… Error, ignored under androidStudio configuration.

--no-sound-null-safety
Copy the code

How to use it?

Importing third-party dependencies

import 'package:pull_to_refresh/pull_to_refresh.dart';
Copy the code

The SmartRefresher component is used in Builder

RefreshController _refreshController = new RefreshController();Copy the code
@override Widget build(BuildContext context) { return new Container( child: MediaQuery.removePadding( context: Context, removeTop: true, removeBottom: false, child: new Scrollbar(// refresh the ListView. Builder Child: New SmartRefresher(// allow pulldown: true, // allow pullup enablePullUp: true, // Default pulldown style header: WaterDropHeader(), // Custom pull up style footer: CustomFooter(Builder: (BuildContext Context, LoadStatus Mode) {Widget body; If (mode == loadstatus.idle) {body = Text(" loadstatus.idle "); } else if (mode == loadstatus.loading) {body = Text(" trying to load...") ); } else if (mode == loadstatus.failed) {body = Text(" failed to load, try again later "); } else {// no data body = Text(" no more data "); } Container(height: 55.0, child: Center(child: body),); },), child: listView. builder(itemBuilder: itemBuilder) _buildListItem, itemCount:_totalItems, physics: AlwaysScrollableScrollPhysics(), ), onRefresh: _onRefresh, onLoading: _onLoading ) ) ), ); }Copy the code

There are several options for the refresh status

There are several options for loading state

The complete code

Future<void> _onRefresh(){return future.delayed (Duration(seconds:); 2), () {/ / delay 2 s complete refresh setState (() {_refreshController. RefreshCompleted (); }); }); } Future<void> _onLoading(){return future.delayed (Duration(seconds:); 2),(){setState(() {_totalItems += 9; _refreshController.loadComplete(); }); }); }Copy the code

I won’t talk too much about the Builder drawing item method in the ListView, but the code is poor.

Article level is limited, big god do not spray, mainly hope to share common progress with you. If it is helpful to everyone, I am deeply gratified. [hold][hold][hold]