Merge pull request #797 from cake-tech/align-create-restore-screens

Fix alignment in create and restore wallet screens
This commit is contained in:
Omar Hatem 2023-02-23 18:24:32 +02:00 committed by GitHub
commit 67503f393d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 309 additions and 270 deletions

View file

@ -97,7 +97,7 @@ abstract class BasePage extends StatelessWidget {
ObstructingPreferredSizeWidget appBar(BuildContext context) {
final appBarColor = currentTheme.type == ThemeType.dark
? backgroundDarkColor : backgroundLightColor;
switch (appBarStyle) {
case AppBarStyle.regular:
// FIX-ME: NavBar no context

View file

@ -0,0 +1,48 @@
import 'package:cake_wallet/di.dart';
import 'package:cake_wallet/store/settings_store.dart';
import 'package:cake_wallet/themes/theme_base.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class DesktopDashboardNavbar extends StatelessWidget implements ObstructingPreferredSizeWidget {
final Widget leading;
final Widget middle;
final Widget trailing;
DesktopDashboardNavbar({
super.key,
required this.leading,
required this.middle,
required this.trailing,
});
ThemeBase get currentTheme => getIt.get<SettingsStore>().currentTheme;
@override
Widget build(BuildContext context) {
final appBarColor =
currentTheme.type == ThemeType.dark ? Colors.black.withOpacity(0.1) : Colors.white;
return Container(
padding: const EdgeInsetsDirectional.only(end: 24),
color: appBarColor,
child: Center(
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Flexible(child: leading),
middle,
trailing,
],
),
),
);
}
@override
Size get preferredSize => Size.fromHeight(60);
@override
bool shouldFullyObstruct(BuildContext context) => false;
}

View file

@ -2,17 +2,19 @@ import 'package:cake_wallet/di.dart';
import 'package:cake_wallet/routes.dart';
import 'package:cake_wallet/src/screens/dashboard/desktop_dashboard_page.dart';
import 'package:cake_wallet/src/screens/base_page.dart';
import 'package:cake_wallet/src/screens/dashboard/desktop_widgets/desktop_dashboard_navbar.dart';
import 'package:cake_wallet/src/screens/dashboard/desktop_widgets/desktop_sidebar/side_menu.dart';
import 'package:cake_wallet/src/screens/dashboard/desktop_widgets/desktop_sidebar/side_menu_item.dart';
import 'package:cake_wallet/src/screens/dashboard/desktop_widgets/desktop_wallet_selection_dropdown.dart';
import 'package:cake_wallet/src/screens/dashboard/widgets/sync_indicator.dart';
import 'package:cake_wallet/themes/theme_base.dart';
import 'package:cake_wallet/view_model/dashboard/dashboard_view_model.dart';
import 'package:cake_wallet/view_model/dashboard/desktop_sidebar_view_model.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_mobx/flutter_mobx.dart';
import 'package:cake_wallet/router.dart' as Router;
import 'package:mobx/mobx.dart';
class DesktopSidebarWrapper extends BasePage {
final Widget child;
final DesktopSidebarViewModel desktopSidebarViewModel;
@ -24,14 +26,50 @@ class DesktopSidebarWrapper extends BasePage {
required this.dashboardViewModel,
});
static Key _pageViewKey = GlobalKey();
static Key _pageViewKey = GlobalKey();
@override
Color get backgroundLightColor =>
currentTheme.type == ThemeType.bright ? Colors.transparent : Colors.white;
ObstructingPreferredSizeWidget appBar(BuildContext context) => DesktopDashboardNavbar(
leading: Padding(
padding: EdgeInsets.only(left: sideMenuWidth),
child: getIt<DesktopWalletSelectionDropDown>(),
),
middle: SyncIndicator(
dashboardViewModel: dashboardViewModel,
onTap: () => Navigator.of(context, rootNavigator: true).pushNamed(Routes.connectionSync),
),
trailing: InkWell(
onTap: () {
String? currentPath;
@override
Color get backgroundDarkColor => Colors.black.withOpacity(0.1);
DesktopDashboardPage.desktopKey.currentState?.popUntil((route) {
currentPath = route.settings.name;
return true;
});
switch (currentPath) {
case Routes.transactionsPage:
desktopSidebarViewModel.resetSidebar();
break;
default:
desktopSidebarViewModel.resetSidebar();
Future.delayed(Duration(milliseconds: 10), () {
desktopSidebarViewModel.onPageChange(SidebarItem.transactions);
DesktopDashboardPage.desktopKey.currentState?.pushNamed(Routes.transactionsPage);
});
}
},
child: Observer(
builder: (_) {
return Image.asset(
desktopSidebarViewModel.currentPage == SidebarItem.transactions
? selectedIconPath
: unselectedIconPath,
);
},
),
),
);
@override
bool get resizeToAvoidBottomInset => false;
@ -43,58 +81,10 @@ class DesktopSidebarWrapper extends BasePage {
double get sideMenuWidth => 76.0;
@override
Widget? leading(BuildContext context) => Padding(
padding: EdgeInsets.only(left: sideMenuWidth),
child: getIt<DesktopWalletSelectionDropDown>(),
);
@override
Widget middle(BuildContext context) {
return SyncIndicator(
dashboardViewModel: dashboardViewModel,
onTap: () => Navigator.of(context, rootNavigator: true).pushNamed(Routes.connectionSync));
}
@override
Widget trailing(BuildContext context) {
return InkWell(
onTap: () {
String? currentPath;
DesktopDashboardPage.desktopKey.currentState?.popUntil((route) {
currentPath = route.settings.name;
return true;
});
switch (currentPath) {
case Routes.transactionsPage:
desktopSidebarViewModel.resetSidebar();
break;
default:
desktopSidebarViewModel.resetSidebar();
Future.delayed(Duration(milliseconds: 10), () {
desktopSidebarViewModel.onPageChange(SidebarItem.transactions);
DesktopDashboardPage.desktopKey.currentState?.pushNamed(Routes.transactionsPage);
});
}
},
child: Observer(
builder: (_) {
return Image.asset(
desktopSidebarViewModel.currentPage == SidebarItem.transactions
? selectedIconPath
: unselectedIconPath,
);
},
),
);
}
@override
Widget body(BuildContext context) {
_setEffects();
return Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
@ -156,12 +146,10 @@ class DesktopSidebarWrapper extends BasePage {
);
}
final desktopKey = DesktopDashboardPage.desktopKey;
void _setEffects() async {
reaction<SidebarItem>((_) => desktopSidebarViewModel.currentPage, (page) {
final desktopKey = DesktopDashboardPage.desktopKey;
void _setEffects() async {
reaction<SidebarItem>((_) => desktopSidebarViewModel.currentPage, (page) {
String? currentPath;
desktopKey.currentState?.popUntil((route) {

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,4 +1,3 @@
import 'package:cake_wallet/utils/responsive_layout_util.dart';
import 'package:flutter/cupertino.dart';
class NavBar extends StatelessWidget implements ObstructingPreferredSizeWidget {
@ -60,24 +59,6 @@ class NavBar extends StatelessWidget implements ObstructingPreferredSizeWidget {
final paddingTop = pad / 2;
final _paddingBottom = (pad / 2);
if (!ResponsiveLayoutUtil.instance.isMobile(context)) {
return Container(
padding: const EdgeInsetsDirectional.only(end: 24),
color: backgroundColor,
child: Center(
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
if (leading != null) Flexible(child: leading!) else const SizedBox(),
if (middle != null) middle!,
trailing ?? const SizedBox(),
],
),
),
);
}
return Container(
decoration: decoration ?? BoxDecoration(color: backgroundColor),
padding: EdgeInsetsDirectional.only(bottom: _paddingBottom, top: paddingTop),