flutter实现上拉加载下拉刷新

效果如下:

flutter实现上拉加载下拉刷新

使用到的库是easy_refresh

安装请查看官网

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

请求接口用到的库是dio

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

main.dart全部代码如下

Dart 复制代码
import 'package:flutter/material.dart';
import 'package:easy_refresh/easy_refresh.dart';
import 'package:dio/dio.dart' as MyDio;

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'EasyRefresh',
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  int _page = 1;
  List<UserData> dataList = [];
  late EasyRefreshController _controller;

  @override
  void initState() {
    super.initState();
    _controller = EasyRefreshController(
      controlFinishRefresh: true,
      controlFinishLoad: true,
    );
    setState(() {
      dataList = [];
      _page = 1;
    });
    initListData();
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  Future<ApiResponse> _fetchListData(int page) async {
   
    MyDio.Dio dio = MyDio.Dio();
    MyDio.Response response =
        await dio.get('https://reqres.in/api/users', queryParameters: {
      'page': page,
    });
    ApiResponse data = ApiResponse.fromJson(response.data);
    return data;
  }

  void initListData() async {
    final resData = await _fetchListData(_page);

    if (resData.data.isNotEmpty) {
      setState(() {
        dataList = dataList..addAll(resData.data);
        _page = _page + 1;
      });
      _controller.finishRefresh();
      _controller.resetFooter();
      initListData();
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('EasyRefresh'),
      ),
      body: EasyRefresh(
        controller: _controller,
        header: const ClassicHeader(
            armedText: '下拉加载更多',
            readyText: '正在加载中...',
            showMessage: false,
            processedText: '加载完成',
            processingText: '刷新中...',
            textStyle: TextStyle(color: Color(0xFFFF2B2B))),
        footer: const ClassicFooter(
            noMoreText: '没有更多数据了',
            noMoreIcon: Icon(Icons.mood_rounded),
            showMessage: false,
            processingText: '正在加载中...',
            textStyle: TextStyle(color: Color(0xFF846FFD))),
        onRefresh: () async {
          setState(() {
            dataList = [];
            _page = 1;
          });
          initListData();
        },
        onLoad: () async {
          final resData = await _fetchListData(_page);

          setState(() {
            dataList = dataList..addAll(resData.data);
            _page = _page + 1;
          });

          _controller.finishLoad(resData.data.isEmpty
              ? IndicatorResult.noMore
              : IndicatorResult.success);
          // _fetchListData(_page);
        },
        child: ListView.builder(
          itemBuilder: (context, index) {
            return Card(
              child: Container(
                alignment: Alignment.center,
                height: 80,
                // ignore: unnecessary_string_interpolations
                child: Text('${dataList[index].firstName}'),
              ),
            );
          },
          itemCount: dataList.length,
        ),
      ),
    );
  }
}

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'],
    );
  }
}
相关推荐
孤鸿玉4 小时前
Fluter InteractiveViewer 与ScrollView滑动冲突问题解决
flutter
叽哥10 小时前
Flutter Riverpod上手指南
android·flutter·ios
BG1 天前
Flutter 简仿Excel表格组件介绍
flutter
zhangmeng1 天前
FlutterBoost在iOS26真机运行崩溃问题
flutter·app·swift
恋猫de小郭1 天前
对于普通程序员来说 AI 是什么?AI 究竟用的是什么?
前端·flutter·ai编程
卡尔特斯1 天前
Flutter A GlobalKey was used multipletimes inside one widget'schild list.The ...
flutter
w_y_fan1 天前
Flutter 滚动组件总结
前端·flutter
醉过才知酒浓1 天前
Flutter Getx 的页面传参
flutter
火柴就是我2 天前
flutter 之真手势冲突处理
android·flutter
Speed1232 天前
`mockito` 的核心“打桩”规则
flutter·dart