improving ui elements

This commit is contained in:
2025-07-24 23:53:06 +02:00
parent 44d21b3f14
commit daf4450f7a
13 changed files with 904 additions and 630 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.4 KiB

After

Width:  |  Height:  |  Size: 4.2 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.5 KiB

After

Width:  |  Height:  |  Size: 2.4 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 7.0 KiB

After

Width:  |  Height:  |  Size: 6.4 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 18 KiB

After

Width:  |  Height:  |  Size: 17 KiB

View File

@@ -0,0 +1,119 @@
class PageableModel {
final List<dynamic> content;
final Pageable pageable;
final int totalPages;
final int totalElements;
final bool last;
final int size;
final int number;
final Sort sort;
final int numberOfElements;
final bool first;
final bool empty;
PageableModel({
required this.content,
required this.pageable,
required this.totalPages,
required this.totalElements,
required this.last,
required this.size,
required this.number,
required this.sort,
required this.numberOfElements,
required this.first,
required this.empty,
});
factory PageableModel.fromJson(Map<String, dynamic> json) {
return PageableModel(
content: json['content'] ?? [],
pageable: Pageable.fromJson(json['pageable']),
totalPages: json['totalPages'],
totalElements: json['totalElements'],
last: json['last'],
size: json['size'],
number: json['number'],
sort: Sort.fromJson(json['sort']),
numberOfElements: json['numberOfElements'],
first: json['first'],
empty: json['empty'],
);
}
Map<String, dynamic> toJson() {
return {
'content': content,
'pageable': pageable.toJson(),
'totalPages': totalPages,
'totalElements': totalElements,
'last': last,
'size': size,
'number': number,
'sort': sort.toJson(),
'numberOfElements': numberOfElements,
'first': first,
'empty': empty,
};
}
}
class Pageable {
final int pageNumber;
final int pageSize;
final Sort sort;
final int offset;
final bool paged;
final bool unpaged;
Pageable({
required this.pageNumber,
required this.pageSize,
required this.sort,
required this.offset,
required this.paged,
required this.unpaged,
});
factory Pageable.fromJson(Map<String, dynamic> json) {
return Pageable(
pageNumber: json['pageNumber'],
pageSize: json['pageSize'],
sort: Sort.fromJson(json['sort']),
offset: json['offset'],
paged: json['paged'],
unpaged: json['unpaged'],
);
}
Map<String, dynamic> toJson() {
return {
'pageNumber': pageNumber,
'pageSize': pageSize,
'sort': sort.toJson(),
'offset': offset,
'paged': paged,
'unpaged': unpaged,
};
}
}
class Sort {
final bool sorted;
final bool empty;
final bool unsorted;
Sort({required this.sorted, required this.empty, required this.unsorted});
factory Sort.fromJson(Map<String, dynamic> json) {
return Sort(
sorted: json['sorted'],
empty: json['empty'],
unsorted: json['unsorted'],
);
}
Map<String, dynamic> toJson() {
return {'sorted': sorted, 'empty': empty, 'unsorted': unsorted};
}
}

View File

@@ -88,6 +88,20 @@ class _ConfirmScreenState extends State<ConfirmScreen>
position: _slideAnimation, position: _slideAnimation,
child: Form( child: Form(
key: _formKey, key: _formKey,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
padding: EdgeInsets.all(15),
decoration: BoxDecoration(
border: Border.all(
color: Theme.of(
context,
).colorScheme.primary.withOpacity(0.3),
),
borderRadius: BorderRadius.circular(10),
),
child: Column( child: Column(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
children: [ children: [
@@ -96,7 +110,8 @@ class _ConfirmScreenState extends State<ConfirmScreen>
border: Border( border: Border(
bottom: BorderSide( bottom: BorderSide(
width: 1.0, width: 1.0,
color: Theme.of(context).colorScheme.primary, color:
Theme.of(context).colorScheme.primary,
), ),
), ),
), ),
@@ -146,7 +161,8 @@ class _ConfirmScreenState extends State<ConfirmScreen>
border: Border( border: Border(
bottom: BorderSide( bottom: BorderSide(
width: 1.0, width: 1.0,
color: Theme.of(context).colorScheme.primary, color:
Theme.of(context).colorScheme.primary,
), ),
), ),
), ),
@@ -163,7 +179,8 @@ class _ConfirmScreenState extends State<ConfirmScreen>
), ),
const SizedBox(height: 20), const SizedBox(height: 20),
Row( Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween, mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: [ children: [
Text( Text(
"Amount", "Amount",
@@ -184,7 +201,8 @@ class _ConfirmScreenState extends State<ConfirmScreen>
), ),
const SizedBox(height: 10), const SizedBox(height: 10),
Row( Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween, mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: [ children: [
Text( Text(
"Our Charge", "Our Charge",
@@ -205,7 +223,8 @@ class _ConfirmScreenState extends State<ConfirmScreen>
), ),
const SizedBox(height: 10), const SizedBox(height: 10),
Row( Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween, mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: [ children: [
Text( Text(
"Gateway Charge", "Gateway Charge",
@@ -226,7 +245,8 @@ class _ConfirmScreenState extends State<ConfirmScreen>
), ),
const SizedBox(height: 10), const SizedBox(height: 10),
Row( Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween, mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: [ children: [
Text( Text(
"Tax", "Tax",
@@ -247,7 +267,8 @@ class _ConfirmScreenState extends State<ConfirmScreen>
), ),
const SizedBox(height: 10), const SizedBox(height: 10),
Row( Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween, mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: [ children: [
Text( Text(
"Total Amount", "Total Amount",
@@ -266,6 +287,9 @@ class _ConfirmScreenState extends State<ConfirmScreen>
), ),
], ],
), ),
],
),
),
const SizedBox(height: 20), const SizedBox(height: 20),
_buildPaymentProcessorButton(), _buildPaymentProcessorButton(),
], ],

View File

@@ -1,7 +1,10 @@
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:qpay/http/http.dart'; import 'package:qpay/http/http.dart';
import 'package:qpay/models/pageable_model.dart';
class HistoryModel { class HistoryModel {
PageableModel? pageableModel;
List<Map<String, dynamic>> transactions = []; List<Map<String, dynamic>> transactions = [];
bool isLoading = false; bool isLoading = false;
String? errorMessage; String? errorMessage;
@@ -26,16 +29,29 @@ class HistoryController extends ChangeNotifier {
Future<void> getTransactions(Map<String, String> params) async { Future<void> getTransactions(Map<String, String> params) async {
model.isLoading = true; model.isLoading = true;
if (params['page'] == '0') {
model.transactions = getFakeTransactions(); model.transactions = getFakeTransactions();
}
notifyListeners(); notifyListeners();
try { try {
params['type'] = 'REQUEST'; params['type'] = 'REQUEST';
List<dynamic> response = await http.get( Map<String, dynamic> response = await http.get(
'/transaction?${buildQueryParameters(params)}', '/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 = 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) { } catch (e) {
logger.e(e); logger.e(e);
_showErrorSnackBar( _showErrorSnackBar(

View File

@@ -24,6 +24,7 @@ class _HistoryScreenState extends State<HistoryScreen>
final TextEditingController _searchController = TextEditingController(); final TextEditingController _searchController = TextEditingController();
final Map<String, String> _queryParams = {}; final Map<String, String> _queryParams = {};
final List<Animation<Offset>> _alignListAnimations = []; final List<Animation<Offset>> _alignListAnimations = [];
final int _pageSize = 8;
@override @override
void initState() { void initState() {
@@ -57,7 +58,12 @@ class _HistoryScreenState extends State<HistoryScreen>
void setupData() async { void setupData() async {
prefs = await SharedPreferences.getInstance(); 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 @override
@@ -99,6 +105,8 @@ class _HistoryScreenState extends State<HistoryScreen>
], ],
), ),
if (controller.model.transactions.isNotEmpty) if (controller.model.transactions.isNotEmpty)
Column(
children: [
ListView( ListView(
shrinkWrap: true, shrinkWrap: true,
physics: const NeverScrollableScrollPhysics(), physics: const NeverScrollableScrollPhysics(),
@@ -108,6 +116,29 @@ class _HistoryScreenState extends State<HistoryScreen>
), ),
], ],
), ),
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',
});
},
),
],
),
], ],
), ),
); );

View File

@@ -1,8 +1,7 @@
import 'package:dio/dio.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:logger/logger.dart';
import 'package:freezed_annotation/freezed_annotation.dart'; import 'package:freezed_annotation/freezed_annotation.dart';
import 'package:qpay/http/http.dart'; import 'package:qpay/http/http.dart';
import 'package:qpay/models/pageable_model.dart';
part 'home_controller.freezed.dart'; part 'home_controller.freezed.dart';
part 'home_controller.g.dart'; part 'home_controller.g.dart';
@@ -116,11 +115,14 @@ class HomeController extends ChangeNotifier {
notifyListeners(); notifyListeners();
try { try {
List<dynamic> response = await http.get( Map<String, dynamic> response = await http.get(
'/transaction?userId=$userId&type=REQUEST', '/transaction?sort=createdAt,desc&size=3&page=0&userId=$userId&type=REQUEST',
); );
PageableModel pageableModel = PageableModel.fromJson(response);
model.transactions = model.transactions =
response.map((e) => e as Map<String, dynamic>).toList(); pageableModel.content.map((e) => e as Map<String, dynamic>).toList();
} catch (e) { } catch (e) {
logger.e(e); logger.e(e);
_showErrorSnackBar( _showErrorSnackBar(

View File

@@ -221,18 +221,6 @@ class _HomeScreenState extends State<HomeScreen>
fontWeight: FontWeight.bold, fontWeight: FontWeight.bold,
), ),
), ),
TextButton(
onPressed: () {
context.go('/history');
},
child: Text(
'View All',
style: TextStyle(
fontSize: 14,
fontWeight: FontWeight.bold,
),
),
),
], ],
), ),
const SizedBox(height: 5), const SizedBox(height: 5),
@@ -250,6 +238,8 @@ class _HomeScreenState extends State<HomeScreen>
], ],
), ),
if (homeController.model.transactions.isNotEmpty) if (homeController.model.transactions.isNotEmpty)
Column(
children: [
ListView( ListView(
shrinkWrap: true, shrinkWrap: true,
physics: const NeverScrollableScrollPhysics(), physics: const NeverScrollableScrollPhysics(),
@@ -259,6 +249,17 @@ class _HomeScreenState extends State<HomeScreen>
), ),
], ],
), ),
SizedBox(height: 10),
if (homeController.model.transactions.length >
2)
OutlinedButton(
child: Text('View All'),
onPressed: () {
context.go('/history');
},
),
],
),
], ],
); );
}, },

View File

@@ -189,7 +189,7 @@ class PayController extends ChangeNotifier {
void updatePhone(String phone) { void updatePhone(String phone) {
transactionController.model.formData = transactionController.model.formData transactionController.model.formData = transactionController.model.formData
.copyWith(creditPhone: phone); .copyWith(debitPhone: phone);
notifyListeners(); notifyListeners();
} }

View File

@@ -125,16 +125,17 @@ class _ReceiptScreenState extends State<ReceiptScreen>
child: Column( child: Column(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
children: [ children: [
Container( Skeletonizer(
enabled: receiptController.model.isLoading,
child: Container(
padding: EdgeInsets.all(20), padding: EdgeInsets.all(20),
decoration: BoxDecoration( decoration: BoxDecoration(
gradient: LinearGradient( gradient: LinearGradient(
begin: Alignment.topLeft, begin: Alignment.topLeft,
end: Alignment.bottomRight, end: Alignment.bottomRight,
colors: [ colors: [
Theme.of( Theme.of(context).colorScheme.primary
context, .withOpacity(0.1),
).colorScheme.primary.withOpacity(0.1),
Theme.of(context).colorScheme.tertiary Theme.of(context).colorScheme.tertiary
.withOpacity(0.05), .withOpacity(0.05),
Theme.of(context).colorScheme.tertiary Theme.of(context).colorScheme.tertiary
@@ -150,9 +151,10 @@ class _ReceiptScreenState extends State<ReceiptScreen>
borderRadius: BorderRadius.circular(10), borderRadius: BorderRadius.circular(10),
boxShadow: [ boxShadow: [
BoxShadow( BoxShadow(
color: Theme.of( color: Theme.of(context)
context, .colorScheme
).colorScheme.primary.withOpacity(0.1), .primary
.withOpacity(0.1),
blurRadius: 10, blurRadius: 10,
spreadRadius: 1, spreadRadius: 1,
offset: Offset(0, 2), offset: Offset(0, 2),
@@ -270,9 +272,9 @@ class _ReceiptScreenState extends State<ReceiptScreen>
width: 24, width: 24,
height: 24, height: 24,
child: CircularProgressIndicator( child: CircularProgressIndicator(
strokeWidth: 2.5, strokeWidth:
valueColor: 2.5,
AlwaysStoppedAnimation< valueColor: AlwaysStoppedAnimation<
Color Color
>( >(
Theme.of( Theme.of(
@@ -358,6 +360,7 @@ class _ReceiptScreenState extends State<ReceiptScreen>
], ],
), ),
), ),
),
SizedBox(height: 20), SizedBox(height: 20),
Column( Column(
children: [ children: [
@@ -405,13 +408,112 @@ class _ReceiptScreenState extends State<ReceiptScreen>
SizedBox( SizedBox(
height: height:
MediaQuery.of(context).size.height * MediaQuery.of(context).size.height *
0.4, 0.5,
child: TabBarView( child: TabBarView(
controller: _tabController, controller: _tabController,
children: <Widget>[ children: <Widget>[
Column( Padding(
padding: const EdgeInsets.all(10.0),
child: Column(
children: [ children: [
const SizedBox(height: 20), Skeletonizer(
enabled:
receiptController
.model
.isLoading,
child: Row(
mainAxisAlignment:
MainAxisAlignment
.spaceBetween,
children: [
Text(
"Status",
style: TextStyle(
fontSize: 16,
fontWeight:
FontWeight.bold,
),
),
Text(
transactionController
.model
.receiptData?["status"] ??
"",
style: TextStyle(
fontSize: 16,
),
),
],
),
),
const SizedBox(height: 10),
Skeletonizer(
enabled:
receiptController
.model
.isLoading,
child: Row(
mainAxisAlignment:
MainAxisAlignment
.spaceBetween,
children: [
Text(
"From",
style: TextStyle(
fontSize: 16,
fontWeight:
FontWeight.bold,
),
),
Text(
receiptController
.model
.receiptData?["debitPhone"] ??
"",
style: TextStyle(
fontSize: 16,
),
),
],
),
),
const SizedBox(height: 10),
Skeletonizer(
enabled:
receiptController
.model
.isLoading,
child: Row(
mainAxisAlignment:
MainAxisAlignment
.spaceBetween,
children: [
Text(
"To",
style: TextStyle(
fontSize: 16,
fontWeight:
FontWeight.bold,
),
),
Text(
receiptController
.model
.receiptData?["creditAccount"] ??
"",
style: TextStyle(
fontSize: 16,
),
),
],
),
),
const SizedBox(height: 10),
Divider(
color: Colors.grey[300],
thickness: 1,
),
const SizedBox(height: 10),
if (receiptController if (receiptController
.model .model
.receiptData?["additionalData"] == .receiptData?["additionalData"] ==
@@ -451,7 +553,8 @@ class _ReceiptScreenState extends State<ReceiptScreen>
data["name"] ?? data["name"] ??
"", "",
style: TextStyle( style: TextStyle(
fontSize: 16, fontSize:
16,
fontWeight: fontWeight:
FontWeight FontWeight
.bold, .bold,
@@ -477,34 +580,11 @@ class _ReceiptScreenState extends State<ReceiptScreen>
.toList(), .toList(),
], ],
), ),
Column( ),
Padding(
padding: const EdgeInsets.all(10.0),
child: Column(
children: [ children: [
const SizedBox(height: 20),
Row(
mainAxisAlignment:
MainAxisAlignment
.spaceBetween,
children: [
Text(
"Status",
style: TextStyle(
fontSize: 16,
fontWeight:
FontWeight.bold,
),
),
Text(
transactionController
.model
.receiptData?["status"] ??
"",
style: TextStyle(
fontSize: 16,
),
),
],
),
const SizedBox(height: 10),
Row( Row(
mainAxisAlignment: mainAxisAlignment:
MainAxisAlignment MainAxisAlignment
@@ -647,6 +727,7 @@ class _ReceiptScreenState extends State<ReceiptScreen>
const SizedBox(height: 20), const SizedBox(height: 20),
], ],
), ),
),
], ],
), ),
), ),