Fix alignment in create and restore wallet screens

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

View file

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

View file

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

View file

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

View file

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

View file

@ -1,3 +1,4 @@
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';
@ -33,44 +34,48 @@ class PreSeedPage extends BasePage {
return WillPopScope(
onWillPop: () async => false,
child: Container(
alignment: Alignment.center,
padding: EdgeInsets.all(24),
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!
.caption!
.color!),
child: ConstrainedBox(
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!
.caption!
.color!),
),
),
),
PrimaryButton(
onPressed: () => Navigator.of(context)
.popAndPushNamed(Routes.seed, arguments: true),
text: S.of(context).pre_seed_button_text,
color: Theme.of(context).accentTextTheme!.bodyText1!.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!.bodyText1!.color!,
textColor: Colors.white)
],
))
],
),
),
));
}

View file

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

View file

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