flutter实现上拉到底部加载更多数据

实现上拉加载数据，效果如下：

flutter滚动列表加载数据

使用的库主要是infinite_scroll_pagination ,

安装请查看官网

接口用的是https://reqres.in/提供的接口

请求接口用到的库是dio

下面主要是介绍如何使用infinite_scroll_pagination实现上拉加载数据，详细学习其它例子请查看infinite_scroll_pagination

main.dart全部代码如下

// ignore_for_file: non_constant_identifier_names
import 'package:flutter/material.dart';
import 'package:infinite_scroll_pagination/infinite_scroll_pagination.dart';import 'package:dio/dio.dart' as MyDio;void main() => runApp(const MyApp());class MyApp extends StatelessWidget {const MyApp({super.key});@overrideWidget build(BuildContext context) {return MaterialApp(title: 'Infinite Scroll Demo',theme: ThemeData(primarySwatch: Colors.blue,),home: const InfiniteScrollList(),);}
}class InfiniteScrollList extends StatefulWidget {const InfiniteScrollList({super.key});@override// ignore: library_private_types_in_public_api_InfiniteScrollListState createState() => _InfiniteScrollListState();
}class _InfiniteScrollListState extends State<InfiniteScrollList> {final PagingController<int, UserData> _listController =PagingController(firstPageKey: 1);@overridevoid initState() {super.initState();_listController.addPageRequestListener((page) {_fetchListData(page);});}Future<void> _fetchListData(int page) async {MyDio.Dio dio = MyDio.Dio();MyDio.Response response = await dio.get('https://reqres.in/api/users',queryParameters: {'page': page,// 'stage_id': 4,// 'category_id': 3,});ApiResponse data = ApiResponse.fromJson(response.data);if (data.data.isEmpty) {_listController.appendLastPage(data.data);} else {final nextPageKey = page + 1;_listController.appendPage(data.data, nextPageKey);}}@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: const Text('Infinite Scroll Demo')),body: PagedListView<int, UserData>(pagingController: _listController,builderDelegate: PagedChildBuilderDelegate<UserData>(itemBuilder: (context, item, index) =>ListTile(title: SizedBox(child: Text(item.firstName))),noMoreItemsIndicatorBuilder: (context) => const Center(child: Padding(padding: EdgeInsets.all(20.0),child: Text('没有更多了'),),),),),);}@overridevoid dispose() {_listController.dispose();super.dispose();}
}class ApiResponse {final int page;final int perPage;final int total;final int totalPages;final List<UserData> data;final Support support;ApiResponse({required this.page, required this.perPage, required this.total, required this.totalPages, required this.data, required this.support});factory ApiResponse.fromJson(Map<String, dynamic> json) {var list = json['data'] as List;List<UserData> dataList = list.map((i) => UserData.fromJson(i)).toList();return ApiResponse(page: json['page'],perPage: json['per_page'],total: json['total'],totalPages: json['total_pages'],data: dataList,support: Support.fromJson(json['support']),);}
}class UserData {final int id;final String email;final String firstName;final String lastName;final String avatar;UserData({required this.id, required this.email, required this.firstName, required this.lastName, required this.avatar});factory UserData.fromJson(Map<String, dynamic> json) {return UserData(id: json['id'],email: json['email'],firstName: json['first_name'],lastName: json['last_name'],avatar: json['avatar'],);}
}class Support {final String url;final String text;Support({required this.url, required this.text});factory Support.fromJson(Map<String, dynamic> json) {return Support(url: json['url'],text: json['text'],);}
}