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

View File

@@ -125,237 +125,240 @@ class _ReceiptScreenState extends State<ReceiptScreen>
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
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.tertiary
.withOpacity(0.05),
Theme.of(context).colorScheme.tertiary
.withOpacity(0.15),
],
stops: [0.0, 0.5, 1.0],
),
border: Border.all(
color: Theme.of(
context,
).colorScheme.primary.withOpacity(0.3),
),
borderRadius: BorderRadius.circular(10),
boxShadow: [
BoxShadow(
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.tertiary
.withOpacity(0.05),
Theme.of(context).colorScheme.tertiary
.withOpacity(0.15),
],
stops: [0.0, 0.5, 1.0],
),
border: Border.all(
color: Theme.of(
context,
).colorScheme.primary.withOpacity(0.1),
blurRadius: 10,
spreadRadius: 1,
offset: Offset(0, 2),
).colorScheme.primary.withOpacity(0.3),
),
],
),
child: Column(
crossAxisAlignment:
CrossAxisAlignment.center,
children: [
Row(
mainAxisAlignment:
MainAxisAlignment.center,
crossAxisAlignment:
CrossAxisAlignment.center,
children: [
Icon(
transactionController
.model
.receiptData?["status"] ==
'SUCCESS'
? Icons.check_circle
: transactionController
.model
.receiptData?["status"] ==
'PENDING'
? Icons.pending
: Icons.cancel,
size: 18,
color:
transactionController
.model
.receiptData?["status"] ==
'SUCCESS'
? Colors.green
: transactionController
.model
.receiptData?["status"] ==
'PENDING'
? Colors.orange
: Colors.red,
),
SizedBox(width: 5),
Text(
receiptController
.model
.receiptData?["debitCurrency"] ??
"",
style: TextStyle(
fontSize: 26,
fontWeight: FontWeight.bold,
borderRadius: BorderRadius.circular(10),
boxShadow: [
BoxShadow(
color: Theme.of(context)
.colorScheme
.primary
.withOpacity(0.1),
blurRadius: 10,
spreadRadius: 1,
offset: Offset(0, 2),
),
],
),
child: Column(
crossAxisAlignment:
CrossAxisAlignment.center,
children: [
Row(
mainAxisAlignment:
MainAxisAlignment.center,
crossAxisAlignment:
CrossAxisAlignment.center,
children: [
Icon(
transactionController
.model
.receiptData?["status"] ==
'SUCCESS'
? Icons.check_circle
: transactionController
.model
.receiptData?["status"] ==
'PENDING'
? Icons.pending
: Icons.cancel,
size: 18,
color:
transactionController
.model
.receiptData?["status"] ==
'SUCCESS'
? Colors.green
: transactionController
.model
.receiptData?["status"] ==
'PENDING'
? Colors.orange
: Colors.red,
),
),
SizedBox(width: 5),
Text(
receiptController
.model
.receiptData?["totalAmount"]
.toStringAsFixed(2) ??
"",
style: TextStyle(fontSize: 26),
),
],
),
Column(
crossAxisAlignment:
CrossAxisAlignment.center,
children: [
SizedBox(height: 5),
// receiptController
// .model
// .receiptData?["providerImage"] !=
// null
// ? Image.asset(
// 'assets/${receiptController.model.receiptData?["providerImage"] ?? ''}',
// width: 50,
// )
// : SizedBox.shrink(),
Text(
receiptController
.model
.receiptData?["billName"] ??
"",
style: TextStyle(fontSize: 14),
),
],
),
SizedBox(height: 10),
Row(
mainAxisAlignment:
MainAxisAlignment.spaceEvenly,
children: [
Column(
children: [
Container(
width: 50,
height: 50,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.white,
border: Border.all(
color: Theme.of(context)
.colorScheme
.primary
.withOpacity(0.3),
width: 1,
SizedBox(width: 5),
Text(
receiptController
.model
.receiptData?["debitCurrency"] ??
"",
style: TextStyle(
fontSize: 26,
fontWeight: FontWeight.bold,
),
),
SizedBox(width: 5),
Text(
receiptController
.model
.receiptData?["totalAmount"]
.toStringAsFixed(2) ??
"",
style: TextStyle(fontSize: 26),
),
],
),
Column(
crossAxisAlignment:
CrossAxisAlignment.center,
children: [
SizedBox(height: 5),
// receiptController
// .model
// .receiptData?["providerImage"] !=
// null
// ? Image.asset(
// 'assets/${receiptController.model.receiptData?["providerImage"] ?? ''}',
// width: 50,
// )
// : SizedBox.shrink(),
Text(
receiptController
.model
.receiptData?["billName"] ??
"",
style: TextStyle(fontSize: 14),
),
],
),
SizedBox(height: 10),
Row(
mainAxisAlignment:
MainAxisAlignment.spaceEvenly,
children: [
Column(
children: [
Container(
width: 50,
height: 50,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.white,
border: Border.all(
color: Theme.of(context)
.colorScheme
.primary
.withOpacity(0.3),
width: 1,
),
),
),
child:
receiptController
.model
.isLoading
? Center(
child: SizedBox(
width: 24,
height: 24,
child: CircularProgressIndicator(
strokeWidth: 2.5,
valueColor:
AlwaysStoppedAnimation<
Color
>(
Theme.of(
context,
)
.colorScheme
.primary,
),
child:
receiptController
.model
.isLoading
? Center(
child: SizedBox(
width: 24,
height: 24,
child: CircularProgressIndicator(
strokeWidth:
2.5,
valueColor: AlwaysStoppedAnimation<
Color
>(
Theme.of(
context,
)
.colorScheme
.primary,
),
),
),
)
: IconButton(
onPressed: () {
receiptController
.repeatTransaction(
context,
);
},
icon: Icon(
Icons.repeat,
color:
Theme.of(
context,
)
.colorScheme
.primary,
size: 24,
),
),
)
: IconButton(
onPressed: () {
receiptController
.repeatTransaction(
context,
);
},
icon: Icon(
Icons.repeat,
color:
Theme.of(
context,
)
.colorScheme
.primary,
size: 24,
),
),
),
SizedBox(height: 8),
Text(
"Repeat",
style: TextStyle(
fontSize: 14,
fontWeight: FontWeight.w500,
),
),
],
),
Column(
children: [
Container(
width: 50,
height: 50,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.white,
border: Border.all(
color: Theme.of(context)
.colorScheme
.primary
.withOpacity(0.3),
width: 1,
SizedBox(height: 8),
Text(
"Repeat",
style: TextStyle(
fontSize: 14,
fontWeight: FontWeight.w500,
),
),
child: IconButton(
onPressed: () {
_captureImage();
},
icon: Icon(
Icons.share,
color:
Theme.of(
context,
).colorScheme.primary,
size: 24,
],
),
Column(
children: [
Container(
width: 50,
height: 50,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.white,
border: Border.all(
color: Theme.of(context)
.colorScheme
.primary
.withOpacity(0.3),
width: 1,
),
),
child: IconButton(
onPressed: () {
_captureImage();
},
icon: Icon(
Icons.share,
color:
Theme.of(
context,
).colorScheme.primary,
size: 24,
),
),
),
),
SizedBox(height: 8),
Text(
"Share",
style: TextStyle(
fontSize: 14,
fontWeight: FontWeight.w500,
SizedBox(height: 8),
Text(
"Share",
style: TextStyle(
fontSize: 14,
fontWeight: FontWeight.w500,
),
),
),
],
),
],
),
],
],
),
],
),
],
),
),
),
SizedBox(height: 20),
@@ -405,247 +408,325 @@ class _ReceiptScreenState extends State<ReceiptScreen>
SizedBox(
height:
MediaQuery.of(context).size.height *
0.4,
0.5,
child: TabBarView(
controller: _tabController,
children: <Widget>[
Column(
children: [
const SizedBox(height: 20),
if (receiptController
.model
.receiptData?["additionalData"] ==
null)
Padding(
padding: const EdgeInsets.all(10.0),
child: Column(
children: [
Skeletonizer(
enabled:
receiptController
.model
.isLoading,
child: Column(
child: Row(
mainAxisAlignment:
MainAxisAlignment
.spaceBetween,
children: [
SizedBox(height: 20),
Center(
child: Text(
"No details found",
Text(
"Status",
style: TextStyle(
fontSize: 16,
fontWeight:
FontWeight.bold,
),
),
Text(
transactionController
.model
.receiptData?["status"] ??
"",
style: TextStyle(
fontSize: 16,
),
),
],
),
),
if (receiptController
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"] ==
null)
Skeletonizer(
enabled:
receiptController
.model
.isLoading,
child: Column(
children: [
SizedBox(height: 20),
Center(
child: Text(
"No details found",
),
),
],
),
),
if (receiptController
.model
.receiptData?["additionalData"] !=
null)
...receiptController
.model
.receiptData?["additionalData"] !=
null)
...receiptController
.model
.receiptData?["additionalData"]
.map<Widget>((data) {
return Column(
children: [
Row(
mainAxisAlignment:
MainAxisAlignment
.spaceBetween,
children: [
Text(
data["name"] ??
"",
style: TextStyle(
fontSize: 16,
fontWeight:
FontWeight
.bold,
.receiptData?["additionalData"]
.map<Widget>((data) {
return Column(
children: [
Row(
mainAxisAlignment:
MainAxisAlignment
.spaceBetween,
children: [
Text(
data["name"] ??
"",
style: TextStyle(
fontSize:
16,
fontWeight:
FontWeight
.bold,
),
),
),
Text(
data["value"] ??
"",
style:
TextStyle(
fontSize:
16,
),
),
],
),
const SizedBox(
height: 10,
),
],
);
})
.toList(),
],
Text(
data["value"] ??
"",
style:
TextStyle(
fontSize:
16,
),
),
],
),
const SizedBox(
height: 10,
),
],
);
})
.toList(),
],
),
),
Column(
children: [
const SizedBox(height: 20),
Row(
mainAxisAlignment:
MainAxisAlignment
.spaceBetween,
children: [
Text(
"Status",
style: TextStyle(
fontSize: 16,
fontWeight:
FontWeight.bold,
Padding(
padding: const EdgeInsets.all(10.0),
child: Column(
children: [
Row(
mainAxisAlignment:
MainAxisAlignment
.spaceBetween,
children: [
Text(
"Amount",
style: TextStyle(
fontSize: 16,
fontWeight:
FontWeight.bold,
),
),
),
Text(
transactionController
.model
.receiptData?["status"] ??
"",
style: TextStyle(
fontSize: 16,
Text(
transactionController
.model
.receiptData?["amount"]
.toStringAsFixed(
2,
) ??
"0.00",
style: TextStyle(
fontSize: 16,
),
),
),
],
),
const SizedBox(height: 10),
Row(
mainAxisAlignment:
MainAxisAlignment
.spaceBetween,
children: [
Text(
"Amount",
style: TextStyle(
fontSize: 16,
fontWeight:
FontWeight.bold,
],
),
const SizedBox(height: 10),
Row(
mainAxisAlignment:
MainAxisAlignment
.spaceBetween,
children: [
Text(
"Our Charge",
style: TextStyle(
fontSize: 16,
fontWeight:
FontWeight.bold,
),
),
),
Text(
transactionController
.model
.receiptData?["amount"]
.toStringAsFixed(
2,
) ??
"0.00",
style: TextStyle(
fontSize: 16,
Text(
transactionController
.model
.receiptData?["charge"]
.toStringAsFixed(
2,
) ??
"0.00",
style: TextStyle(
fontSize: 16,
),
),
),
],
),
const SizedBox(height: 10),
Row(
mainAxisAlignment:
MainAxisAlignment
.spaceBetween,
children: [
Text(
"Our Charge",
style: TextStyle(
fontSize: 16,
fontWeight:
FontWeight.bold,
],
),
const SizedBox(height: 10),
Row(
mainAxisAlignment:
MainAxisAlignment
.spaceBetween,
children: [
Text(
"Gateway Charge",
style: TextStyle(
fontSize: 16,
fontWeight:
FontWeight.bold,
),
),
),
Text(
transactionController
.model
.receiptData?["charge"]
.toStringAsFixed(
2,
) ??
"0.00",
style: TextStyle(
fontSize: 16,
Text(
transactionController
.model
.receiptData?["gatewayCharge"]
.toStringAsFixed(
2,
) ??
"0.00",
style: TextStyle(
fontSize: 16,
),
),
),
],
),
const SizedBox(height: 10),
Row(
mainAxisAlignment:
MainAxisAlignment
.spaceBetween,
children: [
Text(
"Gateway Charge",
style: TextStyle(
fontSize: 16,
fontWeight:
FontWeight.bold,
],
),
const SizedBox(height: 10),
Row(
mainAxisAlignment:
MainAxisAlignment
.spaceBetween,
children: [
Text(
"Tax",
style: TextStyle(
fontSize: 16,
fontWeight:
FontWeight.bold,
),
),
),
Text(
transactionController
.model
.receiptData?["gatewayCharge"]
.toStringAsFixed(
2,
) ??
"0.00",
style: TextStyle(
fontSize: 16,
Text(
transactionController
.model
.receiptData?["tax"]
.toStringAsFixed(
2,
) ??
"0.00",
style: TextStyle(
fontSize: 16,
),
),
),
],
),
const SizedBox(height: 10),
Row(
mainAxisAlignment:
MainAxisAlignment
.spaceBetween,
children: [
Text(
"Tax",
style: TextStyle(
fontSize: 16,
fontWeight:
FontWeight.bold,
],
),
const SizedBox(height: 10),
Row(
mainAxisAlignment:
MainAxisAlignment
.spaceBetween,
children: [
Text(
"Total Amount",
style: TextStyle(
fontSize: 16,
fontWeight:
FontWeight.bold,
),
),
),
Text(
transactionController
.model
.receiptData?["tax"]
.toStringAsFixed(
2,
) ??
"0.00",
style: TextStyle(
fontSize: 16,
Text(
transactionController
.model
.receiptData?["totalAmount"]
.toStringAsFixed(
2,
) ??
"0.00",
style: TextStyle(
fontSize: 16,
),
),
),
],
),
const SizedBox(height: 10),
Row(
mainAxisAlignment:
MainAxisAlignment
.spaceBetween,
children: [
Text(
"Total Amount",
style: TextStyle(
fontSize: 16,
fontWeight:
FontWeight.bold,
),
),
Text(
transactionController
.model
.receiptData?["totalAmount"]
.toStringAsFixed(
2,
) ??
"0.00",
style: TextStyle(
fontSize: 16,
),
),
],
),
const SizedBox(height: 20),
],
],
),
const SizedBox(height: 20),
],
),
),
],
),