本文介紹了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

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。