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';
@ -37,46 +36,33 @@ class PreSeedPage extends BasePage {
alignment: Alignment.center, alignment: Alignment.center,
padding: EdgeInsets.all(24), padding: EdgeInsets.all(24),
child: ConstrainedBox( child: ConstrainedBox(
constraints: BoxConstraints(maxWidth: ResponsiveLayoutUtil.kDesktopMaxWidthConstraint), constraints: BoxConstraints(maxWidth: ResponsiveLayoutUtil.kDesktopMaxWidthConstraint),
child: Column( child: Column(
children: [ mainAxisAlignment: MainAxisAlignment.spaceBetween,
Flexible( children: <Widget>[
flex: 2, ConstrainedBox(
child: AspectRatio( constraints: BoxConstraints(
aspectRatio: 1, maxHeight: MediaQuery.of(context).size.height * 0.3
child: FittedBox(child: image, fit: BoxFit.contain))), ),
Flexible( child: AspectRatio(aspectRatio: 1, child: image),
flex: 3, ),
child: Column( Padding(
mainAxisAlignment: MainAxisAlignment.spaceBetween, padding: EdgeInsets.all(10),
children: [ child: Text(
Padding( S.of(context).pre_seed_description(wordsCount.toString()),
padding: EdgeInsets.only(top: 70, left: 16, right: 16), textAlign: TextAlign.center,
child: Text( style: TextStyle(
S fontSize: 14,
.of(context) fontWeight: FontWeight.normal,
.pre_seed_description(wordsCount.toString()), color: Theme.of(context).primaryTextTheme.bodySmall!.color!),
textAlign: TextAlign.center, ),
style: TextStyle( ),
fontSize: 14, PrimaryButton(
fontWeight: FontWeight.normal, onPressed: () =>
color: Theme.of(context) Navigator.of(context).popAndPushNamed(Routes.seed, arguments: true),
.primaryTextTheme! text: S.of(context).pre_seed_button_text,
.bodySmall! color: Theme.of(context).accentTextTheme!.bodyLarge!.color!,
.color!), textColor: Colors.white)
),
),
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)
],
))
], ],
), ),
), ),

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,121 +81,99 @@ 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(
padding: EdgeInsets.all(24), onWillPop: () async => false,
alignment: Alignment.center, child: Container(
child: ConstrainedBox( padding: EdgeInsets.all(24),
constraints: alignment: Alignment.center,
BoxConstraints(maxWidth: ResponsiveLayoutUtil.kDesktopMaxWidthConstraint), child: ConstrainedBox(
child: Column( constraints: BoxConstraints(maxWidth: ResponsiveLayoutUtil.kDesktopMaxWidthConstraint),
children: <Widget>[ child: Column(
Flexible( mainAxisAlignment: MainAxisAlignment.spaceBetween,
flex: 2, children: <Widget>[
child: AspectRatio( ConstrainedBox(
aspectRatio: 1, constraints:
child: FittedBox(child: image, fit: BoxFit.fill))), BoxConstraints(maxHeight: MediaQuery.of(context).size.height * 0.3),
Flexible( child: AspectRatio(aspectRatio: 1, child: image),
flex: 3, ),
child: Column( Observer(builder: (_) {
mainAxisAlignment: MainAxisAlignment.spaceBetween, return Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[ children: <Widget>[
Padding( Text(
padding: EdgeInsets.only(top: 33), walletSeedViewModel.name,
child: Observer(builder: (_) { style: TextStyle(
return Column( fontSize: 20,
crossAxisAlignment: CrossAxisAlignment.center, fontWeight: FontWeight.w600,
children: <Widget>[ color: Theme.of(context).primaryTextTheme.titleLarge!.color!),
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!),
),
)
],
);
}),
), ),
Column( Padding(
children: <Widget>[ padding: EdgeInsets.only(top: 20, left: 16, right: 16),
isNewWalletCreated child: Text(
? Padding( walletSeedViewModel.seed,
padding: EdgeInsets.only( textAlign: TextAlign.center,
bottom: 52, left: 43, right: 43), style: TextStyle(
child: Text( fontSize: 14,
S.of(context).seed_reminder, fontWeight: FontWeight.normal,
textAlign: TextAlign.center, color: Theme.of(context).primaryTextTheme.bodySmall!.color!),
style: TextStyle( ),
fontSize: 12,
fontWeight: FontWeight.normal,
color: Theme.of(context)
.primaryTextTheme!
.labelSmall!
.color!),
),
)
: Offstage(),
Row(
mainAxisSize: MainAxisSize.max,
children: <Widget>[
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<void>(context,
S.of(context).copied_to_clipboard);
},
text: S.of(context).copy,
color: Theme.of(context)
.accentTextTheme!
.bodyMedium!
.color!,
textColor: Colors.white)),
))
],
)
],
) )
], ],
)) );
], }),
Column(
children: <Widget>[
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: <Widget>[
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<void>(context, S.of(context).copied_to_clipboard);
},
text: S.of(context).copy,
color: Theme.of(context).accentTextTheme.bodyMedium!.color!,
textColor: Colors.white)),
))
],
)
],
)
],
),
), ),
))); ));
} }
} }

View file

@ -46,145 +46,133 @@ 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: BoxConstraints(
constraints: maxWidth: ResponsiveLayoutUtil.kDesktopMaxWidthConstraint),
BoxConstraints(maxWidth: ResponsiveLayoutUtil.kDesktopMaxWidthConstraint), child: Column(
child: Column( mainAxisAlignment: MainAxisAlignment.spaceBetween,
mainAxisAlignment: MainAxisAlignment.spaceBetween, children: <Widget>[
children: <Widget>[ Column(
Flexible( children: <Widget>[
flex: 2, AspectRatio(
child: AspectRatio( aspectRatio: aspectRatioImage,
aspectRatio: aspectRatioImage, child: FittedBox(
child: FittedBox(child: welcomeImage, fit: BoxFit.fill))), child: welcomeImage, fit: BoxFit.contain),
Flexible( ),
flex: 3, Padding(
child: Column( padding: EdgeInsets.only(top: 24),
mainAxisAlignment: MainAxisAlignment.spaceBetween, child: Text(
children: <Widget>[ S.of(context).welcome,
Column( style: TextStyle(
children: <Widget>[ fontSize: 18,
Padding( fontWeight: FontWeight.w500,
padding: EdgeInsets.only(top: 24), color: Theme.of(context)
child: Text( .accentTextTheme.displayMedium!
S.of(context).welcome, .color!,
style: TextStyle( ),
fontSize: 18, textAlign: TextAlign.center,
fontWeight: FontWeight.w500, ),
color: Theme.of(context) ),
.accentTextTheme! Padding(
.displayMedium! padding: EdgeInsets.only(top: 5),
.color, child: Text(
), appTitle(context),
textAlign: TextAlign.center, style: TextStyle(
), fontSize: 36,
), fontWeight: FontWeight.bold,
Padding( color: Theme.of(context)
padding: EdgeInsets.only(top: 5), .primaryTextTheme.titleLarge!
child: Text( .color!,
appTitle(context), ),
style: TextStyle( textAlign: TextAlign.center,
fontSize: 36, ),
fontWeight: FontWeight.bold, ),
color: Theme.of(context) Padding(
.primaryTextTheme! padding: EdgeInsets.only(top: 5),
.titleLarge! child: Text(
.color!, appDescription(context),
), style: TextStyle(
textAlign: TextAlign.center, fontSize: 16,
), fontWeight: FontWeight.w500,
), color: Theme.of(context)
Padding( .accentTextTheme.displayMedium!
padding: EdgeInsets.only(top: 5), .color!,
child: Text( ),
appDescription(context), textAlign: TextAlign.center,
style: TextStyle( ),
fontSize: 16, ),
fontWeight: FontWeight.w500, ],
color: Theme.of(context) ),
.accentTextTheme! Column(
.displayMedium! children: <Widget>[
.color, Text(
), S.of(context).please_make_selection,
textAlign: TextAlign.center, style: TextStyle(
), fontSize: 12,
), fontWeight: FontWeight.normal,
], color: Theme.of(context)
), .accentTextTheme.displayMedium!
Column( .color!,
children: <Widget>[ ),
Text( textAlign: TextAlign.center,
S.of(context).please_make_selection, ),
style: TextStyle( Padding(
fontSize: 12, padding: EdgeInsets.only(top: 24),
fontWeight: FontWeight.normal, child: PrimaryImageButton(
color: Theme.of(context) onPressed: () => Navigator.pushNamed(
.accentTextTheme! context, Routes.newWalletFromWelcome),
.displayMedium! image: newWalletImage,
.color, text: S.of(context).create_new,
), color: Theme.of(context)
textAlign: TextAlign.center, .accentTextTheme.titleSmall!
), .decorationColor!,
Padding( textColor: Theme.of(context)
padding: EdgeInsets.only(top: 24), .accentTextTheme.headlineSmall!
child: PrimaryImageButton( .decorationColor!,
onPressed: () => ),
Navigator.pushNamed(context, Routes.newWalletFromWelcome), ),
image: newWalletImage, Padding(
text: S.of(context).create_new, padding: EdgeInsets.only(top: 10),
color: Theme.of(context) child: PrimaryImageButton(
.accentTextTheme! onPressed: () {
.titleSmall! Navigator.pushNamed(
.decorationColor!, context, Routes.restoreOptions,
textColor: Theme.of(context) arguments: true);
.accentTextTheme! },
.headlineSmall! image: restoreWalletImage,
.decorationColor!, text: S.of(context).restore_wallet,
), color: Theme.of(context)
), .accentTextTheme.bodySmall!
Padding( .color!,
padding: EdgeInsets.only(top: 10), textColor: Theme.of(context)
child: PrimaryImageButton( .primaryTextTheme.titleLarge!
onPressed: () { .color!),
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!),
)
],
)
],
))
],
),
), ),
))); )));
} }