Ecosystem/cake_wallet
1
0
Fork 0
mirror of https://github.com/cake-tech/cake_wallet.git synced 2025-01-18 16:55:58 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Fix alignment in create and restore wallet screens

Browse source
This commit is contained in:
Godwin Asuquo 2023-02-22 16:17:26 +02:00
parent c05d70b118
commit c41b6b7f89
7 changed files with 229 additions and 195 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
lib/src/screens/base_page.dart
View file

@ -35,6 +35,8 @@ abstract class BasePage extends StatelessWidget {
Widget? get endDrawer => null; Widget? get endDrawer => null;
bool get canUseDesktopAppBar => false;
AppBarStyle get appBarStyle => AppBarStyle.regular; AppBarStyle get appBarStyle => AppBarStyle.regular;
Widget Function(BuildContext, Widget)? get rootWrapper => null; Widget Function(BuildContext, Widget)? get rootWrapper => null;
@ -97,7 +99,8 @@ abstract class BasePage extends StatelessWidget {
ObstructingPreferredSizeWidget appBar(BuildContext context) { ObstructingPreferredSizeWidget appBar(BuildContext context) {
final appBarColor = currentTheme.type == ThemeType.dark final appBarColor = currentTheme.type == ThemeType.dark
? backgroundDarkColor : backgroundLightColor; ? backgroundDarkColor : backgroundLightColor;
final useDesktopAppbar = !ResponsiveLayoutUtil.instance.isMobile(context) && canUseDesktopAppBar;
switch (appBarStyle) { switch (appBarStyle) {
case AppBarStyle.regular: case AppBarStyle.regular:
// FIX-ME: NavBar no context // FIX-ME: NavBar no context
@ -106,6 +109,7 @@ abstract class BasePage extends StatelessWidget {
leading: leading(context), leading: leading(context),
middle: middle(context), middle: middle(context),
trailing: trailing(context), trailing: trailing(context),
useDesktopAppbar: useDesktopAppbar,
backgroundColor: appBarColor); backgroundColor: appBarColor);
case AppBarStyle.withShadow: case AppBarStyle.withShadow:
@ -115,6 +119,7 @@ abstract class BasePage extends StatelessWidget {
leading: leading(context), leading: leading(context),
middle: middle(context), middle: middle(context),
trailing: trailing(context), trailing: trailing(context),
useDesktopAppbar: useDesktopAppbar,
backgroundColor: appBarColor); backgroundColor: appBarColor);
case AppBarStyle.transparent: case AppBarStyle.transparent:
@ -132,6 +137,7 @@ abstract class BasePage extends StatelessWidget {
// context: context, // context: context,
leading: leading(context), leading: leading(context),
middle: middle(context), middle: middle(context),
useDesktopAppbar: useDesktopAppbar,
trailing: trailing(context), trailing: trailing(context),
backgroundColor: appBarColor); backgroundColor: appBarColor);
} }

3
lib/src/screens/dashboard/desktop_widgets/desktop_sidebar_wrapper.dart
View file

@ -25,6 +25,9 @@ class DesktopSidebarWrapper extends BasePage {
required this.dashboardViewModel, required this.dashboardViewModel,
}); });
@override
bool get canUseDesktopAppBar => true;
@override @override
Color get backgroundLightColor => Color get backgroundLightColor =>
currentTheme.type == ThemeType.bright ? Colors.transparent : Colors.white; currentTheme.type == ThemeType.bright ? Colors.transparent : Colors.white;

80
lib/src/screens/restore/restore_from_backup_page.dart
View file

@ -1,6 +1,7 @@
import 'package:cake_wallet/core/execution_state.dart'; import 'package:cake_wallet/core/execution_state.dart';
import 'package:cake_wallet/generated/i18n.dart'; import 'package:cake_wallet/generated/i18n.dart';
import 'package:cake_wallet/src/widgets/alert_with_one_action.dart'; import 'package:cake_wallet/src/widgets/alert_with_one_action.dart';
import 'package:cake_wallet/utils/responsive_layout_util.dart';
import 'package:cake_wallet/utils/show_pop_up.dart'; import 'package:cake_wallet/utils/show_pop_up.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter/src/widgets/framework.dart'; import 'package:flutter/src/widgets/framework.dart';
@ -39,43 +40,48 @@ class RestoreFromBackupPage extends BasePage {
} }
}); });
return Container( return Center(
padding: EdgeInsets.only(bottom: 24, left: 24, right: 24), child: ConstrainedBox(
child: Column(children: [ constraints: BoxConstraints(maxWidth: ResponsiveLayoutUtil.kDesktopMaxWidthConstraint),
Expanded( child: Padding(
child: Container( padding: EdgeInsets.only(bottom: 24, left: 24, right: 24),
child: Center( child: Column(children: [
child: TextFormField( Expanded(
obscureText: true, child: Container(
enableSuggestions: false, child: Center(
autocorrect: false, child: TextFormField(
decoration: InputDecoration( obscureText: true,
hintText: S.of(context).enter_backup_password), enableSuggestions: false,
keyboardType: TextInputType.visiblePassword, autocorrect: false,
controller: textEditingController, decoration: InputDecoration(
style: TextStyle(fontSize: 26, color: Colors.black))), hintText: S.of(context).enter_backup_password),
), keyboardType: TextInputType.visiblePassword,
), controller: textEditingController,
Container( style: TextStyle(fontSize: 26, color: Colors.black))),
child: Row(children: [ ),
Expanded( ),
child: PrimaryButton( Container(
onPressed: () => presentFilePicker(), child: Row(children: [
text: S.of(context).select_backup_file, Expanded(
color: Colors.grey, child: PrimaryButton(
textColor: Colors.white)), onPressed: () => presentFilePicker(),
SizedBox(width: 20), text: S.of(context).select_backup_file,
Expanded(child: Observer(builder: (_) { color: Colors.grey,
return LoadingPrimaryButton( textColor: Colors.white)),
isLoading: SizedBox(width: 20),
restoreFromBackupViewModel.state is IsExecutingState, Expanded(child: Observer(builder: (_) {
onPressed: () => onImportHandler(context), return LoadingPrimaryButton(
text: S.of(context).import, isLoading:
color: Theme.of(context).accentTextTheme!.bodyText1!.color!, restoreFromBackupViewModel.state is IsExecutingState,
textColor: Colors.white); onPressed: () => onImportHandler(context),
})) text: S.of(context).import,
])), color: Theme.of(context).accentTextTheme!.bodyText1!.color!,
])); textColor: Colors.white);
}))
])),
])),
),
);
} }
Future<void> presentFilePicker() async { Future<void> presentFilePicker() async {

53
lib/src/screens/restore/restore_options_page.dart
View file

@ -1,3 +1,4 @@
import 'package:cake_wallet/utils/responsive_layout_util.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:cake_wallet/routes.dart'; import 'package:cake_wallet/routes.dart';
import 'package:flutter/cupertino.dart'; import 'package:flutter/cupertino.dart';
@ -18,31 +19,33 @@ class RestoreOptionsPage extends BasePage {
@override @override
Widget body(BuildContext context) { Widget body(BuildContext context) {
return Container( return Center(
width: double.infinity, child: Container(
height: double.infinity, width: ResponsiveLayoutUtil.kDesktopMaxWidthConstraint,
padding: EdgeInsets.all(24), height: double.infinity,
child: SingleChildScrollView( padding: EdgeInsets.symmetric(vertical: 24),
child: Column( child: SingleChildScrollView(
children: <Widget>[ child: Column(
RestoreButton( children: <Widget>[
onPressed: () => RestoreButton(
Navigator.pushNamed(context, Routes.restoreWalletOptionsFromWelcome),
image: imageSeedKeys,
title: S.of(context).restore_title_from_seed_keys,
description:
S.of(context).restore_description_from_seed_keys),
Padding(
padding: EdgeInsets.only(top: 24),
child: RestoreButton(
onPressed: () => onPressed: () =>
Navigator.pushNamed(context, Routes.restoreFromBackup), Navigator.pushNamed(context, Routes.restoreWalletOptionsFromWelcome),
image: imageBackup, image: imageSeedKeys,
title: S.of(context).restore_title_from_backup, title: S.of(context).restore_title_from_seed_keys,
description: S.of(context).restore_description_from_backup), description:
) S.of(context).restore_description_from_seed_keys),
], Padding(
), padding: EdgeInsets.only(top: 24),
)); child: RestoreButton(
onPressed: () =>
Navigator.pushNamed(context, Routes.restoreFromBackup),
image: imageBackup,
title: S.of(context).restore_title_from_backup,
description: S.of(context).restore_description_from_backup),
)
],
),
)),
);
} }
} }

77
lib/src/screens/seed/pre_seed_page.dart
View file

@ -1,3 +1,4 @@
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';
@ -33,44 +34,48 @@ class PreSeedPage extends BasePage {
return WillPopScope( return WillPopScope(
onWillPop: () async => false, onWillPop: () async => false,
child: Container( child: Container(
alignment: Alignment.center,
padding: EdgeInsets.all(24), padding: EdgeInsets.all(24),
child: Column( child: ConstrainedBox(
children: [ constraints: BoxConstraints(maxWidth: ResponsiveLayoutUtil.kDesktopMaxWidthConstraint),
Flexible( child: Column(
flex: 2, children: [
child: AspectRatio( Flexible(
aspectRatio: 1, flex: 2,
child: FittedBox(child: image, fit: BoxFit.contain))), child: AspectRatio(
Flexible( aspectRatio: 1,
flex: 3, child: FittedBox(child: image, fit: BoxFit.contain))),
child: Column( Flexible(
mainAxisAlignment: MainAxisAlignment.spaceBetween, flex: 3,
children: [ child: Column(
Padding( mainAxisAlignment: MainAxisAlignment.spaceBetween,
padding: EdgeInsets.only(top: 70, left: 16, right: 16), children: [
child: Text( Padding(
S padding: EdgeInsets.only(top: 70, left: 16, right: 16),
.of(context) child: Text(
.pre_seed_description(wordsCount.toString()), S
textAlign: TextAlign.center, .of(context)
style: TextStyle( .pre_seed_description(wordsCount.toString()),
fontSize: 14, textAlign: TextAlign.center,
fontWeight: FontWeight.normal, style: TextStyle(
color: Theme.of(context) fontSize: 14,
.primaryTextTheme! fontWeight: FontWeight.normal,
.caption! color: Theme.of(context)
.color!), .primaryTextTheme!
.caption!
.color!),
),
), ),
), PrimaryButton(
PrimaryButton( onPressed: () => Navigator.of(context)
onPressed: () => Navigator.of(context) .popAndPushNamed(Routes.seed, arguments: true),
.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).accentTextTheme!.bodyText1!.color!,
color: Theme.of(context).accentTextTheme!.bodyText1!.color!, textColor: Colors.white)
textColor: Colors.white) ],
], ))
)) ],
], ),
), ),
)); ));
} }

192
lib/src/screens/seed/wallet_seed_page.dart
View file

@ -1,9 +1,9 @@
import 'package:cake_wallet/palette.dart'; import 'package:cake_wallet/palette.dart';
import 'package:cake_wallet/themes/theme_base.dart'; import 'package:cake_wallet/themes/theme_base.dart';
import 'package:cake_wallet/src/widgets/alert_with_two_actions.dart'; import 'package:cake_wallet/src/widgets/alert_with_two_actions.dart';
import 'package:cake_wallet/utils/responsive_layout_util.dart';
import 'package:cake_wallet/utils/show_bar.dart'; import 'package:cake_wallet/utils/show_bar.dart';
import 'package:cake_wallet/utils/show_pop_up.dart'; import 'package:cake_wallet/utils/show_pop_up.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter/services.dart'; import 'package:flutter/services.dart';
import 'package:share_plus/share_plus.dart'; import 'package:share_plus/share_plus.dart';
@ -22,6 +22,9 @@ class WalletSeedPage extends BasePage {
@override @override
String get title => S.current.seed_title; String get title => S.current.seed_title;
@override
bool get canUseDesktopAppBar => false;
final bool isNewWalletCreated; final bool isNewWalletCreated;
final WalletSeedViewModel walletSeedViewModel; final WalletSeedViewModel walletSeedViewModel;
@ -53,7 +56,7 @@ class WalletSeedPage extends BasePage {
@override @override
Widget? leading(BuildContext context) => Widget? leading(BuildContext context) =>
isNewWalletCreated ? Offstage() : super.leading(context); isNewWalletCreated ? null: super.leading(context);
@override @override
Widget trailing(BuildContext context) { Widget trailing(BuildContext context) {
@ -86,110 +89,115 @@ class WalletSeedPage extends BasePage {
return WillPopScope(onWillPop: () async => false, child: Container( return WillPopScope(onWillPop: () async => false, child: Container(
padding: EdgeInsets.all(24), padding: EdgeInsets.all(24),
child: Column( alignment: Alignment.center,
children: <Widget>[ child: ConstrainedBox(
Flexible( constraints:
flex: 2, BoxConstraints(maxWidth: ResponsiveLayoutUtil.kDesktopMaxWidthConstraint),
child: AspectRatio( child: Column(
aspectRatio: 1, children: <Widget>[
child: FittedBox(child: image, fit: BoxFit.fill))), Flexible(
Flexible( flex: 2,
flex: 3, child: AspectRatio(
child: Column( aspectRatio: 1,
mainAxisAlignment: MainAxisAlignment.spaceBetween, child: FittedBox(child: image, fit: BoxFit.fill))),
children: <Widget>[ Flexible(
Padding( flex: 3,
padding: EdgeInsets.only(top: 33), child: Column(
child: Observer(builder: (_) { mainAxisAlignment: MainAxisAlignment.spaceBetween,
return Column( children: <Widget>[
crossAxisAlignment: CrossAxisAlignment.center, Padding(
children: <Widget>[ padding: EdgeInsets.only(top: 33),
Text( child: Observer(builder: (_) {
walletSeedViewModel.name, return Column(
style: TextStyle( crossAxisAlignment: CrossAxisAlignment.center,
fontSize: 20, children: <Widget>[
fontWeight: FontWeight.w600, Text(
color: Theme.of(context) walletSeedViewModel.name,
.primaryTextTheme!
.headline6!
.color!),
),
Padding(
padding:
EdgeInsets.only(top: 20, left: 16, right: 16),
child: Text(
walletSeedViewModel.seed,
textAlign: TextAlign.center,
style: TextStyle( style: TextStyle(
fontSize: 14, fontSize: 20,
fontWeight: FontWeight.normal, fontWeight: FontWeight.w600,
color: Theme.of(context) color: Theme.of(context)
.primaryTextTheme! .primaryTextTheme!
.caption! .headline6!
.color!), .color!),
), ),
) Padding(
], padding:
); EdgeInsets.only(top: 20, left: 16, right: 16),
}),
),
Column(
children: <Widget>[
isNewWalletCreated
? Padding(
padding: EdgeInsets.only(
bottom: 52, left: 43, right: 43),
child: Text( child: Text(
S.of(context).seed_reminder, walletSeedViewModel.seed,
textAlign: TextAlign.center, textAlign: TextAlign.center,
style: TextStyle( style: TextStyle(
fontSize: 12, fontSize: 14,
fontWeight: FontWeight.normal, fontWeight: FontWeight.normal,
color: Theme.of(context) color: Theme.of(context)
.primaryTextTheme! .primaryTextTheme!
.overline! .caption!
.color!), .color!),
), ),
) )
: Offstage(), ],
Row( );
mainAxisSize: MainAxisSize.max, }),
children: <Widget>[ ),
Flexible( Column(
child: Container( children: <Widget>[
padding: EdgeInsets.only(right: 8.0), isNewWalletCreated
child: PrimaryButton( ? Padding(
onPressed: () => padding: EdgeInsets.only(
Share.share(walletSeedViewModel.seed), bottom: 52, left: 43, right: 43),
text: S.of(context).save, child: Text(
color: Colors.green, S.of(context).seed_reminder,
textColor: Colors.white), textAlign: TextAlign.center,
)), style: TextStyle(
Flexible( fontSize: 12,
child: Container( fontWeight: FontWeight.normal,
padding: EdgeInsets.only(left: 8.0), color: Theme.of(context)
child: Builder( .primaryTextTheme!
builder: (context) => PrimaryButton( .overline!
onPressed: () { .color!),
Clipboard.setData(ClipboardData( ),
text: walletSeedViewModel.seed)); )
showBar<void>(context, : Offstage(),
S.of(context).copied_to_clipboard); Row(
}, mainAxisSize: MainAxisSize.max,
text: S.of(context).copy, children: <Widget>[
color: Theme.of(context) Flexible(
.accentTextTheme! child: Container(
.bodyText2! padding: EdgeInsets.only(right: 8.0),
.color!, child: PrimaryButton(
textColor: Colors.white)), onPressed: () =>
)) Share.share(walletSeedViewModel.seed),
], 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!
.bodyText2!
.color!,
textColor: Colors.white)),
))
],
)
],
)
],
))
],
),
))); )));
} }
} }

11
lib/src/widgets/nav_bar.dart
View file

@ -1,23 +1,24 @@
import 'package:cake_wallet/utils/responsive_layout_util.dart';
import 'package:flutter/cupertino.dart'; import 'package:flutter/cupertino.dart';
class NavBar extends StatelessWidget implements ObstructingPreferredSizeWidget { class NavBar extends StatelessWidget implements ObstructingPreferredSizeWidget {
factory NavBar({Widget? leading, Widget? middle, Widget? trailing, Color? backgroundColor}) { factory NavBar({Widget? leading, Widget? middle, Widget? trailing, bool useDesktopAppbar = false, Color? backgroundColor,}) {
return NavBar._internal( return NavBar._internal(
leading: leading, leading: leading,
middle: middle, middle: middle,
trailing: trailing, trailing: trailing,
height: _height, height: _height,
useDesktopAppbar: useDesktopAppbar,
backgroundColor: backgroundColor); backgroundColor: backgroundColor);
} }
factory NavBar.withShadow( factory NavBar.withShadow(
{Widget? leading, Widget? middle, Widget? trailing, Color? backgroundColor}) { {Widget? leading, Widget? middle, Widget? trailing, Color? backgroundColor, bool useDesktopAppbar = false,}) {
return NavBar._internal( return NavBar._internal(
leading: leading, leading: leading,
middle: middle, middle: middle,
trailing: trailing, trailing: trailing,
height: 80, height: 80,
useDesktopAppbar: useDesktopAppbar,
backgroundColor: backgroundColor, backgroundColor: backgroundColor,
decoration: BoxDecoration( decoration: BoxDecoration(
color: backgroundColor, color: backgroundColor,
@ -38,6 +39,7 @@ class NavBar extends StatelessWidget implements ObstructingPreferredSizeWidget {
this.trailing, this.trailing,
this.backgroundColor, this.backgroundColor,
this.decoration, this.decoration,
this.useDesktopAppbar = false,
this.height = _height}); this.height = _height});
static const _originalHeight = 44.0; // iOS nav bar height static const _originalHeight = 44.0; // iOS nav bar height
@ -49,6 +51,7 @@ class NavBar extends StatelessWidget implements ObstructingPreferredSizeWidget {
final Color? backgroundColor; final Color? backgroundColor;
final BoxDecoration? decoration; final BoxDecoration? decoration;
final double height; final double height;
final bool useDesktopAppbar;
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
@ -60,7 +63,7 @@ class NavBar extends StatelessWidget implements ObstructingPreferredSizeWidget {
final paddingTop = pad / 2; final paddingTop = pad / 2;
final _paddingBottom = (pad / 2); final _paddingBottom = (pad / 2);
if (!ResponsiveLayoutUtil.instance.isMobile(context)) { if (useDesktopAppbar) {
return Container( return Container(
padding: const EdgeInsetsDirectional.only(end: 24), padding: const EdgeInsetsDirectional.only(end: 24),
color: backgroundColor, color: backgroundColor,