feat: refactor financial wallet UI components and add offline map service support

This commit is contained in:
Hamza-Ayed
2026-04-21 00:35:30 +03:00
parent 4293d20561
commit b92db3bb39
99 changed files with 22888 additions and 27387 deletions

View File

@@ -0,0 +1,124 @@
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import '../../../../constant/finance_design_system.dart';
class BalanceCard extends StatelessWidget {
final String balance;
final bool isNegative;
final String lastUpdated;
const BalanceCard({
super.key,
required this.balance,
required this.isNegative,
this.lastUpdated = "Just now",
});
@override
Widget build(BuildContext context) {
return Container(
width: double.infinity,
padding: const EdgeInsets.all(24),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(FinanceDesignSystem.cardRadius),
gradient: isNegative
? FinanceDesignSystem.dangerGradient
: FinanceDesignSystem.balanceGradient,
boxShadow: [
BoxShadow(
color: (isNegative
? FinanceDesignSystem.dangerRed
: FinanceDesignSystem.primaryDark)
.withOpacity(0.3),
blurRadius: 15,
offset: const Offset(0, 8),
),
],
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"Available Balance".tr,
style: TextStyle(
color: Colors.white.withOpacity(0.8),
fontSize: 14,
fontWeight: FontWeight.w500,
),
),
Text(
"الرصيد المتاح".tr,
style: TextStyle(
color: Colors.white.withOpacity(0.5),
fontSize: 12,
),
),
],
),
Container(
padding: const EdgeInsets.all(8),
decoration: BoxDecoration(
color: Colors.white.withOpacity(0.2),
shape: BoxShape.circle,
),
child: Icon(
isNegative
? Icons.warning_rounded
: Icons.account_balance_wallet_rounded,
color: Colors.white,
size: 20,
),
),
],
),
const SizedBox(height: 20),
Row(
crossAxisAlignment: CrossAxisAlignment.baseline,
textBaseline: TextBaseline.alphabetic,
children: [
Text(
balance,
style: FinanceDesignSystem.balanceStyle,
),
const SizedBox(width: 8),
Text(
"SYP".tr,
style: TextStyle(
color: Colors.white.withOpacity(0.7),
fontSize: 18,
fontWeight: FontWeight.w500,
),
),
],
),
const SizedBox(height: 16),
Divider(color: Colors.white.withOpacity(0.15)),
const SizedBox(height: 8),
Row(
children: [
Icon(
Icons.history_rounded,
color: Colors.white.withOpacity(0.5),
size: 14,
),
const SizedBox(width: 6),
Text(
"${'Last updated:'.tr} $lastUpdated",
style: TextStyle(
color: Colors.white.withOpacity(0.5),
fontSize: 12,
),
),
],
),
],
),
);
}
}

View File

@@ -0,0 +1,142 @@
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import '../../../../constant/finance_design_system.dart';
class FinancialSummaryCard extends StatelessWidget {
final String title;
final String? subtitle;
final List<SummaryItem> items;
const FinancialSummaryCard({
super.key,
required this.title,
this.subtitle,
required this.items,
});
@override
Widget build(BuildContext context) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(title, style: FinanceDesignSystem.headingStyle),
if (subtitle != null)
Text(subtitle!, style: FinanceDesignSystem.subHeadingStyle),
],
),
],
),
const SizedBox(height: 16),
Container(
padding: const EdgeInsets.all(16),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(FinanceDesignSystem.cardRadius),
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.03),
blurRadius: 10,
offset: const Offset(0, 4),
),
],
),
child: ListView.separated(
shrinkWrap: true,
physics: const NeverScrollableScrollPhysics(),
itemCount: items.length,
separatorBuilder: (context, index) =>
Divider(color: Colors.grey.withOpacity(0.1), height: 24),
itemBuilder: (context, index) {
final item = items[index];
return Row(
children: [
Container(
padding: const EdgeInsets.all(10),
decoration: BoxDecoration(
color: item.color.withOpacity(0.1),
borderRadius: BorderRadius.circular(10),
),
child: Icon(item.icon, color: item.color, size: 20),
),
const SizedBox(width: 16),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
item.label,
style: const TextStyle(
fontSize: 14,
fontWeight: FontWeight.w500,
color: FinanceDesignSystem.primaryDark,
),
),
if (item.subLabel != null)
Text(
item.subLabel!,
style: TextStyle(
fontSize: 12,
color: Colors.grey.shade500,
),
),
],
),
),
Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Text(
"${item.amount} ${'SYP'.tr}",
style: const TextStyle(
fontSize: 16,
fontWeight: FontWeight.bold,
color: FinanceDesignSystem.primaryDark,
),
),
if (item.trend != null)
Text(
item.trend!,
style: TextStyle(
fontSize: 11,
color: item.trendColor ??
FinanceDesignSystem.successGreen,
fontWeight: FontWeight.w500,
),
),
],
),
],
);
},
),
),
],
);
}
}
class SummaryItem {
final IconData icon;
final String label;
final String? subLabel;
final String amount;
final Color color;
final String? trend;
final Color? trendColor;
SummaryItem({
required this.icon,
required this.label,
this.subLabel,
required this.amount,
required this.color,
this.trend,
this.trendColor,
});
}

View File

@@ -0,0 +1,163 @@
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import '../../../../constant/finance_design_system.dart';
class PromoGamificationCard extends StatelessWidget {
final String title;
final String subtitle;
final int currentProgress;
final int targetProgress;
final String reward;
final VoidCallback? onTap;
const PromoGamificationCard({
super.key,
required this.title,
required this.subtitle,
required this.currentProgress,
required this.targetProgress,
required this.reward,
this.onTap,
});
@override
Widget build(BuildContext context) {
final double progress = (currentProgress / targetProgress).clamp(0.0, 1.0);
final bool isCompleted = progress >= 1.0;
return Container(
padding: const EdgeInsets.all(20),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(FinanceDesignSystem.cardRadius),
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.03),
blurRadius: 10,
offset: const Offset(0, 4),
),
],
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
title,
style: const TextStyle(
fontSize: 16,
fontWeight: FontWeight.bold,
color: FinanceDesignSystem.primaryDark,
),
),
Text(
subtitle,
style: TextStyle(
fontSize: 12,
color: Colors.grey.shade500,
),
),
],
),
),
Container(
padding:
const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
decoration: BoxDecoration(
color: (isCompleted
? FinanceDesignSystem.successGreen
: FinanceDesignSystem.accentBlue)
.withOpacity(0.1),
borderRadius: BorderRadius.circular(20),
),
child: Text(
reward,
style: TextStyle(
fontSize: 12,
fontWeight: FontWeight.bold,
color: isCompleted
? FinanceDesignSystem.successGreen
: FinanceDesignSystem.accentBlue,
),
),
),
],
),
const SizedBox(height: 20),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
"${'Progress:'.tr} $currentProgress / $targetProgress",
style: TextStyle(
fontSize: 12,
fontWeight: FontWeight.w500,
color: Colors.grey.shade700,
),
),
if (isCompleted)
Icon(Icons.check_circle_rounded,
color: FinanceDesignSystem.successGreen, size: 16),
],
),
const SizedBox(height: 8),
Stack(
children: [
Container(
height: 10,
width: double.infinity,
decoration: BoxDecoration(
color: Colors.grey.shade100,
borderRadius: BorderRadius.circular(5),
),
),
AnimatedContainer(
duration: const Duration(milliseconds: 500),
height: 10,
width: MediaQuery.of(context).size.width *
progress, // Simplified for now
decoration: BoxDecoration(
gradient: LinearGradient(
colors: isCompleted
? [
FinanceDesignSystem.successGreen,
Colors.lightGreenAccent
]
: [FinanceDesignSystem.accentBlue, Colors.blueAccent],
),
borderRadius: BorderRadius.circular(5),
),
),
],
),
if (isCompleted && onTap != null) ...[
const SizedBox(height: 16),
SizedBox(
width: double.infinity,
child: ElevatedButton(
onPressed: onTap,
style: ElevatedButton.styleFrom(
backgroundColor: FinanceDesignSystem.successGreen,
foregroundColor: Colors.white,
shape: RoundedRectangleBorder(
borderRadius:
BorderRadius.circular(FinanceDesignSystem.buttonRadius),
),
elevation: 0,
padding: const EdgeInsets.symmetric(vertical: 12),
),
child: Text("Claim Reward".tr),
),
),
],
],
),
);
}
}

View File

@@ -0,0 +1,120 @@
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import '../../../../constant/finance_design_system.dart';
class QuickActionsGrid extends StatelessWidget {
final VoidCallback onAddBalance;
final VoidCallback onWithdraw;
final VoidCallback onTransfer;
final VoidCallback onHistory;
const QuickActionsGrid({
super.key,
required this.onAddBalance,
required this.onWithdraw,
required this.onTransfer,
required this.onHistory,
});
@override
Widget build(BuildContext context) {
return GridView.count(
shrinkWrap: true,
physics: const NeverScrollableScrollPhysics(),
crossAxisCount: 2,
crossAxisSpacing: 16,
mainAxisSpacing: 16,
childAspectRatio: 1.5,
children: [
_ActionItem(
icon: Icons.add_circle_outline_rounded,
label: "Add Balance".tr,
subLabel: "شحن",
color: FinanceDesignSystem.accentBlue,
onTap: onAddBalance,
),
_ActionItem(
icon: Icons.file_download_outlined,
label: "Withdraw".tr,
subLabel: "سحب",
color: FinanceDesignSystem.successGreen,
onTap: onWithdraw,
),
_ActionItem(
icon: Icons.swap_horiz_rounded,
label: "Transfer".tr,
subLabel: "تحويل",
color: Colors.orange,
onTap: onTransfer,
),
_ActionItem(
icon: Icons.history_rounded,
label: "History".tr,
subLabel: "السجل",
color: FinanceDesignSystem.primaryDark,
onTap: onHistory,
),
],
);
}
}
class _ActionItem extends StatelessWidget {
final IconData icon;
final String label;
final String subLabel;
final Color color;
final VoidCallback onTap;
const _ActionItem({
required this.icon,
required this.label,
required this.subLabel,
required this.color,
required this.onTap,
});
@override
Widget build(BuildContext context) {
return Material(
color: Colors.white,
borderRadius: BorderRadius.circular(FinanceDesignSystem.buttonRadius),
child: InkWell(
onTap: onTap,
borderRadius: BorderRadius.circular(FinanceDesignSystem.buttonRadius),
child: Container(
padding: const EdgeInsets.all(16),
decoration: BoxDecoration(
border: Border.all(color: Colors.grey.withOpacity(0.1)),
borderRadius:
BorderRadius.circular(FinanceDesignSystem.buttonRadius),
),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(icon, color: color, size: 24),
const SizedBox(height: 8),
Text(
label,
style: const TextStyle(
fontSize: 13,
fontWeight: FontWeight.bold,
color: FinanceDesignSystem.primaryDark,
),
textAlign: TextAlign.center,
),
Text(
subLabel,
style: TextStyle(
fontSize: 11,
color: Colors.grey.shade500,
),
textAlign: TextAlign.center,
),
],
),
),
),
);
}
}

View File

@@ -0,0 +1,128 @@
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import '../../../../constant/finance_design_system.dart';
class TransactionPreviewItem extends StatelessWidget {
final String title;
final String subtitle;
final String amount;
final String date;
final String type; // 'credit' or 'debit'
final String? method;
final VoidCallback? onTap;
const TransactionPreviewItem({
super.key,
required this.title,
required this.subtitle,
required this.amount,
required this.date,
required this.type,
this.method,
this.onTap,
});
@override
Widget build(BuildContext context) {
final bool isCredit = type.toLowerCase() == 'credit';
final Color statusColor = isCredit
? FinanceDesignSystem.successGreen
: FinanceDesignSystem.dangerRed;
return Material(
color: Colors.transparent,
child: InkWell(
onTap: onTap,
borderRadius: BorderRadius.circular(FinanceDesignSystem.mainRadius),
child: Container(
padding: const EdgeInsets.symmetric(vertical: 12, horizontal: 4),
child: Row(
children: [
Container(
padding: const EdgeInsets.all(12),
decoration: BoxDecoration(
color: statusColor.withOpacity(0.1),
shape: BoxShape.circle,
),
child: Icon(
isCredit
? Icons.arrow_downward_rounded
: Icons.arrow_upward_rounded,
color: statusColor,
size: 20,
),
),
const SizedBox(width: 16),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
title,
style: const TextStyle(
fontSize: 15,
fontWeight: FontWeight.bold,
color: FinanceDesignSystem.primaryDark,
),
),
const SizedBox(height: 4),
Row(
children: [
Text(
date,
style: TextStyle(
fontSize: 12,
color: Colors.grey.shade500,
),
),
if (method != null) ...[
const SizedBox(width: 8),
Container(
width: 3,
height: 3,
decoration: BoxDecoration(
color: Colors.grey.shade400,
shape: BoxShape.circle,
),
),
const SizedBox(width: 8),
Text(
method!,
style: TextStyle(
fontSize: 12,
color: Colors.grey.shade500,
),
),
],
],
),
],
),
),
Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Text(
"${isCredit ? '+' : '-'}$amount ${'SYP'.tr}",
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.bold,
color: statusColor,
),
),
Text(
subtitle,
style: TextStyle(
fontSize: 11,
color: Colors.grey.shade400,
),
),
],
),
],
),
),
),
);
}
}