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,    ),   ),  ); }}

關于Flutter中怎么實現一個下拉刷新上拉加載功能就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。