Ecosystem/cake_wallet
1
0
Fork 0
mirror of https://github.com/cake-tech/cake_wallet.git synced 2025-03-12 09:32:33 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

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

Browse source 
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
Show stats Download patch file Download diff file Expand all files Collapse all files

48
lib/src/screens/dashboard/desktop_widgets/desktop_dashboard_navbar.dart Normal file
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;
}

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

@ -2,17 +2,19 @@ import 'package:cake_wallet/di.dart';
import 'package:cake_wallet/routes.dart'; import 'package:cake_wallet/routes.dart';
import 'package:cake_wallet/src/screens/dashboard/desktop_dashboard_page.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/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.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_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/desktop_widgets/desktop_wallet_selection_dropdown.dart';
import 'package:cake_wallet/src/screens/dashboard/widgets/sync_indicator.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/dashboard_view_model.dart';
import 'package:cake_wallet/view_model/dashboard/desktop_sidebar_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/material.dart';
import 'package:flutter_mobx/flutter_mobx.dart'; import 'package:flutter_mobx/flutter_mobx.dart';
import 'package:cake_wallet/router.dart' as Router; import 'package:cake_wallet/router.dart' as Router;
import 'package:mobx/mobx.dart'; import 'package:mobx/mobx.dart';
class DesktopSidebarWrapper extends BasePage { class DesktopSidebarWrapper extends BasePage {
final Widget child; final Widget child;
final DesktopSidebarViewModel desktopSidebarViewModel; final DesktopSidebarViewModel desktopSidebarViewModel;
@ -24,14 +26,50 @@ class DesktopSidebarWrapper extends BasePage {
required this.dashboardViewModel, required this.dashboardViewModel,
}); });
static Key _pageViewKey = GlobalKey(); static Key _pageViewKey = GlobalKey();
@override @override
Color get backgroundLightColor => ObstructingPreferredSizeWidget appBar(BuildContext context) => DesktopDashboardNavbar(
currentTheme.type == ThemeType.bright ? Colors.transparent : Colors.white; 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 DesktopDashboardPage.desktopKey.currentState?.popUntil((route) {
Color get backgroundDarkColor => Colors.black.withOpacity(0.1); 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 @override
bool get resizeToAvoidBottomInset => false; bool get resizeToAvoidBottomInset => false;
@ -43,54 +81,6 @@ class DesktopSidebarWrapper extends BasePage {
double get sideMenuWidth => 76.0; 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 @override
Widget body(BuildContext context) { Widget body(BuildContext context) {
_setEffects(); _setEffects();
@ -156,12 +146,10 @@ class DesktopSidebarWrapper extends BasePage {
); );
} }
final desktopKey = DesktopDashboardPage.desktopKey; final desktopKey = DesktopDashboardPage.desktopKey;
void _setEffects() async {
reaction<SidebarItem>((_) => desktopSidebarViewModel.currentPage, (page) {
void _setEffects() async {
reaction<SidebarItem>((_) => desktopSidebarViewModel.currentPage, (page) {
String? currentPath; String? currentPath;
desktopKey.currentState?.popUntil((route) { desktopKey.currentState?.popUntil((route) {

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)),
))
],
)
],
)
],
))
],
),
))); )));
} }
} }

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

@ -1,4 +1,3 @@
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 {
@ -60,24 +59,6 @@ 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)) {
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( return Container(
decoration: decoration ?? BoxDecoration(color: backgroundColor), decoration: decoration ?? BoxDecoration(color: backgroundColor),
padding: EdgeInsetsDirectional.only(bottom: _paddingBottom, top: paddingTop), padding: EdgeInsetsDirectional.only(bottom: _paddingBottom, top: paddingTop),