From bb6dea0292912dece0b3bb98d6877eb90d9bf213 Mon Sep 17 00:00:00 2001 From: Rafael Saes <76502841+saltrafael@users.noreply.github.com> Date: Wed, 12 Jul 2023 12:52:28 -0300 Subject: [PATCH] Cw 354 app issues with huge font size (#906) * fix: make welcome screen scrollable * fix: make pre seed page scrollable * fix: make wallet seed page scrollable * refactor: remove unnecessary and stacked widgets and remove IntrinsicHeight & LayoutBuilder used for SingleChildScrollView, and replace it for CustomScrollView on welcome_page.dart * refactor: remove unnecessary Flexible widgets and remove IntrinsicHeight & LayoutBuilder for SingleChildScrollView and replace it for CustomScrollView on pre_seed_page.dart * refactor: remove unnecessary and stacked widgets and remove IntrinsicHeight & LayoutBuilder used for SingleChildScrollView, and replace it for CustomScrollView on wallet_seed_page.dart * fix: revert welcome_page.dart unwanted changes * fix: image expands more than needed * fix: fix image expands more than needed while testing on Linux build * Fix Scrolling behavior on Desktop and Overflow on Mobile --------- Co-authored-by: OmarHatem --- lib/src/screens/seed/pre_seed_page.dart | 66 +++--- lib/src/screens/seed/wallet_seed_page.dart | 212 ++++++++---------- lib/src/screens/welcome/welcome_page.dart | 238 ++++++++++----------- 3 files changed, 231 insertions(+), 285 deletions(-) diff --git a/lib/src/screens/seed/pre_seed_page.dart b/lib/src/screens/seed/pre_seed_page.dart index 5d0b0b804..6a8b6aa82 100644 --- a/lib/src/screens/seed/pre_seed_page.dart +++ b/lib/src/screens/seed/pre_seed_page.dart @@ -2,7 +2,6 @@ import 'package:cake_wallet/utils/responsive_layout_util.dart'; import 'package:cw_core/wallet_type.dart'; import 'package:cake_wallet/routes.dart'; import 'package:cake_wallet/themes/theme_base.dart'; -import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; import 'package:cake_wallet/generated/i18n.dart'; import 'package:cake_wallet/src/widgets/primary_button.dart'; @@ -37,46 +36,33 @@ class PreSeedPage extends BasePage { alignment: Alignment.center, padding: EdgeInsets.all(24), child: ConstrainedBox( - constraints: BoxConstraints(maxWidth: ResponsiveLayoutUtil.kDesktopMaxWidthConstraint), + constraints: BoxConstraints(maxWidth: ResponsiveLayoutUtil.kDesktopMaxWidthConstraint), child: Column( - children: [ - Flexible( - flex: 2, - child: AspectRatio( - aspectRatio: 1, - child: FittedBox(child: image, fit: BoxFit.contain))), - Flexible( - flex: 3, - child: Column( - mainAxisAlignment: MainAxisAlignment.spaceBetween, - children: [ - Padding( - padding: EdgeInsets.only(top: 70, left: 16, right: 16), - child: Text( - S - .of(context) - .pre_seed_description(wordsCount.toString()), - textAlign: TextAlign.center, - style: TextStyle( - fontSize: 14, - fontWeight: FontWeight.normal, - color: Theme.of(context) - .primaryTextTheme! - .bodySmall! - .color!), - ), - ), - PrimaryButton( - onPressed: () => Navigator.of(context) - .popAndPushNamed(Routes.seed, arguments: true), - text: S.of(context).pre_seed_button_text, - color: Theme.of(context) - .accentTextTheme! - .bodyLarge! - .color!, - textColor: Colors.white) - ], - )) + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + ConstrainedBox( + constraints: BoxConstraints( + maxHeight: MediaQuery.of(context).size.height * 0.3 + ), + child: AspectRatio(aspectRatio: 1, child: image), + ), + Padding( + padding: EdgeInsets.all(10), + child: Text( + S.of(context).pre_seed_description(wordsCount.toString()), + textAlign: TextAlign.center, + style: TextStyle( + fontSize: 14, + fontWeight: FontWeight.normal, + color: Theme.of(context).primaryTextTheme.bodySmall!.color!), + ), + ), + PrimaryButton( + onPressed: () => + Navigator.of(context).popAndPushNamed(Routes.seed, arguments: true), + text: S.of(context).pre_seed_button_text, + color: Theme.of(context).accentTextTheme!.bodyLarge!.color!, + textColor: Colors.white) ], ), ), diff --git a/lib/src/screens/seed/wallet_seed_page.dart b/lib/src/screens/seed/wallet_seed_page.dart index d0687aa74..f37a24dcd 100644 --- a/lib/src/screens/seed/wallet_seed_page.dart +++ b/lib/src/screens/seed/wallet_seed_page.dart @@ -52,8 +52,7 @@ class WalletSeedPage extends BasePage { } @override - Widget? leading(BuildContext context) => - isNewWalletCreated ? null: super.leading(context); + Widget? leading(BuildContext context) => isNewWalletCreated ? null : super.leading(context); @override Widget trailing(BuildContext context) { @@ -67,16 +66,11 @@ class WalletSeedPage extends BasePage { margin: EdgeInsets.only(left: 10), decoration: BoxDecoration( borderRadius: BorderRadius.all(Radius.circular(16)), - color: Theme.of(context) - .accentTextTheme! - .bodySmall! - .color!), + color: Theme.of(context).accentTextTheme.bodySmall!.color!), child: Text( S.of(context).seed_language_next, style: TextStyle( - fontSize: 14, - fontWeight: FontWeight.w600, - color: Palette.blueCraiola), + fontSize: 14, fontWeight: FontWeight.w600, color: Palette.blueCraiola), ), ), ) @@ -87,121 +81,99 @@ class WalletSeedPage extends BasePage { Widget body(BuildContext context) { final image = currentTheme.type == ThemeType.dark ? imageDark : imageLight; - return WillPopScope(onWillPop: () async => false, child: Container( - padding: EdgeInsets.all(24), - alignment: Alignment.center, - child: ConstrainedBox( - constraints: - BoxConstraints(maxWidth: ResponsiveLayoutUtil.kDesktopMaxWidthConstraint), - child: Column( - children: [ - Flexible( - flex: 2, - child: AspectRatio( - aspectRatio: 1, - child: FittedBox(child: image, fit: BoxFit.fill))), - Flexible( - flex: 3, - child: Column( - mainAxisAlignment: MainAxisAlignment.spaceBetween, + return WillPopScope( + onWillPop: () async => false, + child: Container( + padding: EdgeInsets.all(24), + alignment: Alignment.center, + child: ConstrainedBox( + constraints: BoxConstraints(maxWidth: ResponsiveLayoutUtil.kDesktopMaxWidthConstraint), + child: Column( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + ConstrainedBox( + constraints: + BoxConstraints(maxHeight: MediaQuery.of(context).size.height * 0.3), + child: AspectRatio(aspectRatio: 1, child: image), + ), + Observer(builder: (_) { + return Column( + crossAxisAlignment: CrossAxisAlignment.center, children: [ - Padding( - padding: EdgeInsets.only(top: 33), - child: Observer(builder: (_) { - return Column( - crossAxisAlignment: CrossAxisAlignment.center, - children: [ - Text( - walletSeedViewModel.name, - style: TextStyle( - fontSize: 20, - fontWeight: FontWeight.w600, - color: Theme.of(context) - .primaryTextTheme! - .titleLarge! - .color!), - ), - Padding( - padding: - EdgeInsets.only(top: 20, left: 16, right: 16), - child: Text( - walletSeedViewModel.seed, - textAlign: TextAlign.center, - style: TextStyle( - fontSize: 14, - fontWeight: FontWeight.normal, - color: Theme.of(context) - .primaryTextTheme! - .bodySmall! - .color!), - ), - ) - ], - ); - }), + Text( + walletSeedViewModel.name, + style: TextStyle( + fontSize: 20, + fontWeight: FontWeight.w600, + color: Theme.of(context).primaryTextTheme.titleLarge!.color!), ), - Column( - children: [ - isNewWalletCreated - ? Padding( - padding: EdgeInsets.only( - bottom: 52, left: 43, right: 43), - child: Text( - S.of(context).seed_reminder, - textAlign: TextAlign.center, - style: TextStyle( - fontSize: 12, - fontWeight: FontWeight.normal, - color: Theme.of(context) - .primaryTextTheme! - .labelSmall! - .color!), - ), - ) - : Offstage(), - Row( - mainAxisSize: MainAxisSize.max, - children: [ - Flexible( - child: Container( - padding: EdgeInsets.only(right: 8.0), - child: PrimaryButton( - onPressed: () { - ShareUtil.share( - text: walletSeedViewModel.seed, - context: context, - ); - }, - text: S.of(context).save, - color: Colors.green, - textColor: Colors.white), - )), - Flexible( - child: Container( - padding: EdgeInsets.only(left: 8.0), - child: Builder( - builder: (context) => PrimaryButton( - onPressed: () { - Clipboard.setData(ClipboardData( - text: walletSeedViewModel.seed)); - showBar(context, - S.of(context).copied_to_clipboard); - }, - text: S.of(context).copy, - color: Theme.of(context) - .accentTextTheme! - .bodyMedium! - .color!, - textColor: Colors.white)), - )) - ], - ) - ], + Padding( + padding: EdgeInsets.only(top: 20, left: 16, right: 16), + child: Text( + walletSeedViewModel.seed, + textAlign: TextAlign.center, + style: TextStyle( + fontSize: 14, + fontWeight: FontWeight.normal, + color: Theme.of(context).primaryTextTheme.bodySmall!.color!), + ), ) ], - )) - ], + ); + }), + Column( + children: [ + isNewWalletCreated + ? Padding( + padding: EdgeInsets.only(bottom: 43, left: 43, right: 43), + child: Text( + S.of(context).seed_reminder, + textAlign: TextAlign.center, + style: TextStyle( + fontSize: 12, + fontWeight: FontWeight.normal, + color: Theme.of(context).primaryTextTheme.labelSmall!.color!), + ), + ) + : Offstage(), + Row( + mainAxisSize: MainAxisSize.max, + children: [ + Flexible( + child: Container( + padding: EdgeInsets.only(right: 8.0), + child: PrimaryButton( + onPressed: () { + ShareUtil.share( + text: walletSeedViewModel.seed, + context: context, + ); + }, + text: S.of(context).save, + color: Colors.green, + textColor: Colors.white), + )), + Flexible( + child: Container( + padding: EdgeInsets.only(left: 8.0), + child: Builder( + builder: (context) => PrimaryButton( + onPressed: () { + Clipboard.setData( + ClipboardData(text: walletSeedViewModel.seed)); + showBar(context, S.of(context).copied_to_clipboard); + }, + text: S.of(context).copy, + color: Theme.of(context).accentTextTheme.bodyMedium!.color!, + textColor: Colors.white)), + )) + ], + ) + ], + ) + ], + ), ), - ))); + )); } } diff --git a/lib/src/screens/welcome/welcome_page.dart b/lib/src/screens/welcome/welcome_page.dart index 3d3e4c2e4..35537f063 100644 --- a/lib/src/screens/welcome/welcome_page.dart +++ b/lib/src/screens/welcome/welcome_page.dart @@ -46,145 +46,133 @@ class WelcomePage extends BasePage { @override Widget body(BuildContext context) { - final welcomeImage = currentTheme.type == ThemeType.dark ? welcomeImageDark : welcomeImageLight; + final welcomeImage = currentTheme.type == ThemeType.dark + ? welcomeImageDark + : welcomeImageLight; final newWalletImage = Image.asset('assets/images/new_wallet.png', height: 12, width: 12, color: Theme.of(context) - .accentTextTheme! - .headlineSmall! + .accentTextTheme.headlineSmall! .decorationColor!); final restoreWalletImage = Image.asset('assets/images/restore_wallet.png', height: 12, + width: 12, - color: Theme.of(context).primaryTextTheme!.titleLarge!.color!); + + color: Theme.of(context).primaryTextTheme.titleLarge!.color!); return WillPopScope( onWillPop: () async => false, child: Container( + alignment: Alignment.center, padding: EdgeInsets.only(top: 64, bottom: 24, left: 24, right: 24), - child: Center( - child: ConstrainedBox( - constraints: - BoxConstraints(maxWidth: ResponsiveLayoutUtil.kDesktopMaxWidthConstraint), - child: Column( - mainAxisAlignment: MainAxisAlignment.spaceBetween, - children: [ - Flexible( - flex: 2, - child: AspectRatio( - aspectRatio: aspectRatioImage, - child: FittedBox(child: welcomeImage, fit: BoxFit.fill))), - Flexible( - flex: 3, - child: Column( - mainAxisAlignment: MainAxisAlignment.spaceBetween, - children: [ - Column( - children: [ - Padding( - padding: EdgeInsets.only(top: 24), - child: Text( - S.of(context).welcome, - style: TextStyle( - fontSize: 18, - fontWeight: FontWeight.w500, - color: Theme.of(context) - .accentTextTheme! - .displayMedium! - .color, - ), - textAlign: TextAlign.center, - ), - ), - Padding( - padding: EdgeInsets.only(top: 5), - child: Text( - appTitle(context), - style: TextStyle( - fontSize: 36, - fontWeight: FontWeight.bold, - color: Theme.of(context) - .primaryTextTheme! - .titleLarge! - .color!, - ), - textAlign: TextAlign.center, - ), - ), - Padding( - padding: EdgeInsets.only(top: 5), - child: Text( - appDescription(context), - style: TextStyle( - fontSize: 16, - fontWeight: FontWeight.w500, - color: Theme.of(context) - .accentTextTheme! - .displayMedium! - .color, - ), - textAlign: TextAlign.center, - ), - ), - ], - ), - Column( - children: [ - Text( - S.of(context).please_make_selection, - style: TextStyle( - fontSize: 12, - fontWeight: FontWeight.normal, - color: Theme.of(context) - .accentTextTheme! - .displayMedium! - .color, - ), - textAlign: TextAlign.center, - ), - Padding( - padding: EdgeInsets.only(top: 24), - child: PrimaryImageButton( - onPressed: () => - Navigator.pushNamed(context, Routes.newWalletFromWelcome), - image: newWalletImage, - text: S.of(context).create_new, - color: Theme.of(context) - .accentTextTheme! - .titleSmall! - .decorationColor!, - textColor: Theme.of(context) - .accentTextTheme! - .headlineSmall! - .decorationColor!, - ), - ), - Padding( - padding: EdgeInsets.only(top: 10), - child: PrimaryImageButton( - onPressed: () { - Navigator.pushNamed(context, Routes.restoreOptions, - arguments: true); - }, - image: restoreWalletImage, - text: S.of(context).restore_wallet, - color: Theme.of(context) - .accentTextTheme! - .bodySmall! - .color!, - textColor: Theme.of(context) - .primaryTextTheme! - .titleLarge! - .color!), - ) - ], - ) - ], - )) - ], - ), + child: ConstrainedBox( + constraints: BoxConstraints( + maxWidth: ResponsiveLayoutUtil.kDesktopMaxWidthConstraint), + child: Column( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + Column( + children: [ + AspectRatio( + aspectRatio: aspectRatioImage, + child: FittedBox( + child: welcomeImage, fit: BoxFit.contain), + ), + Padding( + padding: EdgeInsets.only(top: 24), + child: Text( + S.of(context).welcome, + style: TextStyle( + fontSize: 18, + fontWeight: FontWeight.w500, + color: Theme.of(context) + .accentTextTheme.displayMedium! + .color!, + ), + textAlign: TextAlign.center, + ), + ), + Padding( + padding: EdgeInsets.only(top: 5), + child: Text( + appTitle(context), + style: TextStyle( + fontSize: 36, + fontWeight: FontWeight.bold, + color: Theme.of(context) + .primaryTextTheme.titleLarge! + .color!, + ), + textAlign: TextAlign.center, + ), + ), + Padding( + padding: EdgeInsets.only(top: 5), + child: Text( + appDescription(context), + style: TextStyle( + fontSize: 16, + fontWeight: FontWeight.w500, + color: Theme.of(context) + .accentTextTheme.displayMedium! + .color!, + ), + textAlign: TextAlign.center, + ), + ), + ], + ), + Column( + children: [ + Text( + S.of(context).please_make_selection, + style: TextStyle( + fontSize: 12, + fontWeight: FontWeight.normal, + color: Theme.of(context) + .accentTextTheme.displayMedium! + .color!, + ), + textAlign: TextAlign.center, + ), + Padding( + padding: EdgeInsets.only(top: 24), + child: PrimaryImageButton( + onPressed: () => Navigator.pushNamed( + context, Routes.newWalletFromWelcome), + image: newWalletImage, + text: S.of(context).create_new, + color: Theme.of(context) + .accentTextTheme.titleSmall! + .decorationColor!, + textColor: Theme.of(context) + .accentTextTheme.headlineSmall! + .decorationColor!, + ), + ), + Padding( + padding: EdgeInsets.only(top: 10), + child: PrimaryImageButton( + onPressed: () { + Navigator.pushNamed( + context, Routes.restoreOptions, + arguments: true); + }, + image: restoreWalletImage, + text: S.of(context).restore_wallet, + color: Theme.of(context) + .accentTextTheme.bodySmall! + .color!, + textColor: Theme.of(context) + .primaryTextTheme.titleLarge! + .color!), + ) + ], + ) + ], ), ))); }