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,
child: Form(
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(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
@@ -96,7 +110,8 @@ class _ConfirmScreenState extends State<ConfirmScreen>
border: Border(
bottom: BorderSide(
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(
bottom: BorderSide(
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),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: [
Text(
"Amount",
@@ -184,7 +201,8 @@ class _ConfirmScreenState extends State<ConfirmScreen>
),
const SizedBox(height: 10),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: [
Text(
"Our Charge",
@@ -205,7 +223,8 @@ class _ConfirmScreenState extends State<ConfirmScreen>
),
const SizedBox(height: 10),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: [
Text(
"Gateway Charge",
@@ -226,7 +245,8 @@ class _ConfirmScreenState extends State<ConfirmScreen>
),
const SizedBox(height: 10),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: [
Text(
"Tax",
@@ -247,7 +267,8 @@ class _ConfirmScreenState extends State<ConfirmScreen>
),
const SizedBox(height: 10),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: [
Text(
"Total Amount",
@@ -266,6 +287,9 @@ class _ConfirmScreenState extends State<ConfirmScreen>
),
],
),
],
),
),
const SizedBox(height: 20),
_buildPaymentProcessorButton(),
],

View File

@@ -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;
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(

View File

@@ -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,6 +105,8 @@ class _HistoryScreenState extends State<HistoryScreen>
],
),
if (controller.model.transactions.isNotEmpty)
Column(
children: [
ListView(
shrinkWrap: true,
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:logger/logger.dart';
import 'package:freezed_annotation/freezed_annotation.dart';
import 'package:qpay/http/http.dart';
import 'package:qpay/models/pageable_model.dart';
part 'home_controller.freezed.dart';
part 'home_controller.g.dart';
@@ -116,11 +115,14 @@ class HomeController extends ChangeNotifier {
notifyListeners();
try {
List<dynamic> response = await http.get(
'/transaction?userId=$userId&type=REQUEST',
Map<String, dynamic> response = await http.get(
'/transaction?sort=createdAt,desc&size=3&page=0&userId=$userId&type=REQUEST',
);
PageableModel pageableModel = PageableModel.fromJson(response);
model.transactions =
response.map((e) => e as Map<String, dynamic>).toList();
pageableModel.content.map((e) => e as Map<String, dynamic>).toList();
} catch (e) {
logger.e(e);
_showErrorSnackBar(

View File

@@ -221,18 +221,6 @@ class _HomeScreenState extends State<HomeScreen>
fontWeight: FontWeight.bold,
),
),
TextButton(
onPressed: () {
context.go('/history');
},
child: Text(
'View All',
style: TextStyle(
fontSize: 14,
fontWeight: FontWeight.bold,
),
),
),
],
),
const SizedBox(height: 5),
@@ -250,6 +238,8 @@ class _HomeScreenState extends State<HomeScreen>
],
),
if (homeController.model.transactions.isNotEmpty)
Column(
children: [
ListView(
shrinkWrap: true,
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) {
transactionController.model.formData = transactionController.model.formData
.copyWith(creditPhone: phone);
.copyWith(debitPhone: phone);
notifyListeners();
}

View File

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