diff --git a/assets/fpb-assets/time_circle.svg b/assets/fpb-assets/time_circle.svg new file mode 100644 index 0000000..87f8b57 --- /dev/null +++ b/assets/fpb-assets/time_circle.svg @@ -0,0 +1,4 @@ + + + + diff --git a/assets/fpb-assets/wallet.svg b/assets/fpb-assets/wallet.svg new file mode 100644 index 0000000..c682d37 --- /dev/null +++ b/assets/fpb-assets/wallet.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/lib/assets/fpb_svg.dart b/lib/assets/fpb_svg.dart index d4238a2..f6ba322 100644 --- a/lib/assets/fpb_svg.dart +++ b/lib/assets/fpb_svg.dart @@ -15,4 +15,6 @@ class SvgNames { static String facebook = '${path}facebook.svg'; static String twitter = '${path}twitter.svg'; static String error = '${path}Cross.svg'; + static String timeCircle = '${path}time_circle.svg'; + static String wallet = '${path}wallet.svg'; } diff --git a/lib/router/app_route.dart b/lib/router/app_route.dart index 0437617..c96f1ca 100644 --- a/lib/router/app_route.dart +++ b/lib/router/app_route.dart @@ -1,6 +1,6 @@ import 'package:auto_route/annotations.dart'; -import 'package:fpb/contact_us/contact_us_page.dart'; import 'package:fpb/contact_us/view/contact_us_screen.dart'; +import 'package:fpb/contact_us/view/contact_us_success_screen.dart'; import 'package:fpb/email_confirmation/email_confirmation.dart'; import 'package:fpb/home/view/home_screen.dart'; import 'package:fpb/latest_activities/view/latest_activities_screen.dart'; @@ -10,6 +10,7 @@ import 'package:fpb/phone_number_confirmation/view/phone_number_confirmation.dar import 'package:fpb/profile/view/profile_page.dart'; import 'package:fpb/qr_code_screen/view/qr_code_screen.dart'; import 'package:fpb/savings/save_money_with_bucket/save_money_with_bucket.dart'; +import 'package:fpb/savings/view/savings_page.dart'; import 'package:fpb/sign_in/view/sign_in_page.dart'; import 'package:fpb/sign_up/view/signup_page.dart'; @@ -26,6 +27,10 @@ import 'package:fpb/sign_up/view/signup_page.dart'; name: 'HomeRouter', page: HomeScreen, children: [ + AutoRoute( + path: 'savings', + page: SavingsPage, + ), AutoRoute( path: 'profile', page: ProfileScreen, diff --git a/lib/savings/view/savings_page.dart b/lib/savings/view/savings_page.dart index 3e75a4e..f033fa5 100644 --- a/lib/savings/view/savings_page.dart +++ b/lib/savings/view/savings_page.dart @@ -1,9 +1,11 @@ // ignore_for_file: omit_local_variable_types, prefer_final_locals -import 'package:auto_route/auto_route.dart'; import 'package:flutter/material.dart'; +import 'package:fpb/assets/fpb_svg.dart'; import 'package:fpb/l10n/l10n.dart'; -import 'package:fpb/router/app_route.gr.dart'; +import 'package:fpb/savings/view/widgets/account_card.dart'; +import 'package:fpb/savings/view/widgets/account_type_tile.dart'; +import 'package:fpb/savings/view/widgets/savings_screen_title.dart'; class SavingsPage extends StatefulWidget { const SavingsPage({super.key}); @@ -14,255 +16,75 @@ class SavingsPage extends StatefulWidget { } class _SavingsPageState extends State { - int pageIndex = 1; - - void onChanged(int index) { - setState(() { - pageIndex = index; - }); - } - + @override Widget build(BuildContext context) { final l10n = context.l10n; - final theme = Theme.of(context); - final colors = theme.colorScheme; return LayoutBuilder( builder: (context, box) { - return Padding( - padding: EdgeInsets.only( - left: box.maxHeight * 0.025, - right: box.maxHeight * 0.025, - top: box.maxHeight * 0.1, - ), - child: Column( - children: [ - Row( - mainAxisAlignment: MainAxisAlignment.spaceBetween, + return Scaffold( + body: Padding( + padding: EdgeInsets.only( + left: box.maxHeight * 0.025, + right: box.maxHeight * 0.025, + top: box.maxHeight * 0.1, + ), + child: SingleChildScrollView( + child: Column( children: [ - Text( - l10n.savingsTitle, - style: theme.textTheme.titleLarge, + SavingsScreenTitle( + box: box, ), - ElevatedButton( - style: ButtonStyle( - backgroundColor: - MaterialStateProperty.all(colors.secondary), - ), - onPressed: () { - context.router.push(ProfileRoute()); - }, - child: Row( - children: [ - const Icon( - Icons.add, - color: Colors.white, - size: 12, - ), - SizedBox( - width: box.maxWidth * 0.03, - ), - Text( - l10n.savingsNewSavingsAccountLabel, - style: - Theme.of(context).textTheme.titleSmall?.copyWith( - // color: AppColors.onSurfaceW, - ), - ), - ], - ), + SizedBox( + height: box.maxHeight * 0.05, ), - ], - ), - SizedBox( - height: box.maxHeight * 0.025, - ), - Container( - height: box.maxHeight * 0.3, - width: box.maxWidth * .85, - decoration: BoxDecoration( - borderRadius: BorderRadius.circular(15), - color: Colors.white, - ), - child: Padding( - padding: EdgeInsets.only( - left: box.maxHeight * 0.025, - right: box.maxHeight * 0.025, - top: box.maxHeight * 0.025, - bottom: box.maxHeight * 0.015, - ), - child: Column( - children: [ - Row( - children: [ - Image.asset( - 'assets/fpb-assets/orange_clock_icon.png', - ), - SizedBox( - width: box.maxHeight * 0.02, - ), - Text( - l10n.savingsTimeBlockedAccounts, - style: Theme.of(context).textTheme.titleMedium, - ), - ], - ), - SizedBox( - height: box.maxHeight * 0.01, - ), - Column( - // ignore: avoid_redundant_argument_values - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Row( - mainAxisAlignment: MainAxisAlignment.spaceBetween, - children: [ - Text( - 'My Tesla New Model X', - style: Theme.of(context).textTheme.titleMedium, - ), - Text( - r'$ 1,280.45', - style: Theme.of(context).textTheme.titleSmall, - ), - ], - ), - SizedBox( - height: box.maxHeight * 0.01, - ), - Text( + AccountsCard( + accountTitle: l10n.savingsTimeBlockedAccounts, + svgnames: SvgNames.timeCircle, + box: box, + l10n: l10n, + accountTypeTiles: [ + AccountTypeTile( + tileText: 'My Tesla Model X', + amount: '\$ 1,280.45', + tileSubText: l10n.savingsMyTeslaModelXBlockedTimelineText, - style: Theme.of(context).textTheme.labelMedium, - ), - ], - ), - SizedBox( - height: box.maxHeight * 0.01, - ), - const Divider(), - SizedBox( - height: box.maxHeight * 0.01, - ), - Column( - // ignore: avoid_redundant_argument_values - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Row( - mainAxisAlignment: MainAxisAlignment.spaceBetween, - children: [ - Text( - l10n.savingsNewDroneText, - style: Theme.of(context).textTheme.titleMedium, - ), - Text( - r'$ 79.45', - style: Theme.of(context).textTheme.titleSmall, - ), - ], - ), - SizedBox( - height: box.maxHeight * 0.01, - ), - Text( - l10n.savingsNewDroneBlockedTimelineText, - style: Theme.of(context).textTheme.labelMedium, - ), - ], + box: box, ), + AccountTypeTile( + tileText: l10n.savingsNewDroneText, + amount: '\$ 79.45', + box: box, + tileSubText: l10n.savingsNewDroneBlockedTimelineText, + ) ], ), - ), - ), - SizedBox( - height: box.maxHeight * 0.025, - ), - Container( - height: box.maxHeight * 0.3, - width: box.maxWidth * .85, - decoration: BoxDecoration( - borderRadius: BorderRadius.circular(15), - color: Colors.white, - ), - child: Padding( - padding: EdgeInsets.only( - left: box.maxHeight * 0.025, - right: box.maxHeight * 0.025, - top: box.maxHeight * 0.025, + SizedBox( + height: box.maxHeight * 0.025, ), - child: Column( - children: [ - Row( - children: [ - Image.asset('assets/fpb-assets/Fill 2.png'), - SizedBox( - width: box.maxHeight * 0.02, - ), - Text( - l10n.savingsStandardAccountsLabel, - style: Theme.of(context).textTheme.titleMedium, - ), - ], - ), - SizedBox( - height: box.maxHeight * 0.01, - ), - Column( - // ignore: avoid_redundant_argument_values - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Row( - mainAxisAlignment: MainAxisAlignment.spaceBetween, - children: [ - Text( - l10n.savingsMortgageText, - style: Theme.of(context).textTheme.titleMedium, - ), - Text( - r'$ 22,500.50', - style: Theme.of(context).textTheme.titleSmall, - ), - ], - ), - ], - ), - SizedBox( - height: box.maxHeight * 0.025, - ), - const Divider(), - SizedBox( - height: box.maxHeight * 0.01, - ), - Column( - // ignore: avoid_redundant_argument_values - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Row( - mainAxisAlignment: MainAxisAlignment.spaceBetween, - children: [ - Text( - l10n.savingsNewDroneText, - style: Theme.of(context).textTheme.titleMedium, - ), - Text( - r'$ 79.45', - style: Theme.of(context).textTheme.titleSmall, - ), - ], - ), - SizedBox( - height: box.maxHeight * 0.01, - ), - ], + AccountsCard( + accountTitle: l10n.savingsStandardAccountsLabel, + svgnames: SvgNames.wallet, + box: box, + l10n: l10n, + accountTypeTiles: [ + AccountTypeTile( + tileText: l10n.savingsMortgageText, + amount: '\$ 22,500.50', + tileSubText: '', + box: box, ), + AccountTypeTile( + tileText: l10n.savingsNewDroneText, + amount: '\$ 79.45', + box: box, + tileSubText: '', + ) ], - ), - ), + ) + ], ), - ], + ), ), ); }, diff --git a/lib/savings/view/widgets/account_card.dart b/lib/savings/view/widgets/account_card.dart new file mode 100644 index 0000000..5932f37 --- /dev/null +++ b/lib/savings/view/widgets/account_card.dart @@ -0,0 +1,68 @@ +import 'package:flutter/material.dart'; +import 'package:fpb/l10n/l10n.dart'; +import 'package:fpb/savings/view/widgets/account_card_title.dart'; +import 'package:fpb/savings/view/widgets/account_type_tile.dart'; + +class AccountsCard extends StatelessWidget { + const AccountsCard( + {super.key, + required this.box, + required this.l10n, + required this.accountTypeTiles, + required this.svgnames, + required this.accountTitle}); + + final BoxConstraints box; + final AppLocalizations l10n; + final String svgnames; + final String accountTitle; + final List accountTypeTiles; + + @override + Widget build(BuildContext context) { + final theme = Theme.of(context); + final colors = theme.colorScheme; + + return Container( + decoration: BoxDecoration( + borderRadius: BorderRadius.circular(15), + color: Colors.white, + ), + child: Padding( + padding: EdgeInsets.only( + left: box.maxHeight * 0.025, + right: box.maxHeight * 0.025, + top: box.maxHeight * 0.025, + bottom: box.maxHeight * 0.015, + ), + child: Column( + children: [ + AccountsCardTitle( + svgname: svgnames, + box: box, + containerTitle: accountTitle, + ), + SizedBox( + height: box.maxHeight * .03, + ), + for (int i = 0; i < accountTypeTiles.length; i++) + () { + final AccountTypeTile tile = accountTypeTiles[i]; + + return Column( + children: [ + tile, + if (i != accountTypeTiles.length - 1) + Divider( + color: colors.onBackground, + thickness: .5, + ), + ], + ); + }() + ], + ), + ), + ); + } +} diff --git a/lib/savings/view/widgets/account_card_title.dart b/lib/savings/view/widgets/account_card_title.dart new file mode 100644 index 0000000..e4743e2 --- /dev/null +++ b/lib/savings/view/widgets/account_card_title.dart @@ -0,0 +1,33 @@ +import 'package:flutter/material.dart'; +import 'package:flutter_svg/flutter_svg.dart'; + +class AccountsCardTitle extends StatelessWidget { + const AccountsCardTitle( + {super.key, + required this.box, + required this.containerTitle, + required this.svgname}); + + final BoxConstraints box; + final String containerTitle; + final String svgname; + + @override + Widget build(BuildContext context) { + return Row( + children: [ + SvgPicture.asset(svgname), + SizedBox( + width: box.maxHeight * 0.05, + ), + Text( + containerTitle, + style: Theme.of(context) + .textTheme + .titleMedium + ?.copyWith(fontWeight: FontWeight.w400), + ), + ], + ); + } +} diff --git a/lib/savings/view/widgets/account_type_tile.dart b/lib/savings/view/widgets/account_type_tile.dart new file mode 100644 index 0000000..d1bcd7e --- /dev/null +++ b/lib/savings/view/widgets/account_type_tile.dart @@ -0,0 +1,50 @@ +import 'package:flutter/material.dart'; + +class AccountTypeTile extends StatelessWidget { + const AccountTypeTile({ + super.key, + required this.tileText, + required this.amount, + required this.box, + this.tileSubText, + }); + + final String tileText; + + final String amount; + final BoxConstraints box; + final String? tileSubText; + + @override + Widget build(BuildContext context) { + final theme = Theme.of(context); + final style = theme.textTheme; + return Column( + // ignore: avoid_redundant_argument_values + mainAxisAlignment: MainAxisAlignment.start, + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + Text( + tileText, + style: style.titleMedium, + ), + Text( + amount, + style: style.titleMedium?.copyWith(fontWeight: FontWeight.w600), + ), + ], + ), + SizedBox( + height: box.maxHeight * 0.005, + ), + Text( + tileSubText!, + style: style.titleSmall, + ), + ], + ); + } +} diff --git a/lib/savings/view/widgets/new_savings_account_btn.dart b/lib/savings/view/widgets/new_savings_account_btn.dart new file mode 100644 index 0000000..60a7a47 --- /dev/null +++ b/lib/savings/view/widgets/new_savings_account_btn.dart @@ -0,0 +1,44 @@ +import 'package:flutter/material.dart'; +import 'package:fpb/l10n/l10n.dart'; + +class NewSavingsAccountBtn extends StatelessWidget { + const NewSavingsAccountBtn({ + super.key, + required this.colors, + required this.l10n, + required this.box, + }); + + final ColorScheme colors; + final AppLocalizations l10n; + final BoxConstraints box; + + @override + Widget build(BuildContext context) { + return ElevatedButton( + style: ButtonStyle( + backgroundColor: MaterialStateProperty.all(colors.secondary), + ), + onPressed: () {}, + child: Row( + children: [ + Icon( + Icons.add, + color: colors.background, + size: 18, + // weight: 6, + ), + SizedBox( + width: box.maxWidth * 0.03, + ), + Text( + l10n.savingsNewSavingsAccountLabel, + style: Theme.of(context).textTheme.titleSmall?.copyWith( + color: colors.background, + ), + ), + ], + ), + ); + } +} diff --git a/lib/savings/view/widgets/savings_screen_title.dart b/lib/savings/view/widgets/savings_screen_title.dart new file mode 100644 index 0000000..4ed2fde --- /dev/null +++ b/lib/savings/view/widgets/savings_screen_title.dart @@ -0,0 +1,32 @@ +import 'package:flutter/material.dart'; +import 'package:fpb/l10n/l10n.dart'; +import 'package:fpb/savings/view/widgets/new_savings_account_btn.dart'; + +class SavingsScreenTitle extends StatelessWidget { + const SavingsScreenTitle({super.key, required this.box}); + + final BoxConstraints box; + + @override + Widget build(BuildContext context) { + final l10n = context.l10n; + final theme = Theme.of(context); + final colors = theme.colorScheme; + return Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + Text( + l10n.savingsTitle, + style: theme.textTheme.titleLarge?.copyWith( + fontSize: 32, + ), + ), + NewSavingsAccountBtn( + colors: colors, + l10n: l10n, + box: box, + ), + ], + ); + } +}