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 <omarh.ismail1@gmail.com>
This commit is contained in:
Rafael Saes 2023-07-12 12:52:28 -03:00 committed by GitHub
parent d5642fa0ff
commit bb6dea0292
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 231 additions and 285 deletions

View file

@ -2,7 +2,6 @@ import 'package:cake_wallet/utils/responsive_layout_util.dart';
import 'package:cw_core/wallet_type.dart'; import 'package:cw_core/wallet_type.dart';
import 'package:cake_wallet/routes.dart'; import 'package:cake_wallet/routes.dart';
import 'package:cake_wallet/themes/theme_base.dart'; import 'package:cake_wallet/themes/theme_base.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:cake_wallet/generated/i18n.dart'; import 'package:cake_wallet/generated/i18n.dart';
import 'package:cake_wallet/src/widgets/primary_button.dart'; import 'package:cake_wallet/src/widgets/primary_button.dart';
@ -38,46 +37,33 @@ class PreSeedPage extends BasePage {
padding: EdgeInsets.all(24), padding: EdgeInsets.all(24),
child: ConstrainedBox( 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( child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween, mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [ children: <Widget>[
ConstrainedBox(
constraints: BoxConstraints(
maxHeight: MediaQuery.of(context).size.height * 0.3
),
child: AspectRatio(aspectRatio: 1, child: image),
),
Padding( Padding(
padding: EdgeInsets.only(top: 70, left: 16, right: 16), padding: EdgeInsets.all(10),
child: Text( child: Text(
S S.of(context).pre_seed_description(wordsCount.toString()),
.of(context)
.pre_seed_description(wordsCount.toString()),
textAlign: TextAlign.center, textAlign: TextAlign.center,
style: TextStyle( style: TextStyle(
fontSize: 14, fontSize: 14,
fontWeight: FontWeight.normal, fontWeight: FontWeight.normal,
color: Theme.of(context) color: Theme.of(context).primaryTextTheme.bodySmall!.color!),
.primaryTextTheme!
.bodySmall!
.color!),
), ),
), ),
PrimaryButton( PrimaryButton(
onPressed: () => Navigator.of(context) onPressed: () =>
.popAndPushNamed(Routes.seed, arguments: true), Navigator.of(context).popAndPushNamed(Routes.seed, arguments: true),
text: S.of(context).pre_seed_button_text, text: S.of(context).pre_seed_button_text,
color: Theme.of(context) color: Theme.of(context).accentTextTheme!.bodyLarge!.color!,
.accentTextTheme!
.bodyLarge!
.color!,
textColor: Colors.white) textColor: Colors.white)
], ],
))
],
), ),
), ),
)); ));

View file

@ -52,8 +52,7 @@ class WalletSeedPage extends BasePage {
} }
@override @override
Widget? leading(BuildContext context) => Widget? leading(BuildContext context) => isNewWalletCreated ? null : super.leading(context);
isNewWalletCreated ? null: super.leading(context);
@override @override
Widget trailing(BuildContext context) { Widget trailing(BuildContext context) {
@ -67,16 +66,11 @@ class WalletSeedPage extends BasePage {
margin: EdgeInsets.only(left: 10), margin: EdgeInsets.only(left: 10),
decoration: BoxDecoration( decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(16)), borderRadius: BorderRadius.all(Radius.circular(16)),
color: Theme.of(context) color: Theme.of(context).accentTextTheme.bodySmall!.color!),
.accentTextTheme!
.bodySmall!
.color!),
child: Text( child: Text(
S.of(context).seed_language_next, S.of(context).seed_language_next,
style: TextStyle( style: TextStyle(
fontSize: 14, fontSize: 14, fontWeight: FontWeight.w600, color: Palette.blueCraiola),
fontWeight: FontWeight.w600,
color: Palette.blueCraiola),
), ),
), ),
) )
@ -87,27 +81,22 @@ class WalletSeedPage extends BasePage {
Widget body(BuildContext context) { Widget body(BuildContext context) {
final image = currentTheme.type == ThemeType.dark ? imageDark : imageLight; final image = currentTheme.type == ThemeType.dark ? imageDark : imageLight;
return WillPopScope(onWillPop: () async => false, child: Container( return WillPopScope(
onWillPop: () async => false,
child: Container(
padding: EdgeInsets.all(24), padding: EdgeInsets.all(24),
alignment: Alignment.center, alignment: Alignment.center,
child: ConstrainedBox( child: ConstrainedBox(
constraints: constraints: BoxConstraints(maxWidth: ResponsiveLayoutUtil.kDesktopMaxWidthConstraint),
BoxConstraints(maxWidth: ResponsiveLayoutUtil.kDesktopMaxWidthConstraint),
child: Column(
children: <Widget>[
Flexible(
flex: 2,
child: AspectRatio(
aspectRatio: 1,
child: FittedBox(child: image, fit: BoxFit.fill))),
Flexible(
flex: 3,
child: Column( child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween, mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[ children: <Widget>[
Padding( ConstrainedBox(
padding: EdgeInsets.only(top: 33), constraints:
child: Observer(builder: (_) { BoxConstraints(maxHeight: MediaQuery.of(context).size.height * 0.3),
child: AspectRatio(aspectRatio: 1, child: image),
),
Observer(builder: (_) {
return Column( return Column(
crossAxisAlignment: CrossAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[ children: <Widget>[
@ -116,46 +105,34 @@ class WalletSeedPage extends BasePage {
style: TextStyle( style: TextStyle(
fontSize: 20, fontSize: 20,
fontWeight: FontWeight.w600, fontWeight: FontWeight.w600,
color: Theme.of(context) color: Theme.of(context).primaryTextTheme.titleLarge!.color!),
.primaryTextTheme!
.titleLarge!
.color!),
), ),
Padding( Padding(
padding: padding: EdgeInsets.only(top: 20, left: 16, right: 16),
EdgeInsets.only(top: 20, left: 16, right: 16),
child: Text( child: Text(
walletSeedViewModel.seed, walletSeedViewModel.seed,
textAlign: TextAlign.center, textAlign: TextAlign.center,
style: TextStyle( style: TextStyle(
fontSize: 14, fontSize: 14,
fontWeight: FontWeight.normal, fontWeight: FontWeight.normal,
color: Theme.of(context) color: Theme.of(context).primaryTextTheme.bodySmall!.color!),
.primaryTextTheme!
.bodySmall!
.color!),
), ),
) )
], ],
); );
}), }),
),
Column( Column(
children: <Widget>[ children: <Widget>[
isNewWalletCreated isNewWalletCreated
? Padding( ? Padding(
padding: EdgeInsets.only( padding: EdgeInsets.only(bottom: 43, left: 43, right: 43),
bottom: 52, left: 43, right: 43),
child: Text( child: Text(
S.of(context).seed_reminder, S.of(context).seed_reminder,
textAlign: TextAlign.center, textAlign: TextAlign.center,
style: TextStyle( style: TextStyle(
fontSize: 12, fontSize: 12,
fontWeight: FontWeight.normal, fontWeight: FontWeight.normal,
color: Theme.of(context) color: Theme.of(context).primaryTextTheme.labelSmall!.color!),
.primaryTextTheme!
.labelSmall!
.color!),
), ),
) )
: Offstage(), : Offstage(),
@ -182,16 +159,12 @@ class WalletSeedPage extends BasePage {
child: Builder( child: Builder(
builder: (context) => PrimaryButton( builder: (context) => PrimaryButton(
onPressed: () { onPressed: () {
Clipboard.setData(ClipboardData( Clipboard.setData(
text: walletSeedViewModel.seed)); ClipboardData(text: walletSeedViewModel.seed));
showBar<void>(context, showBar<void>(context, S.of(context).copied_to_clipboard);
S.of(context).copied_to_clipboard);
}, },
text: S.of(context).copy, text: S.of(context).copy,
color: Theme.of(context) color: Theme.of(context).accentTextTheme.bodyMedium!.color!,
.accentTextTheme!
.bodyMedium!
.color!,
textColor: Colors.white)), textColor: Colors.white)),
)) ))
], ],
@ -199,9 +172,8 @@ class WalletSeedPage extends BasePage {
], ],
) )
], ],
))
],
), ),
))); ),
));
} }
} }

View file

@ -46,43 +46,41 @@ class WelcomePage extends BasePage {
@override @override
Widget body(BuildContext context) { 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', final newWalletImage = Image.asset('assets/images/new_wallet.png',
height: 12, height: 12,
width: 12, width: 12,
color: Theme.of(context) color: Theme.of(context)
.accentTextTheme! .accentTextTheme.headlineSmall!
.headlineSmall!
.decorationColor!); .decorationColor!);
final restoreWalletImage = Image.asset('assets/images/restore_wallet.png', final restoreWalletImage = Image.asset('assets/images/restore_wallet.png',
height: 12, height: 12,
width: 12, width: 12,
color: Theme.of(context).primaryTextTheme!.titleLarge!.color!);
color: Theme.of(context).primaryTextTheme.titleLarge!.color!);
return WillPopScope( return WillPopScope(
onWillPop: () async => false, onWillPop: () async => false,
child: Container( child: Container(
alignment: Alignment.center,
padding: EdgeInsets.only(top: 64, bottom: 24, left: 24, right: 24), padding: EdgeInsets.only(top: 64, bottom: 24, left: 24, right: 24),
child: Center(
child: ConstrainedBox( child: ConstrainedBox(
constraints: constraints: BoxConstraints(
BoxConstraints(maxWidth: ResponsiveLayoutUtil.kDesktopMaxWidthConstraint), maxWidth: ResponsiveLayoutUtil.kDesktopMaxWidthConstraint),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Flexible(
flex: 2,
child: AspectRatio(
aspectRatio: aspectRatioImage,
child: FittedBox(child: welcomeImage, fit: BoxFit.fill))),
Flexible(
flex: 3,
child: Column( child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween, mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[ children: <Widget>[
Column( Column(
children: <Widget>[ children: <Widget>[
AspectRatio(
aspectRatio: aspectRatioImage,
child: FittedBox(
child: welcomeImage, fit: BoxFit.contain),
),
Padding( Padding(
padding: EdgeInsets.only(top: 24), padding: EdgeInsets.only(top: 24),
child: Text( child: Text(
@ -91,9 +89,8 @@ class WelcomePage extends BasePage {
fontSize: 18, fontSize: 18,
fontWeight: FontWeight.w500, fontWeight: FontWeight.w500,
color: Theme.of(context) color: Theme.of(context)
.accentTextTheme! .accentTextTheme.displayMedium!
.displayMedium! .color!,
.color,
), ),
textAlign: TextAlign.center, textAlign: TextAlign.center,
), ),
@ -106,8 +103,7 @@ class WelcomePage extends BasePage {
fontSize: 36, fontSize: 36,
fontWeight: FontWeight.bold, fontWeight: FontWeight.bold,
color: Theme.of(context) color: Theme.of(context)
.primaryTextTheme! .primaryTextTheme.titleLarge!
.titleLarge!
.color!, .color!,
), ),
textAlign: TextAlign.center, textAlign: TextAlign.center,
@ -121,9 +117,8 @@ class WelcomePage extends BasePage {
fontSize: 16, fontSize: 16,
fontWeight: FontWeight.w500, fontWeight: FontWeight.w500,
color: Theme.of(context) color: Theme.of(context)
.accentTextTheme! .accentTextTheme.displayMedium!
.displayMedium! .color!,
.color,
), ),
textAlign: TextAlign.center, textAlign: TextAlign.center,
), ),
@ -138,26 +133,23 @@ class WelcomePage extends BasePage {
fontSize: 12, fontSize: 12,
fontWeight: FontWeight.normal, fontWeight: FontWeight.normal,
color: Theme.of(context) color: Theme.of(context)
.accentTextTheme! .accentTextTheme.displayMedium!
.displayMedium! .color!,
.color,
), ),
textAlign: TextAlign.center, textAlign: TextAlign.center,
), ),
Padding( Padding(
padding: EdgeInsets.only(top: 24), padding: EdgeInsets.only(top: 24),
child: PrimaryImageButton( child: PrimaryImageButton(
onPressed: () => onPressed: () => Navigator.pushNamed(
Navigator.pushNamed(context, Routes.newWalletFromWelcome), context, Routes.newWalletFromWelcome),
image: newWalletImage, image: newWalletImage,
text: S.of(context).create_new, text: S.of(context).create_new,
color: Theme.of(context) color: Theme.of(context)
.accentTextTheme! .accentTextTheme.titleSmall!
.titleSmall!
.decorationColor!, .decorationColor!,
textColor: Theme.of(context) textColor: Theme.of(context)
.accentTextTheme! .accentTextTheme.headlineSmall!
.headlineSmall!
.decorationColor!, .decorationColor!,
), ),
), ),
@ -165,26 +157,22 @@ class WelcomePage extends BasePage {
padding: EdgeInsets.only(top: 10), padding: EdgeInsets.only(top: 10),
child: PrimaryImageButton( child: PrimaryImageButton(
onPressed: () { onPressed: () {
Navigator.pushNamed(context, Routes.restoreOptions, Navigator.pushNamed(
context, Routes.restoreOptions,
arguments: true); arguments: true);
}, },
image: restoreWalletImage, image: restoreWalletImage,
text: S.of(context).restore_wallet, text: S.of(context).restore_wallet,
color: Theme.of(context) color: Theme.of(context)
.accentTextTheme! .accentTextTheme.bodySmall!
.bodySmall!
.color!, .color!,
textColor: Theme.of(context) textColor: Theme.of(context)
.primaryTextTheme! .primaryTextTheme.titleLarge!
.titleLarge!
.color!), .color!),
) )
], ],
) )
], ],
))
],
),
), ),
))); )));
} }