Merge pull request #68 from cake-tech/CWA-221-adaptive-screens

Cwa 221 adaptive screens
This commit is contained in:
Oleksandr Sobol 2020-06-11 18:37:43 +03:00 committed by GitHub
commit 0b53971051
19 changed files with 433 additions and 289 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 94 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 151 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 150 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 315 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 191 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 295 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 294 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 640 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 30 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 50 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 50 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 97 KiB

View file

@ -374,7 +374,6 @@ class WalletCardState extends State<WalletCard> {
child: Container(
height: 90,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
@ -396,20 +395,23 @@ class WalletCardState extends State<WalletCard> {
try {
_addressObserverKey.currentState.setState(() {
messageBoxHeight = 0;
messageBoxWidth = cardWidth - 10;
messageBoxWidth = cardWidth;
});
} catch(e) {
print('${e.toString()}');
}
});
},
child: Padding(
padding: EdgeInsets.only(top: 5),
child: Text(
walletStore.subaddress.address,
style: TextStyle(
fontSize: 14,
fontSize: 12,
color: Theme.of(context).primaryTextTheme.title.color
),
),
),
)
],
),

View file

@ -11,11 +11,13 @@ import 'package:cake_wallet/src/domain/services/wallet_list_service.dart';
import 'package:cake_wallet/src/domain/services/wallet_service.dart';
import 'package:cake_wallet/src/screens/base_page.dart';
import 'package:cake_wallet/src/widgets/primary_button.dart';
import 'package:cake_wallet/src/widgets/scollable_with_bottom_section.dart';
import 'package:cake_wallet/src/stores/seed_language/seed_language_store.dart';
import 'package:cake_wallet/src/screens/new_wallet/widgets/select_button.dart';
import 'package:cake_wallet/src/screens/seed_language/widgets/seed_language_picker.dart';
import 'package:cake_wallet/src/widgets/alert_with_one_action.dart';
import 'package:cake_wallet/src/widgets/base_text_form_field.dart';
import 'package:cake_wallet/themes.dart';
import 'package:cake_wallet/theme_changer.dart';
class NewWalletPage extends BasePage {
NewWalletPage(
@ -30,6 +32,9 @@ class NewWalletPage extends BasePage {
@override
String get title => S.current.new_wallet;
@override
bool get resizeToAvoidBottomPadding => false;
@override
Widget body(BuildContext context) => WalletNameForm();
}
@ -44,7 +49,8 @@ class _WalletNameFormState extends State<WalletNameForm> {
final _formKey = GlobalKey<FormState>();
final nameController = TextEditingController();
final walletNameImage = Image.asset('assets/images/wallet_name.png');
final walletNameImageLight = Image.asset('assets/images/wallet_name_light.png');
final walletNameImageDark = Image.asset('assets/images/wallet_name.png');
@override
void dispose() {
@ -56,6 +62,9 @@ class _WalletNameFormState extends State<WalletNameForm> {
Widget build(BuildContext context) {
final walletCreationStore = Provider.of<WalletCreationStore>(context);
final seedLanguageStore = Provider.of<SeedLanguageStore>(context);
final _themeChanger = Provider.of<ThemeChanger>(context);
final walletNameImage = _themeChanger.getTheme() == Themes.darkTheme
? walletNameImageDark : walletNameImageLight;
final List<String> seedLocales = [
S.current.seed_language_english,
@ -98,8 +107,90 @@ class _WalletNameFormState extends State<WalletNameForm> {
});
return Container(
padding: EdgeInsets.all(24),
child: Column(
children: <Widget>[
Flexible(
flex: 2,
child: AspectRatio(
aspectRatio: aspectRatioImage,
child: FittedBox(child: walletNameImage, fit: BoxFit.fill)
)
),
Flexible(
flex: 3,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Column(
children: <Widget>[
Padding(
padding: EdgeInsets.only(top: 24),
child: ScrollableWithBottomSection(
child: Form(
key: _formKey,
child: BaseTextFormField(
controller: nameController,
textAlign: TextAlign.center,
textFontSize: 20.0,
hintText: S.of(context).wallet_name,
validator: (value) {
walletCreationStore.validateWalletName(value);
return walletCreationStore.errorMessage;
}
)
),
),
Padding(padding: EdgeInsets.only(top: 24),
child: Text(
S.of(context).seed_language_choose,
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 16.0,
fontWeight: FontWeight.w600,
color: Theme.of(context).primaryTextTheme.title.color
),
),
),
Padding(padding: EdgeInsets.only(top: 24),
child: Observer(
builder: (_) => SelectButton(
image: null,
text: seedLocales[seedLanguages.indexOf(seedLanguageStore.selectedSeedLanguage)],
color: Theme.of(context).accentTextTheme.title.backgroundColor,
textColor: Theme.of(context).primaryTextTheme.title.color,
onTap: () async => await showDialog(
context: context,
builder: (BuildContext context) => SeedLanguagePicker()
)
)
),
)
],
),
Observer(
builder: (context) {
return LoadingPrimaryButton(
onPressed: () {
if (_formKey.currentState.validate()) {
walletCreationStore.create(name: nameController.text,
language: seedLanguageStore.selectedSeedLanguage);
}
},
text: S.of(context).continue_text,
color: Colors.green,
textColor: Colors.white,
isLoading: walletCreationStore.state is WalletIsCreating,
isDisabled: walletCreationStore.isDisabledStatus,
);
},
)
],
)
)
],
)
/*ScrollableWithBottomSection(
contentPadding: EdgeInsets.only(left: 24, right: 24, bottom: 24),
content: Column(
crossAxisAlignment: CrossAxisAlignment.center,
@ -184,7 +275,7 @@ class _WalletNameFormState extends State<WalletNameForm> {
isDisabled: walletCreationStore.isDisabledStatus,
);
},
)),
)),*/
);
}
}

View file

@ -3,9 +3,11 @@ import 'package:flutter/cupertino.dart';
import 'package:cake_wallet/generated/i18n.dart';
import 'package:cake_wallet/src/screens/base_page.dart';
import 'package:cake_wallet/src/widgets/primary_button.dart';
import 'package:cake_wallet/src/widgets/scollable_with_bottom_section.dart';
import 'package:cake_wallet/src/screens/new_wallet/widgets/select_button.dart';
import 'package:cake_wallet/routes.dart';
import 'package:provider/provider.dart';
import 'package:cake_wallet/themes.dart';
import 'package:cake_wallet/theme_changer.dart';
class NewWalletTypePage extends BasePage {
@override
@ -25,7 +27,8 @@ class WalletTypeFormState extends State<WalletTypeForm> {
final moneroIcon = Image.asset('assets/images/monero.png', height: 24, width: 24);
final bitcoinIcon = Image.asset('assets/images/bitcoin.png', height: 24, width: 24);
final walletTypeImage = Image.asset('assets/images/wallet_type.png');
final walletTypeImageLight = Image.asset('assets/images/wallet_type_light.png');
final walletTypeImageDark = Image.asset('assets/images/wallet_type.png');
bool isDisabledButton;
bool isMoneroSelected;
@ -56,21 +59,30 @@ class WalletTypeFormState extends State<WalletTypeForm> {
@override
Widget build(BuildContext context) {
final _themeChanger = Provider.of<ThemeChanger>(context);
final walletTypeImage = _themeChanger.getTheme() == Themes.darkTheme
? walletTypeImageDark : walletTypeImageLight;
return Container(
padding: EdgeInsets.only(top: 24),
child: ScrollableWithBottomSection(
contentPadding: EdgeInsets.only(left: 24, right: 24, bottom: 24),
content: Column(
crossAxisAlignment: CrossAxisAlignment.center,
padding: EdgeInsets.all(24),
child: Column(
children: <Widget>[
Padding(
padding: EdgeInsets.only(left: 12, right: 12),
Flexible(
flex: 2,
child: AspectRatio(
aspectRatio: aspectRatioImage,
child: FittedBox(child: walletTypeImage, fit: BoxFit.fill)),
child: FittedBox(child: walletTypeImage, fit: BoxFit.fill)
)
),
Flexible(
flex: 3,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Column(
children: <Widget>[
Padding(
padding: EdgeInsets.only(top: 48),
padding: EdgeInsets.only(top: 24),
child: Text(
S.of(context).choose_wallet_currency,
textAlign: TextAlign.center,
@ -101,19 +113,18 @@ class WalletTypeFormState extends State<WalletTypeForm> {
)
],
),
bottomSectionPadding: EdgeInsets.only(
left: 24,
right: 24,
bottom: 24
),
bottomSection: PrimaryButton(
PrimaryButton(
onPressed: () => Navigator.of(context).pushNamed(Routes.newWallet),
text: S.of(context).seed_language_next,
color: Colors.green,
textColor: Colors.white,
isDisabled: isDisabledButton,
),
),
)
],
)
)
],
)
);
}

View file

@ -8,12 +8,14 @@ import 'package:cake_wallet/generated/i18n.dart';
import 'package:cake_wallet/src/widgets/primary_button.dart';
import 'package:cake_wallet/src/stores/wallet_seed/wallet_seed_store.dart';
import 'package:cake_wallet/src/screens/base_page.dart';
import 'package:cake_wallet/src/widgets/scollable_with_bottom_section.dart';
import 'package:cake_wallet/themes.dart';
import 'package:cake_wallet/theme_changer.dart';
class SeedPage extends BasePage {
SeedPage({this.onCloseCallback});
static final image = Image.asset('assets/images/crypto_lock.png');
static final imageLight = Image.asset('assets/images/crypto_lock_light.png');
static final imageDark = Image.asset('assets/images/crypto_lock.png');
@override
String get title => S.current.seed_title;
@ -58,19 +60,28 @@ class SeedPage extends BasePage {
@override
Widget body(BuildContext context) {
final walletSeedStore = Provider.of<WalletSeedStore>(context);
final _themeChanger = Provider.of<ThemeChanger>(context);
final image = _themeChanger.getTheme() == Themes.darkTheme
? imageDark : imageLight;
String _seed;
return Container(
width: double.infinity,
height: double.infinity,
child: ScrollableWithBottomSection(
contentPadding: EdgeInsets.only(left: 40, right: 40, bottom: 20),
content: Column(
padding: EdgeInsets.all(24),
child: Column(
children: <Widget>[
Padding(
padding: EdgeInsets.only(top: 33),
child: image,
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(
@ -103,16 +114,8 @@ class SeedPage extends BasePage {
);
}
),
)
],
),
bottomSectionPadding: EdgeInsets.only(
left: 24,
right: 24,
bottom: 52
),
bottomSection: Container(
child: Row(
Row(
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Flexible(
@ -153,9 +156,12 @@ class SeedPage extends BasePage {
)
)
],
),
),
),
)
],
)
)
],
)
);
}
}

View file

@ -5,10 +5,11 @@ import 'package:flutter/cupertino.dart';
import 'package:cake_wallet/generated/i18n.dart';
import 'package:cake_wallet/src/screens/base_page.dart';
import 'package:cake_wallet/src/widgets/primary_button.dart';
import 'package:cake_wallet/src/widgets/scollable_with_bottom_section.dart';
import 'package:cake_wallet/src/stores/seed_language/seed_language_store.dart';
import 'package:cake_wallet/src/screens/new_wallet/widgets/select_button.dart';
import 'package:cake_wallet/src/screens/seed_language/widgets/seed_language_picker.dart';
import 'package:cake_wallet/themes.dart';
import 'package:cake_wallet/theme_changer.dart';
class SeedLanguage extends BasePage {
@override
@ -22,11 +23,15 @@ class SeedLanguageForm extends StatefulWidget {
class SeedLanguageFormState extends State<SeedLanguageForm> {
static const aspectRatioImage = 1.22;
final walletNameImage = Image.asset('assets/images/wallet_name.png');
final walletNameImageLight = Image.asset('assets/images/wallet_name_light.png');
final walletNameImageDark = Image.asset('assets/images/wallet_name.png');
@override
Widget build(BuildContext context) {
final seedLanguageStore = Provider.of<SeedLanguageStore>(context);
final _themeChanger = Provider.of<ThemeChanger>(context);
final walletNameImage = _themeChanger.getTheme() == Themes.darkTheme
? walletNameImageDark : walletNameImageLight;
final List<String> seedLocales = [
S.current.seed_language_english,
@ -40,19 +45,24 @@ class SeedLanguageFormState extends State<SeedLanguageForm> {
];
return Container(
padding: EdgeInsets.only(top: 24),
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),
padding: EdgeInsets.all(24),
child: Column(
children: <Widget>[
Flexible(
flex: 2,
child: AspectRatio(
aspectRatio: aspectRatioImage,
child: FittedBox(child: walletNameImage, fit: BoxFit.fill)),
child: FittedBox(child: walletNameImage, fit: BoxFit.fill)
)
),
Padding(padding: EdgeInsets.only(top: 40),
Flexible(
flex: 3,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Column(
children: <Widget>[
Padding(padding: EdgeInsets.only(top: 48),
child: Text(
S.of(context).seed_language_choose,
textAlign: TextAlign.center,
@ -77,9 +87,9 @@ class SeedLanguageFormState extends State<SeedLanguageForm> {
)
),
)
]),
bottomSectionPadding: EdgeInsets.only(left: 24, right: 24, bottom: 24),
bottomSection: Observer(
],
),
Observer(
builder: (context) {
return PrimaryButton(
onPressed: () =>
@ -88,7 +98,12 @@ class SeedLanguageFormState extends State<SeedLanguageForm> {
color: Colors.green,
textColor: Colors.white);
},
)),
)
],
)
)
],
)
);
}
}

View file

@ -4,11 +4,14 @@ import 'package:cake_wallet/routes.dart';
import 'package:cake_wallet/src/widgets/primary_button.dart';
import 'package:cake_wallet/src/screens/base_page.dart';
import 'package:cake_wallet/generated/i18n.dart';
import 'package:cake_wallet/src/widgets/scollable_with_bottom_section.dart';
import 'package:provider/provider.dart';
import 'package:cake_wallet/themes.dart';
import 'package:cake_wallet/theme_changer.dart';
class WelcomePage extends BasePage {
static const aspectRatioImage = 1.25;
final welcomeImage = Image.asset('assets/images/welcome.png');
final welcomeImageLight = Image.asset('assets/images/welcome_light.png');
final welcomeImageDark = Image.asset('assets/images/welcome.png');
@override
Widget build(BuildContext context) {
@ -20,6 +23,10 @@ class WelcomePage extends BasePage {
@override
Widget body(BuildContext context) {
final _themeChanger = Provider.of<ThemeChanger>(context);
final welcomeImage = _themeChanger.getTheme() == Themes.darkTheme
? welcomeImageDark : welcomeImageLight;
final newWalletImage = Image.asset('assets/images/new_wallet.png',
height: 12,
width: 12,
@ -30,21 +37,26 @@ class WelcomePage extends BasePage {
color: Theme.of(context).primaryTextTheme.title.color);
return Container(
padding: EdgeInsets.only(top: 20),
child: ScrollableWithBottomSection(
contentPadding: EdgeInsets.only(bottom: 20),
content: Column(
children: <Widget>[
AspectRatio(
aspectRatio: aspectRatioImage,
child: FittedBox(child: welcomeImage, fit: BoxFit.fill)),
Padding(
padding: EdgeInsets.only(left: 24, right: 24, top: 40),
padding: EdgeInsets.all(24),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Text(
Flexible(
flex: 2,
child: AspectRatio(
aspectRatio: aspectRatioImage,
child: FittedBox(child: welcomeImage, fit: BoxFit.fill)
)
),
Flexible(
flex: 3,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Column(
children: <Widget>[
Padding(
padding: EdgeInsets.only(top: 24),
child: Text(
S.of(context).welcome,
style: TextStyle(
fontSize: 18,
@ -52,6 +64,7 @@ class WelcomePage extends BasePage {
),
textAlign: TextAlign.center,
),
),
Padding(
padding: EdgeInsets.only(top: 10),
child: Text(
@ -78,11 +91,8 @@ class WelcomePage extends BasePage {
),
],
),
)
],
),
bottomSectionPadding: EdgeInsets.only(left: 24, right: 24, bottom: 20),
bottomSection: Column(children: <Widget>[
Column(
children: <Widget>[
Text(
S.of(context).please_make_selection,
style: TextStyle(
@ -111,8 +121,13 @@ class WelcomePage extends BasePage {
color: Theme.of(context).primaryTextTheme.overline.color,
textColor: Theme.of(context).primaryTextTheme.title.color),
)
]),
),
],
)
],
)
)
],
)
);
}
}

View file

@ -14,6 +14,8 @@ class BaseTextFormField extends StatelessWidget {
this.textColor,
this.hintColor,
this.borderColor,
this.textFontSize = 16.0,
this.hintFontSize = 16.0,
this.prefix,
this.suffix,
this.suffixIcon,
@ -32,6 +34,8 @@ class BaseTextFormField extends StatelessWidget {
final Color textColor;
final Color hintColor;
final Color borderColor;
final double textFontSize;
final double hintFontSize;
final Widget prefix;
final Widget suffix;
final Widget suffixIcon;
@ -50,7 +54,7 @@ class BaseTextFormField extends StatelessWidget {
inputFormatters: inputFormatters,
enabled: enabled,
style: TextStyle(
fontSize: 16.0,
fontSize: textFontSize,
color: textColor ?? Theme.of(context).primaryTextTheme.title.color
),
decoration: InputDecoration(
@ -59,7 +63,7 @@ class BaseTextFormField extends StatelessWidget {
suffixIcon: suffixIcon,
hintStyle: TextStyle(
color: hintColor ?? Theme.of(context).primaryTextTheme.caption.color,
fontSize: 16
fontSize: hintFontSize
),
hintText: hintText,
focusedBorder: UnderlineInputBorder(