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

  @override
  Widget 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);
  @override
  void 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);
      }
  }

  @override
  Widget 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('没有更多了'),
      ),
    ),
        ),
        
      ),
    );
  }

  @override
  void 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'],
    );
  }
}