@samitouri / QOSAMI-cakewallet / commits / bb6dea029

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>

Rafael Saes committed Jul 12, 2023 at 12:52 UTC bb6dea0292912dece0b3bb98d6877eb90d9bf213
3 files changed +231 -285
lib/src/screens/seed/pre_seed_page.dart
+26 -40
@@ -2,7 +2,6 @@ import 'package:cake_wallet/utils/responsive_layout_util.dart';
2 import 'package:cw_core/wallet_type.dart';
3 import 'package:cake_wallet/routes.dart';
4 import 'package:cake_wallet/themes/theme_base.dart';
5 -import 'package:flutter/cupertino.dart';
5 import 'package:flutter/material.dart';
6 import 'package:cake_wallet/generated/i18n.dart';
7 import 'package:cake_wallet/src/widgets/primary_button.dart';
@@ -37,46 +36,33 @@ class PreSeedPage extends BasePage {
36 alignment: Alignment.center,
37 padding: EdgeInsets.all(24),
38 child: ConstrainedBox(
40 - constraints: BoxConstraints(maxWidth: ResponsiveLayoutUtil.kDesktopMaxWidthConstraint),
39 + constraints: BoxConstraints(maxWidth: ResponsiveLayoutUtil.kDesktopMaxWidthConstraint),
40 child: Column(
42 - children: [
43 - Flexible(
44 - flex: 2,
45 - child: AspectRatio(
46 - aspectRatio: 1,
47 - child: FittedBox(child: image, fit: BoxFit.contain))),
48 - Flexible(
49 - flex: 3,
50 - child: Column(
51 - mainAxisAlignment: MainAxisAlignment.spaceBetween,
52 - children: [
53 - Padding(
54 - padding: EdgeInsets.only(top: 70, left: 16, right: 16),
55 - child: Text(
56 - S
57 - .of(context)
58 - .pre_seed_description(wordsCount.toString()),
59 - textAlign: TextAlign.center,
60 - style: TextStyle(
61 - fontSize: 14,
62 - fontWeight: FontWeight.normal,
63 - color: Theme.of(context)
64 - .primaryTextTheme!
65 - .bodySmall!
66 - .color!),
67 - ),
68 - ),
69 - PrimaryButton(
70 - onPressed: () => Navigator.of(context)
71 - .popAndPushNamed(Routes.seed, arguments: true),
72 - text: S.of(context).pre_seed_button_text,
73 - color: Theme.of(context)
74 - .accentTextTheme!
75 - .bodyLarge!
76 - .color!,
77 - textColor: Colors.white)
78 - ],
79 - ))
41 + mainAxisAlignment: MainAxisAlignment.spaceBetween,
42 + children: <Widget>[
43 + ConstrainedBox(
44 + constraints: BoxConstraints(
45 + maxHeight: MediaQuery.of(context).size.height * 0.3
46 + ),
47 + child: AspectRatio(aspectRatio: 1, child: image),
48 + ),
49 + Padding(
50 + padding: EdgeInsets.all(10),
51 + child: Text(
52 + S.of(context).pre_seed_description(wordsCount.toString()),
53 + textAlign: TextAlign.center,
54 + style: TextStyle(
55 + fontSize: 14,
56 + fontWeight: FontWeight.normal,
57 + color: Theme.of(context).primaryTextTheme.bodySmall!.color!),
58 + ),
59 + ),
60 + PrimaryButton(
61 + onPressed: () =>
62 + Navigator.of(context).popAndPushNamed(Routes.seed, arguments: true),
63 + text: S.of(context).pre_seed_button_text,
64 + color: Theme.of(context).accentTextTheme!.bodyLarge!.color!,
65 + textColor: Colors.white)
66 ],
67 ),
68 ),
lib/src/screens/seed/wallet_seed_page.dart
+92 -120
@@ -52,8 +52,7 @@ class WalletSeedPage extends BasePage {
52 }
53
54 @override
55 - Widget? leading(BuildContext context) =>
56 - isNewWalletCreated ? null: super.leading(context);
55 + Widget? leading(BuildContext context) => isNewWalletCreated ? null : super.leading(context);
56
57 @override
58 Widget trailing(BuildContext context) {
@@ -67,16 +66,11 @@ class WalletSeedPage extends BasePage {
66 margin: EdgeInsets.only(left: 10),
67 decoration: BoxDecoration(
68 borderRadius: BorderRadius.all(Radius.circular(16)),
70 - color: Theme.of(context)
71 - .accentTextTheme!
72 - .bodySmall!
73 - .color!),
69 + color: Theme.of(context).accentTextTheme.bodySmall!.color!),
70 child: Text(
71 S.of(context).seed_language_next,
72 style: TextStyle(
77 - fontSize: 14,
78 - fontWeight: FontWeight.w600,
79 - color: Palette.blueCraiola),
73 + fontSize: 14, fontWeight: FontWeight.w600, color: Palette.blueCraiola),
74 ),
75 ),
76 )
@@ -87,121 +81,99 @@ class WalletSeedPage extends BasePage {
81 Widget body(BuildContext context) {
82 final image = currentTheme.type == ThemeType.dark ? imageDark : imageLight;
83
90 - return WillPopScope(onWillPop: () async => false, child: Container(
91 - padding: EdgeInsets.all(24),
92 - alignment: Alignment.center,
93 - child: ConstrainedBox(
94 - constraints:
95 - BoxConstraints(maxWidth: ResponsiveLayoutUtil.kDesktopMaxWidthConstraint),
96 - child: Column(
97 - children: <Widget>[
98 - Flexible(
99 - flex: 2,
100 - child: AspectRatio(
101 - aspectRatio: 1,
102 - child: FittedBox(child: image, fit: BoxFit.fill))),
103 - Flexible(
104 - flex: 3,
105 - child: Column(
106 - mainAxisAlignment: MainAxisAlignment.spaceBetween,
84 + return WillPopScope(
85 + onWillPop: () async => false,
86 + child: Container(
87 + padding: EdgeInsets.all(24),
88 + alignment: Alignment.center,
89 + child: ConstrainedBox(
90 + constraints: BoxConstraints(maxWidth: ResponsiveLayoutUtil.kDesktopMaxWidthConstraint),
91 + child: Column(
92 + mainAxisAlignment: MainAxisAlignment.spaceBetween,
93 + children: <Widget>[
94 + ConstrainedBox(
95 + constraints:
96 + BoxConstraints(maxHeight: MediaQuery.of(context).size.height * 0.3),
97 + child: AspectRatio(aspectRatio: 1, child: image),
98 + ),
99 + Observer(builder: (_) {
100 + return Column(
101 + crossAxisAlignment: CrossAxisAlignment.center,
102 children: <Widget>[
108 - Padding(
109 - padding: EdgeInsets.only(top: 33),
110 - child: Observer(builder: (_) {
111 - return Column(
112 - crossAxisAlignment: CrossAxisAlignment.center,
113 - children: <Widget>[
114 - Text(
115 - walletSeedViewModel.name,
116 - style: TextStyle(
117 - fontSize: 20,
118 - fontWeight: FontWeight.w600,
119 - color: Theme.of(context)
120 - .primaryTextTheme!
121 - .titleLarge!
122 - .color!),
123 - ),
124 - Padding(
125 - padding:
126 - EdgeInsets.only(top: 20, left: 16, right: 16),
127 - child: Text(
128 - walletSeedViewModel.seed,
129 - textAlign: TextAlign.center,
130 - style: TextStyle(
131 - fontSize: 14,
132 - fontWeight: FontWeight.normal,
133 - color: Theme.of(context)
134 - .primaryTextTheme!
135 - .bodySmall!
136 - .color!),
137 - ),
138 - )
139 - ],
140 - );
141 - }),
103 + Text(
104 + walletSeedViewModel.name,
105 + style: TextStyle(
106 + fontSize: 20,
107 + fontWeight: FontWeight.w600,
108 + color: Theme.of(context).primaryTextTheme.titleLarge!.color!),
109 ),
143 - Column(
144 - children: <Widget>[
145 - isNewWalletCreated
146 - ? Padding(
147 - padding: EdgeInsets.only(
148 - bottom: 52, left: 43, right: 43),
149 - child: Text(
150 - S.of(context).seed_reminder,
151 - textAlign: TextAlign.center,
152 - style: TextStyle(
153 - fontSize: 12,
154 - fontWeight: FontWeight.normal,
155 - color: Theme.of(context)
156 - .primaryTextTheme!
157 - .labelSmall!
158 - .color!),
159 - ),
160 - )
161 - : Offstage(),
162 - Row(
163 - mainAxisSize: MainAxisSize.max,
164 - children: <Widget>[
165 - Flexible(
166 - child: Container(
167 - padding: EdgeInsets.only(right: 8.0),
168 - child: PrimaryButton(
169 - onPressed: () {
170 - ShareUtil.share(
171 - text: walletSeedViewModel.seed,
172 - context: context,
173 - );
174 - },
175 - text: S.of(context).save,
176 - color: Colors.green,
177 - textColor: Colors.white),
178 - )),
179 - Flexible(
180 - child: Container(
181 - padding: EdgeInsets.only(left: 8.0),
182 - child: Builder(
183 - builder: (context) => PrimaryButton(
184 - onPressed: () {
185 - Clipboard.setData(ClipboardData(
186 - text: walletSeedViewModel.seed));
187 - showBar<void>(context,
188 - S.of(context).copied_to_clipboard);
189 - },
190 - text: S.of(context).copy,
191 - color: Theme.of(context)
192 - .accentTextTheme!
193 - .bodyMedium!
194 - .color!,
195 - textColor: Colors.white)),
196 - ))
197 - ],
198 - )
199 - ],
110 + Padding(
111 + padding: EdgeInsets.only(top: 20, left: 16, right: 16),
112 + child: Text(
113 + walletSeedViewModel.seed,
114 + textAlign: TextAlign.center,
115 + style: TextStyle(
116 + fontSize: 14,
117 + fontWeight: FontWeight.normal,
118 + color: Theme.of(context).primaryTextTheme.bodySmall!.color!),
119 + ),
120 )
121 ],
202 - ))
203 - ],
122 + );
123 + }),
124 + Column(
125 + children: <Widget>[
126 + isNewWalletCreated
127 + ? Padding(
128 + padding: EdgeInsets.only(bottom: 43, left: 43, right: 43),
129 + child: Text(
130 + S.of(context).seed_reminder,
131 + textAlign: TextAlign.center,
132 + style: TextStyle(
133 + fontSize: 12,
134 + fontWeight: FontWeight.normal,
135 + color: Theme.of(context).primaryTextTheme.labelSmall!.color!),
136 + ),
137 + )
138 + : Offstage(),
139 + Row(
140 + mainAxisSize: MainAxisSize.max,
141 + children: <Widget>[
142 + Flexible(
143 + child: Container(
144 + padding: EdgeInsets.only(right: 8.0),
145 + child: PrimaryButton(
146 + onPressed: () {
147 + ShareUtil.share(
148 + text: walletSeedViewModel.seed,
149 + context: context,
150 + );
151 + },
152 + text: S.of(context).save,
153 + color: Colors.green,
154 + textColor: Colors.white),
155 + )),
156 + Flexible(
157 + child: Container(
158 + padding: EdgeInsets.only(left: 8.0),
159 + child: Builder(
160 + builder: (context) => PrimaryButton(
161 + onPressed: () {
162 + Clipboard.setData(
163 + ClipboardData(text: walletSeedViewModel.seed));
164 + showBar<void>(context, S.of(context).copied_to_clipboard);
165 + },
166 + text: S.of(context).copy,
167 + color: Theme.of(context).accentTextTheme.bodyMedium!.color!,
168 + textColor: Colors.white)),
169 + ))
170 + ],
171 + )
172 + ],
173 + )
174 + ],
175 + ),
176 ),
205 - )));
177 + ));
178 }
179 }
lib/src/screens/welcome/welcome_page.dart
+113 -125
@@ -46,145 +46,133 @@ class WelcomePage extends BasePage {
46
47 @override
48 Widget body(BuildContext context) {
49 - final welcomeImage = currentTheme.type == ThemeType.dark ? welcomeImageDark : welcomeImageLight;
49 + final welcomeImage = currentTheme.type == ThemeType.dark
50 + ? welcomeImageDark
51 + : welcomeImageLight;
52
53 final newWalletImage = Image.asset('assets/images/new_wallet.png',
54 height: 12,
55 width: 12,
56 color: Theme.of(context)
55 - .accentTextTheme!
56 - .headlineSmall!
57 + .accentTextTheme.headlineSmall!
58 .decorationColor!);
59 final restoreWalletImage = Image.asset('assets/images/restore_wallet.png',
60 height: 12,
61 +
62 width: 12,
61 - color: Theme.of(context).primaryTextTheme!.titleLarge!.color!);
63 +
64 + color: Theme.of(context).primaryTextTheme.titleLarge!.color!);
65
66 return WillPopScope(
67 onWillPop: () async => false,
68 child: Container(
69 + alignment: Alignment.center,
70 padding: EdgeInsets.only(top: 64, bottom: 24, left: 24, right: 24),
67 - child: Center(
68 - child: ConstrainedBox(
69 - constraints:
70 - BoxConstraints(maxWidth: ResponsiveLayoutUtil.kDesktopMaxWidthConstraint),
71 - child: Column(
72 - mainAxisAlignment: MainAxisAlignment.spaceBetween,
73 - children: <Widget>[
74 - Flexible(
75 - flex: 2,
76 - child: AspectRatio(
77 - aspectRatio: aspectRatioImage,
78 - child: FittedBox(child: welcomeImage, fit: BoxFit.fill))),
79 - Flexible(
80 - flex: 3,
81 - child: Column(
82 - mainAxisAlignment: MainAxisAlignment.spaceBetween,
83 - children: <Widget>[
84 - Column(
85 - children: <Widget>[
86 - Padding(
87 - padding: EdgeInsets.only(top: 24),
88 - child: Text(
89 - S.of(context).welcome,
90 - style: TextStyle(
91 - fontSize: 18,
92 - fontWeight: FontWeight.w500,
93 - color: Theme.of(context)
94 - .accentTextTheme!
95 - .displayMedium!
96 - .color,
97 - ),
98 - textAlign: TextAlign.center,
99 - ),
100 - ),
101 - Padding(
102 - padding: EdgeInsets.only(top: 5),
103 - child: Text(
104 - appTitle(context),
105 - style: TextStyle(
106 - fontSize: 36,
107 - fontWeight: FontWeight.bold,
108 - color: Theme.of(context)
109 - .primaryTextTheme!
110 - .titleLarge!
111 - .color!,
112 - ),
113 - textAlign: TextAlign.center,
114 - ),
115 - ),
116 - Padding(
117 - padding: EdgeInsets.only(top: 5),
118 - child: Text(
119 - appDescription(context),
120 - style: TextStyle(
121 - fontSize: 16,
122 - fontWeight: FontWeight.w500,
123 - color: Theme.of(context)
124 - .accentTextTheme!
125 - .displayMedium!
126 - .color,
127 - ),
128 - textAlign: TextAlign.center,
129 - ),
130 - ),
131 - ],
132 - ),
133 - Column(
134 - children: <Widget>[
135 - Text(
136 - S.of(context).please_make_selection,
137 - style: TextStyle(
138 - fontSize: 12,
139 - fontWeight: FontWeight.normal,
140 - color: Theme.of(context)
141 - .accentTextTheme!
142 - .displayMedium!
143 - .color,
144 - ),
145 - textAlign: TextAlign.center,
146 - ),
147 - Padding(
148 - padding: EdgeInsets.only(top: 24),
149 - child: PrimaryImageButton(
150 - onPressed: () =>
151 - Navigator.pushNamed(context, Routes.newWalletFromWelcome),
152 - image: newWalletImage,
153 - text: S.of(context).create_new,
154 - color: Theme.of(context)
155 - .accentTextTheme!
156 - .titleSmall!
157 - .decorationColor!,
158 - textColor: Theme.of(context)
159 - .accentTextTheme!
160 - .headlineSmall!
161 - .decorationColor!,
162 - ),
163 - ),
164 - Padding(
165 - padding: EdgeInsets.only(top: 10),
166 - child: PrimaryImageButton(
167 - onPressed: () {
168 - Navigator.pushNamed(context, Routes.restoreOptions,
169 - arguments: true);
170 - },
171 - image: restoreWalletImage,
172 - text: S.of(context).restore_wallet,
173 - color: Theme.of(context)
174 - .accentTextTheme!
175 - .bodySmall!
176 - .color!,
177 - textColor: Theme.of(context)
178 - .primaryTextTheme!
179 - .titleLarge!
180 - .color!),
181 - )
182 - ],
183 - )
184 - ],
185 - ))
186 - ],
187 - ),
71 + child: ConstrainedBox(
72 + constraints: BoxConstraints(
73 + maxWidth: ResponsiveLayoutUtil.kDesktopMaxWidthConstraint),
74 + child: Column(
75 + mainAxisAlignment: MainAxisAlignment.spaceBetween,
76 + children: <Widget>[
77 + Column(
78 + children: <Widget>[
79 + AspectRatio(
80 + aspectRatio: aspectRatioImage,
81 + child: FittedBox(
82 + child: welcomeImage, fit: BoxFit.contain),
83 + ),
84 + Padding(
85 + padding: EdgeInsets.only(top: 24),
86 + child: Text(
87 + S.of(context).welcome,
88 + style: TextStyle(
89 + fontSize: 18,
90 + fontWeight: FontWeight.w500,
91 + color: Theme.of(context)
92 + .accentTextTheme.displayMedium!
93 + .color!,
94 + ),
95 + textAlign: TextAlign.center,
96 + ),
97 + ),
98 + Padding(
99 + padding: EdgeInsets.only(top: 5),
100 + child: Text(
101 + appTitle(context),
102 + style: TextStyle(
103 + fontSize: 36,
104 + fontWeight: FontWeight.bold,
105 + color: Theme.of(context)
106 + .primaryTextTheme.titleLarge!
107 + .color!,
108 + ),
109 + textAlign: TextAlign.center,
110 + ),
111 + ),
112 + Padding(
113 + padding: EdgeInsets.only(top: 5),
114 + child: Text(
115 + appDescription(context),
116 + style: TextStyle(
117 + fontSize: 16,
118 + fontWeight: FontWeight.w500,
119 + color: Theme.of(context)
120 + .accentTextTheme.displayMedium!
121 + .color!,
122 + ),
123 + textAlign: TextAlign.center,
124 + ),
125 + ),
126 + ],
127 + ),
128 + Column(
129 + children: <Widget>[
130 + Text(
131 + S.of(context).please_make_selection,
132 + style: TextStyle(
133 + fontSize: 12,
134 + fontWeight: FontWeight.normal,
135 + color: Theme.of(context)
136 + .accentTextTheme.displayMedium!
137 + .color!,
138 + ),
139 + textAlign: TextAlign.center,
140 + ),
141 + Padding(
142 + padding: EdgeInsets.only(top: 24),
143 + child: PrimaryImageButton(
144 + onPressed: () => Navigator.pushNamed(
145 + context, Routes.newWalletFromWelcome),
146 + image: newWalletImage,
147 + text: S.of(context).create_new,
148 + color: Theme.of(context)
149 + .accentTextTheme.titleSmall!
150 + .decorationColor!,
151 + textColor: Theme.of(context)
152 + .accentTextTheme.headlineSmall!
153 + .decorationColor!,
154 + ),
155 + ),
156 + Padding(
157 + padding: EdgeInsets.only(top: 10),
158 + child: PrimaryImageButton(
159 + onPressed: () {
160 + Navigator.pushNamed(
161 + context, Routes.restoreOptions,
162 + arguments: true);
163 + },
164 + image: restoreWalletImage,
165 + text: S.of(context).restore_wallet,
166 + color: Theme.of(context)
167 + .accentTextTheme.bodySmall!
168 + .color!,
169 + textColor: Theme.of(context)
170 + .primaryTextTheme.titleLarge!
171 + .color!),
172 + )
173 + ],
174 + )
175 + ],
176 ),
177 )));
178 }