improving ui elements

lib/screens/history/history_controller.dart

@@ -1,7 +1,10 @@
 import 'package:flutter/material.dart';
 import 'package:qpay/http/http.dart';
+import 'package:qpay/models/pageable_model.dart';
 
 class HistoryModel {
+  PageableModel? pageableModel;
+
   List<Map<String, dynamic>> transactions = [];
   bool isLoading = false;
   String? errorMessage;
@@ -26,16 +29,29 @@ class HistoryController extends ChangeNotifier {
 
   Future<void> getTransactions(Map<String, String> params) async {
     model.isLoading = true;
-    model.transactions = getFakeTransactions();
+    if (params['page'] == '0') {
+      model.transactions = getFakeTransactions();
+    }
     notifyListeners();
 
     try {
       params['type'] = 'REQUEST';
-      List<dynamic> response = await http.get(
+      Map<String, dynamic> response = await http.get(
         '/transaction?${buildQueryParameters(params)}',
       );
+
+      if (params['page'] == '0') {
+        model.transactions = [];
+      }
+
+      model.pageableModel = PageableModel.fromJson(response);
+
+      // pagination adds to current list instead of replacing it
       model.transactions =
-          response.map((e) => e as Map<String, dynamic>).toList();
+          model.transactions +
+          model.pageableModel!.content
+              .map((e) => e as Map<String, dynamic>)
+              .toList();
     } catch (e) {
       logger.e(e);
       _showErrorSnackBar(

lib/screens/history/history_screen.dart

@@ -24,6 +24,7 @@ class _HistoryScreenState extends State<HistoryScreen>
   final TextEditingController _searchController = TextEditingController();
   final Map<String, String> _queryParams = {};
   final List<Animation<Offset>> _alignListAnimations = [];
+  final int _pageSize = 8;
 
   @override
   void initState() {
@@ -57,7 +58,12 @@ class _HistoryScreenState extends State<HistoryScreen>
   void setupData() async {
     prefs = await SharedPreferences.getInstance();
 
-    await controller.getTransactions({'userId': prefs.getString("userId")!});
+    await controller.getTransactions({
+      'userId': prefs.getString("userId")!,
+      'page': '0',
+      'size': _pageSize.toString(),
+      'sort': 'createdAt,desc',
+    });
   }
 
   @override
@@ -99,13 +105,38 @@ class _HistoryScreenState extends State<HistoryScreen>
                           ],
                         ),
                       if (controller.model.transactions.isNotEmpty)
-                        ListView(
-                          shrinkWrap: true,
-                          physics: const NeverScrollableScrollPhysics(),
+                        Column(
                           children: [
-                            ...controller.model.transactions.map(
-                              (e) => _buildTransactionItem(e, context),
+                            ListView(
+                              shrinkWrap: true,
+                              physics: const NeverScrollableScrollPhysics(),
+                              children: [
+                                ...controller.model.transactions.map(
+                                  (e) => _buildTransactionItem(e, context),
+                                ),
+                              ],
                             ),
+                            SizedBox(height: 10),
+                            if (controller.model.pageableModel != null &&
+                                controller.model.pageableModel!.number <
+                                    controller.model.pageableModel!.totalPages)
+                              OutlinedButton(
+                                child: Text('Load more'),
+                                onPressed: () {
+                                  controller.getTransactions({
+                                    'userId': prefs.getString("userId")!,
+                                    'page':
+                                        (controller
+                                                    .model
+                                                    .pageableModel!
+                                                    .number +
+                                                1)
+                                            .toString(),
+                                    'size': _pageSize.toString(),
+                                    'sort': 'createdAt,desc',
+                                  });
+                                },
+                              ),
                           ],
                         ),
                     ],