Flutter实现上拉加载，下拉刷新功能实现

这里我使用的是插件是： pull_to_refresh 此插件需要包裹滚动组件

下载链接pub-web.flutter-io.cn/packages/pu…

使用步骤

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

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
//1、定义刷新控制器
  final RefreshController _refreshController  =   RefreshController();
  final ScrollController _scrollController =    ScrollController();
    bool _isLoadding = true;
    List list = []
  @override
  void initState() {
 //2、初始化刷新控制器实例
    super.initState();
    GetHomeInfo();
       // 检测列表是否触底
        _scrollController.addListener(() {
      if (_scrollController.position.pixels >
              _scrollController.position.maxScrollExtent - 20 &&
          _isLoadding) {
        pullDownFresh();
      }
    });
  }
  @override
  void dispose() {
    // TODO: implement dispose
    super.dispose();
    _refreshController.dispose();
    _scrollController.dispose();
  }
  void GetHomeInfo() async {
    try {
      Result res = 请求函数接口;
      //3、请求成功，调用刷新成功
      _refreshController.refreshCompleted();
    } catch (e) {
     //4、请求失败，调用刷新失败
      _refreshController.refreshFailed();
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Color(0xfff7f7f8),
        appBar: AppBar(
          title: const Text(
            "首页",
            style: TextStyle(color: Color(0xffffffff)),
          ),
          centerTitle: true,
          backgroundColor: Colors.blueAccent,
        ),
        body: Padding(
            padding: EdgeInsets.only(left: 10, right: 10, top: 10),
            child: SmartRefresher(
              controller: _refreshController, //控制器
              enablePullDown: true,    //是否刷新
              isPullDown: true,
              loadDown: pullDownFresh, //上拉加载
              onRefresh: GetHomeInfo, //刷新调用接口
              child: listView(
              controller:_scrollController,
              children:[
              //滚动列表数据
              ]
              ),
            )));
  }
  //上拉加载
    pullDownFresh() {
      page++;
    _getArtistWorkList();
  }
  //获取列表
  _getArtistWorkList(){
  //节流
    _isLoadding = false;
  //请求成功
  if(res.isEmpty){
   _refreshController.loadNoData()
   //为空的情况就不再加载列表
      _isLoadding = false;
  }else{
  list.addAll(res)
    _refreshControll.loadComplete();
     _isLoadding = true;
  }
}

自定义组件使用 常用的方式

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:pull_to_refresh/pull_to_refresh.dart';

typedef VoidCallback = void Function();

class PullDownRefrsh extends StatelessWidget {
  final RefreshController? controll;
  final VoidCallback? GetHomeInfo;
  final VoidCallback? loadDown;
  final Widget? child;
  const PullDownRefrsh(
      {this.controll, this.GetHomeInfo, this.loadDown, this.child, super.key});

  @override
  Widget build(BuildContext context) {
    return SmartRefresher(
        controller: controll!,
        enablePullDown: true,
        enablePullUp: true,
        onRefresh: GetHomeInfo,
        onLoading: loadDown,
        header:
            CustomHeader(builder: (BuildContext context, RefreshStatus? mode) {
          String freshText = '下拉刷新';
          switch (mode) {
            case RefreshStatus.idle:
              freshText = '下拉刷新';
              break;
            case RefreshStatus.canRefresh:
              freshText = '松开刷新';
              break;
            case RefreshStatus.refreshing:
              freshText = '正在刷新';
              break;
            case RefreshStatus.completed:
              freshText = '刷新完成';
              break;
            case RefreshStatus.failed:
              freshText = "刷新失败";
              break;
            default:
              freshText = '在刷新看看吧';
              break;
          }
          return Container(
            alignment: Alignment.center,
            child: Text(freshText),
          );
        }),
        footer: CustomFooter(
          builder: (BuildContext context, LoadStatus? mode) {
            Widget body;
            if (mode == LoadStatus.idle) {
              body = const Text("继续加载看看吧！");
            } else if (mode == LoadStatus.loading) {
              body = const CupertinoActivityIndicator();
            } else if (mode == LoadStatus.failed) {
              body = const Text("加载失败");
            } else if (mode == LoadStatus.canLoading) {
              body = const Text("松手加载更多");
            } else {
              body = const Text("我也是有底线的_____");
            }
            return SizedBox(
              height: 55.0,
              child: Center(child: body),
            );
          },
        ),
        child: child);
  }
}