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; 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,6 +99,7 @@ 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:
@ -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);
} }

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;

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,7 +40,10 @@ class RestoreFromBackupPage extends BasePage {
} }
}); });
return Container( return Center(
child: ConstrainedBox(
constraints: BoxConstraints(maxWidth: ResponsiveLayoutUtil.kDesktopMaxWidthConstraint),
child: Padding(
padding: EdgeInsets.only(bottom: 24, left: 24, right: 24), padding: EdgeInsets.only(bottom: 24, left: 24, right: 24),
child: Column(children: [ child: Column(children: [
Expanded( Expanded(
@ -75,7 +79,9 @@ class RestoreFromBackupPage extends BasePage {
textColor: Colors.white); textColor: Colors.white);
})) }))
])), ])),
])); ])),
),
);
} }
Future<void> presentFilePicker() async { 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: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,10 +19,11 @@ class RestoreOptionsPage extends BasePage {
@override @override
Widget body(BuildContext context) { Widget body(BuildContext context) {
return Container( return Center(
width: double.infinity, child: Container(
width: ResponsiveLayoutUtil.kDesktopMaxWidthConstraint,
height: double.infinity, height: double.infinity,
padding: EdgeInsets.all(24), padding: EdgeInsets.symmetric(vertical: 24),
child: SingleChildScrollView( child: SingleChildScrollView(
child: Column( child: Column(
children: <Widget>[ children: <Widget>[
@ -43,6 +45,7 @@ class RestoreOptionsPage extends BasePage {
) )
], ],
), ),
)); )),
);
} }
} }

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,7 +34,10 @@ 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: ConstrainedBox(
constraints: BoxConstraints(maxWidth: ResponsiveLayoutUtil.kDesktopMaxWidthConstraint),
child: Column( child: Column(
children: [ children: [
Flexible( Flexible(
@ -72,6 +76,7 @@ class PreSeedPage extends BasePage {
)) ))
], ],
), ),
),
)); ));
} }
} }

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,6 +89,10 @@ 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),
alignment: Alignment.center,
child: ConstrainedBox(
constraints:
BoxConstraints(maxWidth: ResponsiveLayoutUtil.kDesktopMaxWidthConstraint),
child: Column( child: Column(
children: <Widget>[ children: <Widget>[
Flexible( Flexible(
@ -190,6 +197,7 @@ class WalletSeedPage extends BasePage {
], ],
)) ))
], ],
),
))); )));
} }
} }

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,