效果如下:
flutter实现上拉加载下拉刷新
使用到的库是easy_refresh
安装请查看官网
接口用的是提供的接口https://reqres.in/
请求接口用到的库是dio
下面主要是介绍如何使用easy_refresh实现上拉加载数据,详细学习其它例子请查看easy_refresh
main.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'],
);
}
}