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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。