From e60cd4e3b29ddae04e1ee35affc0457f92960a12 Mon Sep 17 00:00:00 2001 From: Tiku Gaelle Date: Tue, 7 Mar 2023 14:24:56 +0100 Subject: [PATCH 1/4] fix: Updated Savings page --- lib/savings/view/savings_page.dart | 277 ++++-------------- .../view/widgets/newSavingsAccountBtn.dart | 44 +++ .../view/widgets/savingsAccountType.dart | 274 +++++++++++++++++ 3 files changed, 368 insertions(+), 227 deletions(-) create mode 100644 lib/savings/view/widgets/newSavingsAccountBtn.dart create mode 100644 lib/savings/view/widgets/savingsAccountType.dart diff --git a/lib/savings/view/savings_page.dart b/lib/savings/view/savings_page.dart index 3e75a4e..1fa73ef 100644 --- a/lib/savings/view/savings_page.dart +++ b/lib/savings/view/savings_page.dart @@ -1,9 +1,9 @@ // 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/l10n/l10n.dart'; -import 'package:fpb/router/app_route.gr.dart'; +import 'package:fpb/savings/view/widgets/newSavingsAccountBtn.dart'; +import 'package:fpb/savings/view/widgets/savingsAccountType.dart'; class SavingsPage extends StatefulWidget { const SavingsPage({super.key}); @@ -29,240 +29,63 @@ class _SavingsPageState extends State { 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( + backgroundColor: colors.onBackground, + 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, - ), - 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.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( + Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, 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( - l10n.savingsMyTeslaModelXBlockedTimelineText, - style: Theme.of(context).textTheme.labelMedium, - ), - ], + Text( + l10n.savingsTitle, + style: theme.textTheme.titleLarge, ), - 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, - ), - ], + newSavingsAccountBtn( + colors: colors, + l10n: l10n, + box: box, ), ], ), - ), - ), - 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.05, ), - 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, - ), - ], - ), - ], + savingsAccountTypeContainer( + l10n: l10n, + box: box, + containerTitle: l10n.savingsTimeBlockedAccounts, + containerText1: 'My Tesla Model X', + containerSubText1: + l10n.savingsMyTeslaModelXBlockedTimelineText, + containerText2: l10n.savingsNewDroneText, + containerSubText2: l10n.savingsNewDroneBlockedTimelineText, + imageUrl: 'assets/fpb-assets/orange_clock_icon.png', + amount1: r'$ 1,280.45', + amount2: r'$ 79.45', ), - ), + SizedBox( + height: box.maxHeight * 0.025, + ), + savingsAccountTypeContainer2( + l10n: l10n, + box: box, + containerText1: l10n.savingsMortgageText, + containerText2: l10n.savingsNewDroneText, + containerTitle: l10n.savingsStandardAccountsLabel, + imageUrl: 'assets/fpb-assets/Fill 2.png', + amount1: r'$ 22,500.50', + amount2: r'$ 79.45', + ) + ], ), - ], + ), ), ); }, diff --git a/lib/savings/view/widgets/newSavingsAccountBtn.dart b/lib/savings/view/widgets/newSavingsAccountBtn.dart new file mode 100644 index 0000000..b2fc520 --- /dev/null +++ b/lib/savings/view/widgets/newSavingsAccountBtn.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/savingsAccountType.dart b/lib/savings/view/widgets/savingsAccountType.dart new file mode 100644 index 0000000..d5f9d97 --- /dev/null +++ b/lib/savings/view/widgets/savingsAccountType.dart @@ -0,0 +1,274 @@ +import 'package:flutter/material.dart'; +import 'package:fpb/l10n/l10n.dart'; + +class savingsAccountTypeContainer extends StatelessWidget { + const savingsAccountTypeContainer( + {super.key, + required this.l10n, + required this.box, + required this.containerSubText1, + required this.containerSubText2, + required this.containerText1, + required this.containerText2, + required this.containerTitle, + required this.imageUrl, + required this.amount1, + required this.amount2}); + + final AppLocalizations l10n; + final BoxConstraints box; + final String containerTitle; + final String containerText1; + final String containerText2; + final String containerSubText1; + final String containerSubText2; + final String imageUrl; + final String amount1; + final String amount2; + + @override + Widget build(BuildContext context) { + final theme = Theme.of(context); + final style = theme.textTheme; + + return Container( + height: box.maxHeight * 0.35, + width: box.maxWidth * .95, + 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: SingleChildScrollView( + child: Column( + children: [ + Row( + children: [ + Image.asset( + imageUrl, + ), + SizedBox( + width: box.maxHeight * 0.02, + ), + Text( + containerTitle, + style: Theme.of(context).textTheme.titleMedium, + ), + ], + ), + SizedBox( + height: box.maxHeight * 0.03, + ), + Column( + // ignore: avoid_redundant_argument_values + mainAxisAlignment: MainAxisAlignment.start, + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + Text( + containerText1, + style: style.titleMedium + ?.copyWith(color: theme.colorScheme.onTertiary), + ), + Text( + amount1, + style: style.titleMedium + ?.copyWith(fontWeight: FontWeight.w600), + ), + ], + ), + SizedBox( + height: box.maxHeight * 0.01, + ), + Text( + containerSubText1, + style: style.titleSmall, + ), + ], + ), + 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( + containerText2, + style: style.titleMedium + ?.copyWith(color: theme.colorScheme.onTertiary), + ), + Text( + amount2, + style: style.titleMedium + ?.copyWith(fontWeight: FontWeight.w600), + ), + ], + ), + SizedBox( + height: box.maxHeight * 0.01, + ), + Text( + containerSubText2, + style: style.titleSmall, + ), + ], + ), + ], + ), + ), + ), + ); + } +} + +class savingsAccountTypeContainer2 extends StatelessWidget { + const savingsAccountTypeContainer2( + {super.key, + required this.l10n, + required this.box, + // this.containerSubText1, + // this.containerSubText2, + required this.containerText1, + required this.containerText2, + required this.containerTitle, + required this.imageUrl, + required this.amount1, + required this.amount2}); + + final AppLocalizations l10n; + final BoxConstraints box; + final String containerTitle; + final String containerText1; + final String containerText2; + // final String containerSubText1; + //final String containerSubText2; + final String imageUrl; + final String amount1; + final String amount2; + + @override + Widget build(BuildContext context) { + final theme = Theme.of(context); + final style = theme.textTheme; + + return Container( + height: box.maxHeight * 0.35, + width: box.maxWidth * .95, + 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( + imageUrl, + ), + SizedBox( + width: box.maxHeight * 0.02, + ), + Text( + containerTitle, + style: Theme.of(context).textTheme.titleMedium, + ), + ], + ), + SizedBox( + height: box.maxHeight * 0.03, + ), + Column( + // ignore: avoid_redundant_argument_values + mainAxisAlignment: MainAxisAlignment.start, + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + Text( + containerText1, + style: style.titleMedium + ?.copyWith(color: theme.colorScheme.onTertiary), + ), + Text( + amount1, + style: style.titleMedium + ?.copyWith(fontWeight: FontWeight.w600), + ), + ], + ), + SizedBox( + height: box.maxHeight * 0.01, + ), + //Text( + //containerSubText1 == null ? null : containerSubText1, + //style: style.titleSmall, + //), + ], + ), + 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( + containerText2, + style: style.titleMedium + ?.copyWith(color: theme.colorScheme.onTertiary), + ), + Text( + amount2, + style: style.titleMedium + ?.copyWith(fontWeight: FontWeight.w600), + ), + ], + ), + SizedBox( + height: box.maxHeight * 0.01, + ), + // Text( + // containerSubText2!, + // style: style.titleSmall, + //), + ], + ), + ], + ), + ), + ); + } +} From 49dc3ef8114b111cf9b1dcefd7fe13424603c676 Mon Sep 17 00:00:00 2001 From: Tiku Gaelle Date: Fri, 17 Mar 2023 16:31:35 +0100 Subject: [PATCH 2/4] refactor: updated savings page with generic declarative UI design --- assets/fpb-assets/time_circle.svg | 4 + assets/fpb-assets/wallet.svg | 5 + lib/assets/fpb_svg.dart | 2 + lib/savings/view/savings_page.dart | 94 ------ lib/savings/view/savings_screen.dart | 100 +++++++ lib/savings/view/widgets/account_card.dart | 68 +++++ .../view/widgets/account_card_title.dart | 33 +++ .../view/widgets/account_type_tile.dart | 50 ++++ ...tBtn.dart => new_savings_account_btn.dart} | 4 +- .../view/widgets/savingsAccountType.dart | 274 ------------------ .../view/widgets/savings_screen_title.dart | 32 ++ 11 files changed, 296 insertions(+), 370 deletions(-) create mode 100644 assets/fpb-assets/time_circle.svg create mode 100644 assets/fpb-assets/wallet.svg delete mode 100644 lib/savings/view/savings_page.dart create mode 100644 lib/savings/view/savings_screen.dart create mode 100644 lib/savings/view/widgets/account_card.dart create mode 100644 lib/savings/view/widgets/account_card_title.dart create mode 100644 lib/savings/view/widgets/account_type_tile.dart rename lib/savings/view/widgets/{newSavingsAccountBtn.dart => new_savings_account_btn.dart} (91%) delete mode 100644 lib/savings/view/widgets/savingsAccountType.dart create mode 100644 lib/savings/view/widgets/savings_screen_title.dart 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/savings/view/savings_page.dart b/lib/savings/view/savings_page.dart deleted file mode 100644 index 1fa73ef..0000000 --- a/lib/savings/view/savings_page.dart +++ /dev/null @@ -1,94 +0,0 @@ -// ignore_for_file: omit_local_variable_types, prefer_final_locals - -import 'package:flutter/material.dart'; -import 'package:fpb/l10n/l10n.dart'; -import 'package:fpb/savings/view/widgets/newSavingsAccountBtn.dart'; -import 'package:fpb/savings/view/widgets/savingsAccountType.dart'; - -class SavingsPage extends StatefulWidget { - const SavingsPage({super.key}); - static const String routeName = '/savings'; - - @override - State createState() => _SavingsPageState(); -} - -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 Scaffold( - backgroundColor: colors.onBackground, - 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: [ - Row( - mainAxisAlignment: MainAxisAlignment.spaceBetween, - children: [ - Text( - l10n.savingsTitle, - style: theme.textTheme.titleLarge, - ), - newSavingsAccountBtn( - colors: colors, - l10n: l10n, - box: box, - ), - ], - ), - SizedBox( - height: box.maxHeight * 0.05, - ), - savingsAccountTypeContainer( - l10n: l10n, - box: box, - containerTitle: l10n.savingsTimeBlockedAccounts, - containerText1: 'My Tesla Model X', - containerSubText1: - l10n.savingsMyTeslaModelXBlockedTimelineText, - containerText2: l10n.savingsNewDroneText, - containerSubText2: l10n.savingsNewDroneBlockedTimelineText, - imageUrl: 'assets/fpb-assets/orange_clock_icon.png', - amount1: r'$ 1,280.45', - amount2: r'$ 79.45', - ), - SizedBox( - height: box.maxHeight * 0.025, - ), - savingsAccountTypeContainer2( - l10n: l10n, - box: box, - containerText1: l10n.savingsMortgageText, - containerText2: l10n.savingsNewDroneText, - containerTitle: l10n.savingsStandardAccountsLabel, - imageUrl: 'assets/fpb-assets/Fill 2.png', - amount1: r'$ 22,500.50', - amount2: r'$ 79.45', - ) - ], - ), - ), - ), - ); - }, - ); - } -} diff --git a/lib/savings/view/savings_screen.dart b/lib/savings/view/savings_screen.dart new file mode 100644 index 0000000..92240cd --- /dev/null +++ b/lib/savings/view/savings_screen.dart @@ -0,0 +1,100 @@ +// ignore_for_file: omit_local_variable_types, prefer_final_locals + +import 'package:flutter/material.dart'; +import 'package:fpb/assets/fpb_svg.dart'; +import 'package:fpb/l10n/l10n.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}); + static const String routeName = '/savings'; + + @override + State createState() => _SavingsPageState(); +} + +class _SavingsPageState extends State { + int pageIndex = 1; + + void onChanged(int index) { + setState(() { + pageIndex = index; + }); + } + + @override + Widget build(BuildContext context) { + final l10n = context.l10n; + return LayoutBuilder( + builder: (context, box) { + 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: [ + SavingsScreenTitle( + box: box, + ), + SizedBox( + height: box.maxHeight * 0.05, + ), + 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, + box: box, + ), + AccountTypeTile( + tileText: l10n.savingsNewDroneText, + amount: '\$ 79.45', + box: box, + tileSubText: l10n.savingsNewDroneBlockedTimelineText, + ) + ], + ), + SizedBox( + height: box.maxHeight * 0.025, + ), + 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/newSavingsAccountBtn.dart b/lib/savings/view/widgets/new_savings_account_btn.dart similarity index 91% rename from lib/savings/view/widgets/newSavingsAccountBtn.dart rename to lib/savings/view/widgets/new_savings_account_btn.dart index b2fc520..60a7a47 100644 --- a/lib/savings/view/widgets/newSavingsAccountBtn.dart +++ b/lib/savings/view/widgets/new_savings_account_btn.dart @@ -1,8 +1,8 @@ import 'package:flutter/material.dart'; import 'package:fpb/l10n/l10n.dart'; -class newSavingsAccountBtn extends StatelessWidget { - const newSavingsAccountBtn({ +class NewSavingsAccountBtn extends StatelessWidget { + const NewSavingsAccountBtn({ super.key, required this.colors, required this.l10n, diff --git a/lib/savings/view/widgets/savingsAccountType.dart b/lib/savings/view/widgets/savingsAccountType.dart deleted file mode 100644 index d5f9d97..0000000 --- a/lib/savings/view/widgets/savingsAccountType.dart +++ /dev/null @@ -1,274 +0,0 @@ -import 'package:flutter/material.dart'; -import 'package:fpb/l10n/l10n.dart'; - -class savingsAccountTypeContainer extends StatelessWidget { - const savingsAccountTypeContainer( - {super.key, - required this.l10n, - required this.box, - required this.containerSubText1, - required this.containerSubText2, - required this.containerText1, - required this.containerText2, - required this.containerTitle, - required this.imageUrl, - required this.amount1, - required this.amount2}); - - final AppLocalizations l10n; - final BoxConstraints box; - final String containerTitle; - final String containerText1; - final String containerText2; - final String containerSubText1; - final String containerSubText2; - final String imageUrl; - final String amount1; - final String amount2; - - @override - Widget build(BuildContext context) { - final theme = Theme.of(context); - final style = theme.textTheme; - - return Container( - height: box.maxHeight * 0.35, - width: box.maxWidth * .95, - 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: SingleChildScrollView( - child: Column( - children: [ - Row( - children: [ - Image.asset( - imageUrl, - ), - SizedBox( - width: box.maxHeight * 0.02, - ), - Text( - containerTitle, - style: Theme.of(context).textTheme.titleMedium, - ), - ], - ), - SizedBox( - height: box.maxHeight * 0.03, - ), - Column( - // ignore: avoid_redundant_argument_values - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Row( - mainAxisAlignment: MainAxisAlignment.spaceBetween, - children: [ - Text( - containerText1, - style: style.titleMedium - ?.copyWith(color: theme.colorScheme.onTertiary), - ), - Text( - amount1, - style: style.titleMedium - ?.copyWith(fontWeight: FontWeight.w600), - ), - ], - ), - SizedBox( - height: box.maxHeight * 0.01, - ), - Text( - containerSubText1, - style: style.titleSmall, - ), - ], - ), - 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( - containerText2, - style: style.titleMedium - ?.copyWith(color: theme.colorScheme.onTertiary), - ), - Text( - amount2, - style: style.titleMedium - ?.copyWith(fontWeight: FontWeight.w600), - ), - ], - ), - SizedBox( - height: box.maxHeight * 0.01, - ), - Text( - containerSubText2, - style: style.titleSmall, - ), - ], - ), - ], - ), - ), - ), - ); - } -} - -class savingsAccountTypeContainer2 extends StatelessWidget { - const savingsAccountTypeContainer2( - {super.key, - required this.l10n, - required this.box, - // this.containerSubText1, - // this.containerSubText2, - required this.containerText1, - required this.containerText2, - required this.containerTitle, - required this.imageUrl, - required this.amount1, - required this.amount2}); - - final AppLocalizations l10n; - final BoxConstraints box; - final String containerTitle; - final String containerText1; - final String containerText2; - // final String containerSubText1; - //final String containerSubText2; - final String imageUrl; - final String amount1; - final String amount2; - - @override - Widget build(BuildContext context) { - final theme = Theme.of(context); - final style = theme.textTheme; - - return Container( - height: box.maxHeight * 0.35, - width: box.maxWidth * .95, - 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( - imageUrl, - ), - SizedBox( - width: box.maxHeight * 0.02, - ), - Text( - containerTitle, - style: Theme.of(context).textTheme.titleMedium, - ), - ], - ), - SizedBox( - height: box.maxHeight * 0.03, - ), - Column( - // ignore: avoid_redundant_argument_values - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Row( - mainAxisAlignment: MainAxisAlignment.spaceBetween, - children: [ - Text( - containerText1, - style: style.titleMedium - ?.copyWith(color: theme.colorScheme.onTertiary), - ), - Text( - amount1, - style: style.titleMedium - ?.copyWith(fontWeight: FontWeight.w600), - ), - ], - ), - SizedBox( - height: box.maxHeight * 0.01, - ), - //Text( - //containerSubText1 == null ? null : containerSubText1, - //style: style.titleSmall, - //), - ], - ), - 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( - containerText2, - style: style.titleMedium - ?.copyWith(color: theme.colorScheme.onTertiary), - ), - Text( - amount2, - style: style.titleMedium - ?.copyWith(fontWeight: FontWeight.w600), - ), - ], - ), - SizedBox( - height: box.maxHeight * 0.01, - ), - // Text( - // containerSubText2!, - // style: style.titleSmall, - //), - ], - ), - ], - ), - ), - ); - } -} 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, + ), + ], + ); + } +} From 6bfd24c9e0ebe0860d68f7d1bdf74c97c02ae177 Mon Sep 17 00:00:00 2001 From: Tiku Gaelle Date: Fri, 17 Mar 2023 19:48:43 +0100 Subject: [PATCH 3/4] fix: file and class name change --- lib/router/app_route.dart | 7 ++++++- .../view/{savings_screen.dart => savings_page.dart} | 0 2 files changed, 6 insertions(+), 1 deletion(-) rename lib/savings/view/{savings_screen.dart => savings_page.dart} (100%) 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_screen.dart b/lib/savings/view/savings_page.dart similarity index 100% rename from lib/savings/view/savings_screen.dart rename to lib/savings/view/savings_page.dart From c5d83e37c4e4e55841c988c576e9326a18fffd26 Mon Sep 17 00:00:00 2001 From: Tiku Gaelle Date: Fri, 17 Mar 2023 19:58:54 +0100 Subject: [PATCH 4/4] fix: remove dead code --- lib/savings/view/savings_page.dart | 9 +-------- 1 file changed, 1 insertion(+), 8 deletions(-) diff --git a/lib/savings/view/savings_page.dart b/lib/savings/view/savings_page.dart index 92240cd..f033fa5 100644 --- a/lib/savings/view/savings_page.dart +++ b/lib/savings/view/savings_page.dart @@ -16,14 +16,7 @@ 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;