Flutter 实现下拉刷新上拉加载的示例代码

本文介绍了Flutter 实现下拉刷新上拉加载的示例代码，分享给大家，具体如下：

效果图 

使用方法

添加依赖

dependencies:
pull_to_refresh: ^1.5.7

导入包

import 'package:pull_to_refresh/pull_to_refresh.dart';

页面代码样例

class _MyHomePageState extends State<MyHomePage> {
List<String> items = ["1", "2", "3", "4", "5", "6", "7", "8"];
RefreshController _refreshController =
RefreshController(initialRefresh: false);

void _onRefresh() async {
 // monitor network fetch
 await Future.delayed(Duration(milliseconds: 1000));
 // if failed,use refreshFailed()
 _refreshController.refreshCompleted();
}

void _onLoading() async {
 // monitor network fetch
 await Future.delayed(Duration(milliseconds: 1000));
 // if failed,use loadFailed(),if no data return,use LoadNodata()
 items.add((items.length + 1).toString());
 if (mounted) setState(() {});
 _refreshController.loadComplete();
}

@override
Widget build(BuildContext context) {
 return Scaffold(
  body: SmartRefresher(
   enablePullDown: true,
   enablePullUp: true,
   header: WaterDropHeader(),
   footer: CustomFooter(
    builder: (BuildContext context, LoadStatus mode) {
     Widget body;
     if (mode == LoadStatus.idle) {
      body = Text("pull up load");
     } else if (mode == LoadStatus.loading) {
      body = CircularProgressIndicator();
     } else if (mode == LoadStatus.failed) {
      body = Text("Load Failed!Click retry!");
     } else if (mode == LoadStatus.canLoading) {
      body = Text("release to load more");
     } else {
      body = Text("No more Data");
     }
     return Container(
      height: 55.0,
      child: Center(child: body),
     );
    },
   ),
   controller: _refreshController,
   onRefresh: _onRefresh,
   onLoading: _onLoading,
   child: ListView.builder(
    itemBuilder: (c, i) => Card(child: Center(child: Text(items[i]))),
    itemExtent: 100.0,
    itemCount: items.length,
   ),
  ),
 );
}
}

完整源代码

https://gitee.com/cxyzy1/flutter_pulldown_refresh

来源：https://juejin.im/post/5de5becdf265da05de588214