diff --git a/lib/src/screens/new_wallet/new_wallet_page.dart b/lib/src/screens/new_wallet/new_wallet_page.dart index 7c1e9a88d..054961c44 100644 --- a/lib/src/screens/new_wallet/new_wallet_page.dart +++ b/lib/src/screens/new_wallet/new_wallet_page.dart @@ -1,6 +1,7 @@ import 'package:cake_wallet/entities/generate_name.dart'; import 'package:cake_wallet/routes.dart'; import 'package:cake_wallet/themes/theme_base.dart'; +import 'package:cake_wallet/utils/responsive_layout_util.dart'; import 'package:cake_wallet/utils/show_pop_up.dart'; import 'package:mobx/mobx.dart'; import 'package:flutter_mobx/flutter_mobx.dart'; @@ -29,9 +30,6 @@ class NewWalletPage extends BasePage { @override String get title => S.current.new_wallet; - @override - Widget trailing(BuildContext context) => SizedBox.shrink(); - @override Widget body(BuildContext context) => WalletNameForm( _walletNewVM, currentTheme.type == ThemeType.dark ? walletNameImage : walletNameLightImage); @@ -89,136 +87,143 @@ class _WalletNameFormState extends State { Widget build(BuildContext context) { return Padding( padding: EdgeInsets.only(top: 24), - child: Center( - child: ConstrainedBox( - constraints: BoxConstraints(maxWidth: 600), - child: ScrollableWithBottomSection( - contentPadding: EdgeInsets.only(left: 24, right: 24, bottom: 24), - content: Column(crossAxisAlignment: CrossAxisAlignment.center, children: [ - Padding( - padding: EdgeInsets.only(left: 12, right: 12), - child: AspectRatio( - aspectRatio: aspectRatioImage, - child: FittedBox(child: widget.walletImage, fit: BoxFit.fill)), - ), - Padding( - padding: EdgeInsets.only(top: 24), - child: Form( - key: _formKey, - child: Stack( - alignment: Alignment.centerRight, - children: [ - TextFormField( - onChanged: (value) => _walletNewVM.name = value, - controller: _controller, - textAlign: TextAlign.center, - style: TextStyle( - fontSize: 20.0, - fontWeight: FontWeight.w600, - color: Theme.of(context).primaryTextTheme!.headline6!.color!), - decoration: InputDecoration( - hintStyle: TextStyle( - fontSize: 18.0, - fontWeight: FontWeight.w500, - color: Theme.of(context).accentTextTheme!.headline2!.color!), - hintText: S.of(context).wallet_name, - focusedBorder: UnderlineInputBorder( + child: ScrollableWithBottomSection( + contentPadding: EdgeInsets.only(left: 24, right: 24, bottom: 24), + content: Center( + child: ConstrainedBox( + constraints: + BoxConstraints(maxWidth: ResponsiveLayoutUtil.kDesktopMaxWidthConstraint), + child: Column( + crossAxisAlignment: CrossAxisAlignment.center, + children: [ + Padding( + padding: EdgeInsets.only(left: 12, right: 12), + child: AspectRatio( + aspectRatio: aspectRatioImage, + child: FittedBox(child: widget.walletImage, fit: BoxFit.fill)), + ), + Padding( + padding: EdgeInsets.only(top: 24), + child: Form( + key: _formKey, + child: Stack( + alignment: Alignment.centerRight, + children: [ + TextFormField( + onChanged: (value) => _walletNewVM.name = value, + controller: _controller, + textAlign: TextAlign.center, + style: TextStyle( + fontSize: 20.0, + fontWeight: FontWeight.w600, + color: Theme.of(context).primaryTextTheme!.headline6!.color!), + decoration: InputDecoration( + hintStyle: TextStyle( + fontSize: 18.0, + fontWeight: FontWeight.w500, + color: Theme.of(context).accentTextTheme!.headline2!.color!), + hintText: S.of(context).wallet_name, + focusedBorder: UnderlineInputBorder( + borderSide: BorderSide( + color: Theme.of(context) + .accentTextTheme! + .headline2! + .decorationColor!, + width: 1.0)), + enabledBorder: UnderlineInputBorder( borderSide: BorderSide( color: Theme.of(context) .accentTextTheme! .headline2! .decorationColor!, - width: 1.0)), - enabledBorder: UnderlineInputBorder( - borderSide: BorderSide( - color: Theme.of(context) - .accentTextTheme! - .headline2! - .decorationColor!, - width: 1.0), - ), - suffixIcon: IconButton( - onPressed: () async { - final rName = await generateName(); - FocusManager.instance.primaryFocus?.unfocus(); + width: 1.0), + ), + suffixIcon: IconButton( + onPressed: () async { + final rName = await generateName(); + FocusManager.instance.primaryFocus?.unfocus(); - setState(() { - _controller.text = rName; - _walletNewVM.name = rName; - _controller.selection = TextSelection.fromPosition( - TextPosition(offset: _controller.text.length)); - }); - }, - icon: Container( - padding: const EdgeInsets.all(8), - decoration: BoxDecoration( - borderRadius: BorderRadius.circular(6.0), - color: Theme.of(context).hintColor, - ), - width: 34, - height: 34, - child: Image.asset( - 'assets/images/refresh_icon.png', - color: Theme.of(context) - .primaryTextTheme! - .headline4! - .decorationColor!, + setState(() { + _controller.text = rName; + _walletNewVM.name = rName; + _controller.selection = TextSelection.fromPosition( + TextPosition(offset: _controller.text.length)); + }); + }, + icon: Container( + padding: const EdgeInsets.all(8), + decoration: BoxDecoration( + borderRadius: BorderRadius.circular(6.0), + color: Theme.of(context).hintColor, + ), + width: 34, + height: 34, + child: Image.asset( + 'assets/images/refresh_icon.png', + color: Theme.of(context) + .primaryTextTheme! + .headline4! + .decorationColor!, + ), ), ), ), + validator: WalletNameValidator(), ), - validator: WalletNameValidator(), - ), - ], + ], + ), ), ), - ), - if (_walletNewVM.hasLanguageSelector) ...[ - Padding( - padding: EdgeInsets.only(top: 40), - child: Text( - S.of(context).seed_language_choose, - textAlign: TextAlign.center, - style: TextStyle( - fontSize: 16.0, - fontWeight: FontWeight.w500, - color: Theme.of(context).primaryTextTheme!.headline6!.color!), + if (_walletNewVM.hasLanguageSelector) ...[ + Padding( + padding: EdgeInsets.only(top: 40), + child: Text( + S.of(context).seed_language_choose, + textAlign: TextAlign.center, + style: TextStyle( + fontSize: 16.0, + fontWeight: FontWeight.w500, + color: Theme.of(context).primaryTextTheme!.headline6!.color!), + ), ), - ), - Padding( - padding: EdgeInsets.only(top: 24), - child: SeedLanguageSelector( - key: _languageSelectorKey, initialSelected: defaultSeedLanguage), - ) - ] - ]), - bottomSectionPadding: EdgeInsets.all(24), - bottomSection: Column( - children: [ - Observer( - builder: (context) { - return LoadingPrimaryButton( - onPressed: _confirmForm, - text: S.of(context).seed_language_next, - color: Colors.green, - textColor: Colors.white, - isLoading: _walletNewVM.state is IsExecutingState, - isDisabled: _walletNewVM.name.isEmpty, - ); - }, - ), - const SizedBox(height: 25), - GestureDetector( - onTap: () { - Navigator.of(context) - .pushNamed(Routes.advancedPrivacySettings, arguments: _walletNewVM.type); - }, - child: Text(S.of(context).advanced_privacy_settings), - ), + Padding( + padding: EdgeInsets.only(top: 24), + child: SeedLanguageSelector( + key: _languageSelectorKey, initialSelected: defaultSeedLanguage), + ) + ] ], - )), - ), - ), + ), + ), + ), + bottomSectionPadding: EdgeInsets.all(24), + bottomSection: ConstrainedBox( + constraints: BoxConstraints(maxWidth: ResponsiveLayoutUtil.kDesktopMaxWidthConstraint), + child: Column( + children: [ + Observer( + builder: (context) { + return LoadingPrimaryButton( + onPressed: _confirmForm, + text: S.of(context).seed_language_next, + color: Colors.green, + textColor: Colors.white, + isLoading: _walletNewVM.state is IsExecutingState, + isDisabled: _walletNewVM.name.isEmpty, + ); + }, + ), + const SizedBox(height: 25), + GestureDetector( + onTap: () { + Navigator.of(context) + .pushNamed(Routes.advancedPrivacySettings, arguments: _walletNewVM.type); + }, + child: Text(S.of(context).advanced_privacy_settings), + ), + ], + ), + )), ); } diff --git a/lib/src/screens/new_wallet/new_wallet_type_page.dart b/lib/src/screens/new_wallet/new_wallet_type_page.dart index 8c81952bf..3493f60e0 100644 --- a/lib/src/screens/new_wallet/new_wallet_type_page.dart +++ b/lib/src/screens/new_wallet/new_wallet_type_page.dart @@ -1,3 +1,4 @@ +import 'package:cake_wallet/utils/responsive_layout_util.dart'; import 'package:cw_core/wallet_type.dart'; import 'package:cake_wallet/themes/theme_base.dart'; import 'package:flutter/material.dart'; @@ -18,9 +19,6 @@ class NewWalletTypePage extends BasePage { @override String get title => S.current.wallet_list_restore_wallet; - @override - Widget trailing(BuildContext context) => SizedBox.shrink(); - @override Widget body(BuildContext context) => WalletTypeForm( onTypeSelected: onTypeSelected, @@ -60,12 +58,12 @@ class WalletTypeFormState extends State { @override Widget build(BuildContext context) { - return Center( - child: ConstrainedBox( - constraints: BoxConstraints(maxWidth: 600), - child: ScrollableWithBottomSection( - contentPadding: EdgeInsets.only(left: 24, right: 24, bottom: 24), - content: Column( + return ScrollableWithBottomSection( + contentPadding: EdgeInsets.only(left: 24, right: 24, bottom: 24), + content: Center( + child: ConstrainedBox( + constraints: BoxConstraints(maxWidth: ResponsiveLayoutUtil.kDesktopMaxWidthConstraint), + child: Column( crossAxisAlignment: CrossAxisAlignment.center, children: [ Padding( @@ -95,14 +93,17 @@ class WalletTypeFormState extends State { )) ], ), - bottomSectionPadding: EdgeInsets.only(left: 24, right: 24, bottom: 24), - bottomSection: PrimaryButton( - onPressed: () => onTypeSelected(), - text: S.of(context).seed_language_next, - color: Theme.of(context).accentTextTheme.bodyText1!.color!, - textColor: Colors.white, - isDisabled: selected == null, - ), + ), + ), + bottomSectionPadding: EdgeInsets.only(left: 24, right: 24, bottom: 24), + bottomSection: ConstrainedBox( + constraints: BoxConstraints(maxWidth: ResponsiveLayoutUtil.kDesktopMaxWidthConstraint), + child: PrimaryButton( + onPressed: () => onTypeSelected(), + text: S.of(context).seed_language_next, + color: Theme.of(context).accentTextTheme.bodyText1!.color!, + textColor: Colors.white, + isDisabled: selected == null, ), ), ); diff --git a/lib/src/screens/pin_code/pin_code_widget.dart b/lib/src/screens/pin_code/pin_code_widget.dart index e0d1360d0..8f30136d0 100644 --- a/lib/src/screens/pin_code/pin_code_widget.dart +++ b/lib/src/screens/pin_code/pin_code_widget.dart @@ -1,3 +1,4 @@ +import 'package:cake_wallet/utils/responsive_layout_util.dart'; import 'package:cake_wallet/utils/show_bar.dart'; import 'package:another_flushbar/flushbar.dart'; import 'package:flutter/material.dart'; @@ -134,154 +135,165 @@ class PinCodeState extends State { child: Container( color: Theme.of(context).backgroundColor, padding: EdgeInsets.only(left: 40.0, right: 40.0, bottom: 40.0), - child: Column(children: [ - Spacer(flex: 2), - Text(title, - style: TextStyle( - fontSize: 20, - fontWeight: FontWeight.w500, - color: Theme.of(context).primaryTextTheme!.headline6!.color!)), - Spacer(flex: 3), - Container( - width: 180, - child: Row( - mainAxisAlignment: MainAxisAlignment.spaceBetween, - children: List.generate(pinLength, (index) { - const size = 10.0; - final isFilled = pin.length > index ? pin[index] != null : false; - - return Container( - width: size, - height: size, - decoration: BoxDecoration( - shape: BoxShape.circle, - color: isFilled - ? Theme.of(context).primaryTextTheme!.headline6!.color! - : Theme.of(context).accentTextTheme!.bodyText2!.color!.withOpacity(0.25), - )); - }), - ), - ), - Spacer(flex: 2), - if (widget.hasLengthSwitcher) ...[ - TextButton( - onPressed: () { - changePinLength(pinLength == PinCodeState.fourPinLength - ? PinCodeState.sixPinLength - : PinCodeState.fourPinLength); - }, - child: Text( - _changePinLengthText(), + child: Column( + children: [ + Spacer(flex: 2), + Text(title, style: TextStyle( - fontSize: 14.0, - fontWeight: FontWeight.normal, - color: Theme.of(context).accentTextTheme!.bodyText2!.decorationColor!), + fontSize: 20, + fontWeight: FontWeight.w500, + color: Theme.of(context).primaryTextTheme!.headline6!.color!)), + Spacer(flex: 3), + Container( + width: 180, + child: Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: List.generate(pinLength, (index) { + const size = 10.0; + final isFilled = pin.length > index ? pin[index] != null : false; + + return Container( + width: size, + height: size, + decoration: BoxDecoration( + shape: BoxShape.circle, + color: isFilled + ? Theme.of(context).primaryTextTheme!.headline6!.color! + : Theme.of(context) + .accentTextTheme! + .bodyText2! + .color! + .withOpacity(0.25), + )); + }), + ), + ), + Spacer(flex: 2), + if (widget.hasLengthSwitcher) ...[ + TextButton( + onPressed: () { + changePinLength(pinLength == PinCodeState.fourPinLength + ? PinCodeState.sixPinLength + : PinCodeState.fourPinLength); + }, + child: Text( + _changePinLengthText(), + style: TextStyle( + fontSize: 14.0, + fontWeight: FontWeight.normal, + color: Theme.of(context).accentTextTheme!.bodyText2!.decorationColor!), + ), + ) + ], + Spacer(flex: 1), + Flexible( + flex: 24, + child: Center( + child: ConstrainedBox( + constraints: BoxConstraints( + maxWidth: ResponsiveLayoutUtil.kDesktopMaxWidthConstraint, + ), + child: Container( + key: _gridViewKey, + child: _aspectRatio > 0 + ? ScrollConfiguration( + behavior: ScrollConfiguration.of(context).copyWith(scrollbars: false), + child: GridView.count( + shrinkWrap: true, + crossAxisCount: 3, + childAspectRatio: _aspectRatio, + physics: const NeverScrollableScrollPhysics(), + children: List.generate(12, (index) { + const double marginRight = 15; + const double marginLeft = 15; + + if (index == 9) { + return Container( + margin: EdgeInsets.only(left: marginLeft, right: marginRight), + child: TextButton( + onPressed: () => null, + // (widget.hasLengthSwitcher || + // !settingsStore + // .allowBiometricalAuthentication) + // ? null + // : () { + // FIXME + // if (authStore != null) { + // WidgetsBinding.instance.addPostFrameCallback((_) { + // final biometricAuth = BiometricAuth(); + // biometricAuth.isAuthenticated().then( + // (isAuth) { + // if (isAuth) { + // authStore.biometricAuth(); + // _key.currentState.showSnackBar( + // SnackBar( + // content: Text(S.of(context).authenticated), + // backgroundColor: Colors.green, + // ), + // ); + // } + // } + // ); + // }); + // } + // }, + // FIX-ME: Style + //color: Theme.of(context).backgroundColor, + //shape: CircleBorder(), + child: Container() + // (widget.hasLengthSwitcher || + // !settingsStore + // .allowBiometricalAuthentication) + // ? Offstage() + // : faceImage, + ), + ); + } else if (index == 10) { + index = 0; + } else if (index == 11) { + return Container( + margin: EdgeInsets.only(left: marginLeft, right: marginRight), + child: TextButton( + onPressed: () => _pop(), + style: TextButton.styleFrom( + backgroundColor: Theme.of(context).backgroundColor, + shape: CircleBorder(), + ), + child: deleteIconImage, + ), + ); + } else { + index++; + } + + return Container( + margin: EdgeInsets.only(left: marginLeft, right: marginRight), + child: TextButton( + onPressed: () => _push(index), + style: TextButton.styleFrom( + backgroundColor: Theme.of(context).backgroundColor, + shape: CircleBorder(), + ), + child: Text('$index', + style: TextStyle( + fontSize: 30.0, + fontWeight: FontWeight.w600, + color: Theme.of(context) + .primaryTextTheme! + .headline6! + .color!)), + ), + ); + }), + ), + ) + : null, + ), + ), ), ) ], - Spacer(flex: 1), - Flexible( - flex: 24, - child: Center( - child: Container( - height: MediaQuery.of(context).size.height * 0.6, - width: MediaQuery.of(context).size.height * 0.6, - key: _gridViewKey, - child: _aspectRatio > 0 - ? ScrollConfiguration( - behavior: ScrollConfiguration.of(context).copyWith(scrollbars: false), - child: GridView.count( - shrinkWrap: true, - crossAxisCount: 3, - childAspectRatio: _aspectRatio, - physics: const NeverScrollableScrollPhysics(), - children: List.generate(12, (index) { - const double marginRight = 15; - const double marginLeft = 15; - - if (index == 9) { - return Container( - margin: EdgeInsets.only(left: marginLeft, right: marginRight), - child: TextButton( - onPressed: () => null, - // (widget.hasLengthSwitcher || - // !settingsStore - // .allowBiometricalAuthentication) - // ? null - // : () { - // FIXME - // if (authStore != null) { - // WidgetsBinding.instance.addPostFrameCallback((_) { - // final biometricAuth = BiometricAuth(); - // biometricAuth.isAuthenticated().then( - // (isAuth) { - // if (isAuth) { - // authStore.biometricAuth(); - // _key.currentState.showSnackBar( - // SnackBar( - // content: Text(S.of(context).authenticated), - // backgroundColor: Colors.green, - // ), - // ); - // } - // } - // ); - // }); - // } - // }, - // FIX-ME: Style - //color: Theme.of(context).backgroundColor, - //shape: CircleBorder(), - child: Container() - // (widget.hasLengthSwitcher || - // !settingsStore - // .allowBiometricalAuthentication) - // ? Offstage() - // : faceImage, - ), - ); - } else if (index == 10) { - index = 0; - } else if (index == 11) { - return Container( - margin: EdgeInsets.only(left: marginLeft, right: marginRight), - child: TextButton( - onPressed: () => _pop(), - style: TextButton.styleFrom( - backgroundColor: Theme.of(context).backgroundColor, - shape: CircleBorder(), - ), - child: deleteIconImage, - ), - ); - } else { - index++; - } - - return Container( - margin: EdgeInsets.only(left: marginLeft, right: marginRight), - child: TextButton( - onPressed: () => _push(index), - style: TextButton.styleFrom( - backgroundColor: Theme.of(context).backgroundColor, - shape: CircleBorder(), - ), - child: Text('$index', - style: TextStyle( - fontSize: 30.0, - fontWeight: FontWeight.w600, - color: - Theme.of(context).primaryTextTheme!.headline6!.color!)), - ), - ); - }), - ), - ) - : null, - ), - ), - ) - ], + ), ), ); } diff --git a/lib/utils/responsive_layout_util.dart b/lib/utils/responsive_layout_util.dart index c1e59722c..d685b40d2 100644 --- a/lib/utils/responsive_layout_util.dart +++ b/lib/utils/responsive_layout_util.dart @@ -2,6 +2,7 @@ import 'package:flutter/material.dart'; class ResponsiveLayoutUtil { static const double _kMobileThreshold = 900; + static const double kDesktopMaxWidthConstraint = 400; const ResponsiveLayoutUtil._();