Ecosystem/cake_wallet
1
0
Fork 0
mirror of https://github.com/cake-tech/cake_wallet.git synced 2025-01-22 02:34:59 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 12

Merge pull request #774 from cake-tech/CW-310-add-constraints-to-images-on-macos

Browse source 
[CW-310] Add constraints to images on macos
This commit is contained in:
Omar Hatem 2023-02-10 23:29:36 +02:00 committed by GitHub
commit 770e3b6f52
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 351 additions and 343 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

53
lib/src/screens/new_wallet/new_wallet_page.dart
View file

@ -1,6 +1,7 @@
import 'package:cake_wallet/entities/generate_name.dart'; import 'package:cake_wallet/entities/generate_name.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';
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:mobx/mobx.dart'; import 'package:mobx/mobx.dart';
import 'package:flutter_mobx/flutter_mobx.dart'; import 'package:flutter_mobx/flutter_mobx.dart';
@ -24,18 +25,14 @@ class NewWalletPage extends BasePage {
final walletNameImage = Image.asset('assets/images/wallet_name.png'); final walletNameImage = Image.asset('assets/images/wallet_name.png');
final walletNameLightImage = final walletNameLightImage = Image.asset('assets/images/wallet_name_light.png');
Image.asset('assets/images/wallet_name_light.png');
@override @override
String get title => S.current.new_wallet; String get title => S.current.new_wallet;
@override @override
Widget body(BuildContext context) => WalletNameForm( Widget body(BuildContext context) => WalletNameForm(
_walletNewVM, _walletNewVM, currentTheme.type == ThemeType.dark ? walletNameImage : walletNameLightImage);
currentTheme.type == ThemeType.dark
? walletNameImage
: walletNameLightImage);
} }
class WalletNameForm extends StatefulWidget { class WalletNameForm extends StatefulWidget {
@ -64,11 +61,9 @@ class _WalletNameFormState extends State<WalletNameForm> {
@override @override
void initState() { void initState() {
_stateReaction ??= _stateReaction ??= reaction((_) => _walletNewVM.state, (ExecutionState state) {
reaction((_) => _walletNewVM.state, (ExecutionState state) {
if (state is ExecutedSuccessfullyState) { if (state is ExecutedSuccessfullyState) {
Navigator.of(context) Navigator.of(context).pushNamed(Routes.preSeed, arguments: _walletNewVM.type);
.pushNamed(Routes.preSeed, arguments: _walletNewVM.type);
} }
if (state is FailureState) { if (state is FailureState) {
@ -90,18 +85,22 @@ class _WalletNameFormState extends State<WalletNameForm> {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return Container( return Padding(
padding: EdgeInsets.only(top: 24), padding: EdgeInsets.only(top: 24),
child: ScrollableWithBottomSection( child: ScrollableWithBottomSection(
contentPadding: EdgeInsets.only(left: 24, right: 24, bottom: 24), contentPadding: EdgeInsets.only(left: 24, right: 24, bottom: 24),
content: content: Center(
Column(crossAxisAlignment: CrossAxisAlignment.center, children: [ child: ConstrainedBox(
constraints:
BoxConstraints(maxWidth: ResponsiveLayoutUtil.kDesktopMaxWidthConstraint),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Padding( Padding(
padding: EdgeInsets.only(left: 12, right: 12), padding: EdgeInsets.only(left: 12, right: 12),
child: AspectRatio( child: AspectRatio(
aspectRatio: aspectRatioImage, aspectRatio: aspectRatioImage,
child: child: FittedBox(child: widget.walletImage, fit: BoxFit.fill)),
FittedBox(child: widget.walletImage, fit: BoxFit.fill)),
), ),
Padding( Padding(
padding: EdgeInsets.only(top: 24), padding: EdgeInsets.only(top: 24),
@ -117,16 +116,12 @@ class _WalletNameFormState extends State<WalletNameForm> {
style: TextStyle( style: TextStyle(
fontSize: 20.0, fontSize: 20.0,
fontWeight: FontWeight.w600, fontWeight: FontWeight.w600,
color: color: Theme.of(context).primaryTextTheme!.headline6!.color!),
Theme.of(context).primaryTextTheme!.headline6!.color!),
decoration: InputDecoration( decoration: InputDecoration(
hintStyle: TextStyle( hintStyle: TextStyle(
fontSize: 18.0, fontSize: 18.0,
fontWeight: FontWeight.w500, fontWeight: FontWeight.w500,
color: Theme.of(context) color: Theme.of(context).accentTextTheme!.headline2!.color!),
.accentTextTheme!
.headline2!
.color!),
hintText: S.of(context).wallet_name, hintText: S.of(context).wallet_name,
focusedBorder: UnderlineInputBorder( focusedBorder: UnderlineInputBorder(
borderSide: BorderSide( borderSide: BorderSide(
@ -194,14 +189,17 @@ class _WalletNameFormState extends State<WalletNameForm> {
Padding( Padding(
padding: EdgeInsets.only(top: 24), padding: EdgeInsets.only(top: 24),
child: SeedLanguageSelector( child: SeedLanguageSelector(
key: _languageSelectorKey, key: _languageSelectorKey, initialSelected: defaultSeedLanguage),
initialSelected: defaultSeedLanguage),
) )
] ]
]), ],
bottomSectionPadding: ),
EdgeInsets.all(24), ),
bottomSection: Column( ),
bottomSectionPadding: EdgeInsets.all(24),
bottomSection: ConstrainedBox(
constraints: BoxConstraints(maxWidth: ResponsiveLayoutUtil.kDesktopMaxWidthConstraint),
child: Column(
children: [ children: [
Observer( Observer(
builder: (context) { builder: (context) {
@ -224,6 +222,7 @@ class _WalletNameFormState extends State<WalletNameForm> {
child: Text(S.of(context).advanced_privacy_settings), child: Text(S.of(context).advanced_privacy_settings),
), ),
], ],
),
)), )),
); );
} }

44
lib/src/screens/new_wallet/new_wallet_type_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/themes/theme_base.dart'; import 'package:cake_wallet/themes/theme_base.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
@ -13,8 +14,7 @@ class NewWalletTypePage extends BasePage {
final void Function(BuildContext, WalletType) onTypeSelected; final void Function(BuildContext, WalletType) onTypeSelected;
final walletTypeImage = Image.asset('assets/images/wallet_type.png'); final walletTypeImage = Image.asset('assets/images/wallet_type.png');
final walletTypeLightImage = final walletTypeLightImage = Image.asset('assets/images/wallet_type_light.png');
Image.asset('assets/images/wallet_type_light.png');
@override @override
String get title => S.current.wallet_list_restore_wallet; String get title => S.current.wallet_list_restore_wallet;
@ -22,14 +22,11 @@ class NewWalletTypePage extends BasePage {
@override @override
Widget body(BuildContext context) => WalletTypeForm( Widget body(BuildContext context) => WalletTypeForm(
onTypeSelected: onTypeSelected, onTypeSelected: onTypeSelected,
walletImage: currentTheme.type == ThemeType.dark walletImage: currentTheme.type == ThemeType.dark ? walletTypeImage : walletTypeLightImage);
? walletTypeImage
: walletTypeLightImage);
} }
class WalletTypeForm extends StatefulWidget { class WalletTypeForm extends StatefulWidget {
WalletTypeForm({required this.onTypeSelected, WalletTypeForm({required this.onTypeSelected, required this.walletImage});
required this.walletImage});
final void Function(BuildContext, WalletType) onTypeSelected; final void Function(BuildContext, WalletType) onTypeSelected;
final Image walletImage; final Image walletImage;
@ -39,22 +36,16 @@ class WalletTypeForm extends StatefulWidget {
} }
class WalletTypeFormState extends State<WalletTypeForm> { class WalletTypeFormState extends State<WalletTypeForm> {
WalletTypeFormState() WalletTypeFormState() : types = availableWalletTypes;
: types = availableWalletTypes;
static const aspectRatioImage = 1.22; static const aspectRatioImage = 1.22;
final moneroIcon = final moneroIcon = Image.asset('assets/images/monero_logo.png', height: 24, width: 24);
Image.asset('assets/images/monero_logo.png', height: 24, width: 24); final bitcoinIcon = Image.asset('assets/images/bitcoin.png', height: 24, width: 24);
final bitcoinIcon = final litecoinIcon = Image.asset('assets/images/litecoin_icon.png', height: 24, width: 24);
Image.asset('assets/images/bitcoin.png', height: 24, width: 24);
final litecoinIcon =
Image.asset('assets/images/litecoin_icon.png', height: 24, width: 24);
final walletTypeImage = Image.asset('assets/images/wallet_type.png'); final walletTypeImage = Image.asset('assets/images/wallet_type.png');
final walletTypeLightImage = final walletTypeLightImage = Image.asset('assets/images/wallet_type_light.png');
Image.asset('assets/images/wallet_type_light.png'); final havenIcon = Image.asset('assets/images/haven_logo.png', height: 24, width: 24);
final havenIcon =
Image.asset('assets/images/haven_logo.png', height: 24, width: 24);
WalletType? selected; WalletType? selected;
List<WalletType> types; List<WalletType> types;
@ -69,7 +60,10 @@ class WalletTypeFormState extends State<WalletTypeForm> {
Widget build(BuildContext context) { Widget build(BuildContext context) {
return ScrollableWithBottomSection( return ScrollableWithBottomSection(
contentPadding: EdgeInsets.only(left: 24, right: 24, bottom: 24), contentPadding: EdgeInsets.only(left: 24, right: 24, bottom: 24),
content: Column( content: Center(
child: ConstrainedBox(
constraints: BoxConstraints(maxWidth: ResponsiveLayoutUtil.kDesktopMaxWidthConstraint),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[ children: <Widget>[
Padding( Padding(
@ -99,14 +93,19 @@ class WalletTypeFormState extends State<WalletTypeForm> {
)) ))
], ],
), ),
),
),
bottomSectionPadding: EdgeInsets.only(left: 24, right: 24, bottom: 24), bottomSectionPadding: EdgeInsets.only(left: 24, right: 24, bottom: 24),
bottomSection: PrimaryButton( bottomSection: ConstrainedBox(
constraints: BoxConstraints(maxWidth: ResponsiveLayoutUtil.kDesktopMaxWidthConstraint),
child: PrimaryButton(
onPressed: () => onTypeSelected(), onPressed: () => onTypeSelected(),
text: S.of(context).seed_language_next, text: S.of(context).seed_language_next,
color: Theme.of(context).accentTextTheme.bodyText1!.color!, color: Theme.of(context).accentTextTheme.bodyText1!.color!,
textColor: Colors.white, textColor: Colors.white,
isDisabled: selected == null, isDisabled: selected == null,
), ),
),
); );
} }
@ -121,7 +120,8 @@ class WalletTypeFormState extends State<WalletTypeForm> {
case WalletType.haven: case WalletType.haven:
return havenIcon; return havenIcon;
default: default:
throw Exception('_iconFor: Incorrect Wallet Type. Cannot find icon for Wallet Type: ${type.toString()}'); throw Exception(
'_iconFor: Incorrect Wallet Type. Cannot find icon for Wallet Type: ${type.toString()}');
} }
} }

96
lib/src/screens/pin_code/pin_code_widget.dart
View file

@ -1,3 +1,4 @@
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:another_flushbar/flushbar.dart'; import 'package:another_flushbar/flushbar.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
@ -5,14 +6,14 @@ import 'package:cake_wallet/generated/i18n.dart';
import 'package:flutter/services.dart'; import 'package:flutter/services.dart';
class PinCodeWidget extends StatefulWidget { class PinCodeWidget extends StatefulWidget {
PinCodeWidget( PinCodeWidget({
{required Key key, required Key key,
required this.onFullPin, required this.onFullPin,
required this.initialPinLength, required this.initialPinLength,
required this.onChangedPin, required this.onChangedPin,
required this.hasLengthSwitcher, required this.hasLengthSwitcher,
this.onChangedPinLength,}) this.onChangedPinLength,
: super(key: key); }) : super(key: key);
final void Function(String pin, PinCodeState state) onFullPin; final void Function(String pin, PinCodeState state) onFullPin;
final void Function(String pin) onChangedPin; final void Function(String pin) onChangedPin;
@ -76,8 +77,7 @@ class PinCodeState<T extends PinCodeWidget> extends State<T> {
void setDefaultPinLength() => changePinLength(widget.initialPinLength); void setDefaultPinLength() => changePinLength(widget.initialPinLength);
void calculateAspectRatio() { void calculateAspectRatio() {
final renderBox = final renderBox = _gridViewKey.currentContext!.findRenderObject() as RenderBox;
_gridViewKey.currentContext!.findRenderObject() as RenderBox;
final cellWidth = renderBox.size.width / 3; final cellWidth = renderBox.size.width / 3;
final cellHeight = renderBox.size.height / 4; final cellHeight = renderBox.size.height / 4;
@ -90,8 +90,7 @@ class PinCodeState<T extends PinCodeWidget> extends State<T> {
void changeProcessText(String text) { void changeProcessText(String text) {
hideProgressText(); hideProgressText();
_progressBar = createBar<void>(text, duration: null) _progressBar = createBar<void>(text, duration: null)..show(_key.currentContext!);
..show(_key.currentContext!);
} }
void close() { void close() {
@ -105,8 +104,8 @@ class PinCodeState<T extends PinCodeWidget> extends State<T> {
} }
@override @override
Widget build(BuildContext context) => Scaffold( Widget build(BuildContext context) =>
key: _key, body: body(context), resizeToAvoidBottomInset: false); Scaffold(key: _key, body: body(context), resizeToAvoidBottomInset: false);
Widget body(BuildContext context) { Widget body(BuildContext context) {
final deleteIconImage = Image.asset( final deleteIconImage = Image.asset(
@ -136,7 +135,8 @@ class PinCodeState<T extends PinCodeWidget> extends State<T> {
child: Container( child: Container(
color: Theme.of(context).backgroundColor, color: Theme.of(context).backgroundColor,
padding: EdgeInsets.only(left: 40.0, right: 40.0, bottom: 40.0), padding: EdgeInsets.only(left: 40.0, right: 40.0, bottom: 40.0),
child: Column(children: <Widget>[ child: Column(
children: <Widget>[
Spacer(flex: 2), Spacer(flex: 2),
Text(title, Text(title,
style: TextStyle( style: TextStyle(
@ -181,19 +181,24 @@ class PinCodeState<T extends PinCodeWidget> extends State<T> {
style: TextStyle( style: TextStyle(
fontSize: 14.0, fontSize: 14.0,
fontWeight: FontWeight.normal, fontWeight: FontWeight.normal,
color: Theme.of(context) color: Theme.of(context).accentTextTheme!.bodyText2!.decorationColor!),
.accentTextTheme! ),
.bodyText2! )
.decorationColor!),
))
], ],
Spacer(flex: 1), Spacer(flex: 1),
Flexible( Flexible(
flex: 24, flex: 24,
child: Center(
child: ConstrainedBox(
constraints: BoxConstraints(
maxWidth: ResponsiveLayoutUtil.kDesktopMaxWidthConstraint,
),
child: Container( child: Container(
key: _gridViewKey, key: _gridViewKey,
child: _aspectRatio > 0 child: _aspectRatio > 0
? GridView.count( ? ScrollConfiguration(
behavior: ScrollConfiguration.of(context).copyWith(scrollbars: false),
child: GridView.count(
shrinkWrap: true, shrinkWrap: true,
crossAxisCount: 3, crossAxisCount: 3,
childAspectRatio: _aspectRatio, childAspectRatio: _aspectRatio,
@ -204,8 +209,7 @@ class PinCodeState<T extends PinCodeWidget> extends State<T> {
if (index == 9) { if (index == 9) {
return Container( return Container(
margin: EdgeInsets.only( margin: EdgeInsets.only(left: marginLeft, right: marginRight),
left: marginLeft, right: marginRight),
child: TextButton( child: TextButton(
onPressed: () => null, onPressed: () => null,
// (widget.hasLengthSwitcher || // (widget.hasLengthSwitcher ||
@ -214,25 +218,25 @@ class PinCodeState<T extends PinCodeWidget> extends State<T> {
// ? null // ? null
// : () { // : () {
// FIXME // FIXME
// if (authStore != null) { // if (authStore != null) {
// WidgetsBinding.instance.addPostFrameCallback((_) { // WidgetsBinding.instance.addPostFrameCallback((_) {
// final biometricAuth = BiometricAuth(); // final biometricAuth = BiometricAuth();
// biometricAuth.isAuthenticated().then( // biometricAuth.isAuthenticated().then(
// (isAuth) { // (isAuth) {
// if (isAuth) { // if (isAuth) {
// authStore.biometricAuth(); // authStore.biometricAuth();
// _key.currentState.showSnackBar( // _key.currentState.showSnackBar(
// SnackBar( // SnackBar(
// content: Text(S.of(context).authenticated), // content: Text(S.of(context).authenticated),
// backgroundColor: Colors.green, // backgroundColor: Colors.green,
// ), // ),
// ); // );
// } // }
// } // }
// ); // );
// }); // });
// } // }
// }, // },
// FIX-ME: Style // FIX-ME: Style
//color: Theme.of(context).backgroundColor, //color: Theme.of(context).backgroundColor,
//shape: CircleBorder(), //shape: CircleBorder(),
@ -248,8 +252,7 @@ class PinCodeState<T extends PinCodeWidget> extends State<T> {
index = 0; index = 0;
} else if (index == 11) { } else if (index == 11) {
return Container( return Container(
margin: EdgeInsets.only( margin: EdgeInsets.only(left: marginLeft, right: marginRight),
left: marginLeft, right: marginRight),
child: TextButton( child: TextButton(
onPressed: () => _pop(), onPressed: () => _pop(),
style: TextButton.styleFrom( style: TextButton.styleFrom(
@ -264,8 +267,7 @@ class PinCodeState<T extends PinCodeWidget> extends State<T> {
} }
return Container( return Container(
margin: EdgeInsets.only( margin: EdgeInsets.only(left: marginLeft, right: marginRight),
left: marginLeft, right: marginRight),
child: TextButton( child: TextButton(
onPressed: () => _push(index), onPressed: () => _push(index),
style: TextButton.styleFrom( style: TextButton.styleFrom(
@ -283,9 +285,15 @@ class PinCodeState<T extends PinCodeWidget> extends State<T> {
), ),
); );
}), }),
),
) )
: null)) : null,
]), ),
),
),
)
],
),
), ),
); );
} }

1
lib/utils/responsive_layout_util.dart
View file

@ -2,6 +2,7 @@ import 'package:flutter/material.dart';
class ResponsiveLayoutUtil { class ResponsiveLayoutUtil {
static const double _kMobileThreshold = 900; static const double _kMobileThreshold = 900;
static const double kDesktopMaxWidthConstraint = 400;
const ResponsiveLayoutUtil._(); const ResponsiveLayoutUtil._();