Add: Lazy loading and refresh on pull down

This commit is contained in:
2024-05-15 00:34:05 +03:00
parent baf85776e9
commit 464f51238f
5 changed files with 239 additions and 93 deletions

View File

@@ -3,6 +3,7 @@ import 'package:gymlink_module_web/components/app_bar.dart';
import 'package:gymlink_module_web/components/heading.dart';
import 'package:gymlink_module_web/components/history_item_card.dart';
import 'package:gymlink_module_web/tools/relative.dart';
import 'package:lazy_load_scrollview/lazy_load_scrollview.dart';
List<Map<String, String>> orders = [
{"image": "product.png", "price": "120", "id": "66", "date": "11.09.2001"},
@@ -32,11 +33,42 @@ List<Map<String, String>> orders = [
}
];
class HistoryPage extends StatelessWidget {
class HistoryPage extends StatefulWidget {
const HistoryPage({
super.key,
});
@override
State<HistoryPage> createState() => _HistoryPageState();
}
class _HistoryPageState extends State<HistoryPage> {
List<Map<String, String>> my_orders = [];
@override
void initState() {
super.initState();
my_orders = orders;
}
void _onLoad() async {
await Future.delayed(const Duration(milliseconds: 1000));
setState(() {
my_orders.add(
{
"image": "product.png",
"price": "120",
"id": "666666",
"date": "11.09.2001"
},
);
});
}
Future<void> _onRefresh() async {
await Future.delayed(const Duration(milliseconds: 1000));
}
@override
Widget build(BuildContext context) {
return Scaffold(
@@ -49,21 +81,33 @@ class HistoryPage extends StatelessWidget {
child: Row(
children: [
Expanded(
child: ListView.builder(
itemCount: orders.length,
itemBuilder: (context, index) {
final item = orders[index];
return HistoryItemCard(
id: item['id']!,
cost: item['price']!,
date: item['date']!,
image: Image(
image: AssetImage('assets/${item['image']!}'),
width: 50,
),
status: OrderStatus.completed,
);
},
child: LazyLoadScrollView(
onEndOfPage: _onLoad,
scrollOffset: 200,
child: RefreshIndicator(
edgeOffset: 55,
onRefresh: _onRefresh,
child: Stack(
children: [
ListView.builder(
itemCount: my_orders.length,
itemBuilder: (context, index) {
final item = my_orders[index];
return HistoryItemCard(
id: item['id']!,
cost: item['price']!,
date: item['date']!,
image: Image(
image: AssetImage('assets/${item['image']!}'),
width: 50,
),
status: OrderStatus.completed,
);
},
),
],
),
),
),
),
getSpacer(context: context)