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

Cwa 221 adaptive screens

lib/src/screens/dashboard/widgets/wallet_card.dart

@@ -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
                                       ),
                                     ),
+                                  ),
                                 )
                               ],
                             ),

lib/src/screens/new_wallet/new_wallet_page.dart

@@ -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,
               );
             },
-          )),
+          )),*/
     );
   }
 }

lib/src/screens/new_wallet/new_wallet_type_page.dart

@@ -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),
+      padding: EdgeInsets.all(24),
-      child: ScrollableWithBottomSection(
+      child: Column(
-        contentPadding: EdgeInsets.only(left: 24, right: 24, bottom: 24),
-        content: Column(
-          crossAxisAlignment: CrossAxisAlignment.center,
         children: <Widget>[
-            Padding(
+          Flexible(
-              padding: EdgeInsets.only(left: 12, right: 12),
+            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(
+                PrimaryButton(
-          left: 24,
-          right: 24,
-          bottom: 24
-        ),
-        bottomSection: PrimaryButton(
                   onPressed: () => Navigator.of(context).pushNamed(Routes.newWallet),
                   text: S.of(context).seed_language_next,
                   color: Colors.green,
                   textColor: Colors.white,
                   isDisabled: isDisabledButton,
-        ),
+                )
-      ),
+              ],
+            )
+          )
+        ],
+      )
     );
   }
 

lib/src/screens/seed/seed_page.dart

@@ -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,
+      padding: EdgeInsets.all(24),
-      height: double.infinity,
+      child: Column(
-      child: ScrollableWithBottomSection(
-        contentPadding: EdgeInsets.only(left: 40, right: 40, bottom: 20),
-        content: Column(
         children: <Widget>[
-            Padding(
+          Flexible(
-              padding: EdgeInsets.only(top: 33),
+            flex: 2,
-              child: image,
+            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(
+                Row(
-          left: 24,
-          right: 24,
-          bottom: 52
-        ),
-        bottomSection: Container(
-          child: Row(
                   mainAxisSize: MainAxisSize.max,
                   children: <Widget>[
                     Flexible(
@@ -153,9 +156,12 @@ class SeedPage extends BasePage {
                         )
                     )
                   ],
-          ),
+                )
-        ),
+              ],
-      ),
+            )
+          )
+        ],
+      )
     );
   }
 }

lib/src/screens/seed_language/seed_language_page.dart

@@ -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),
+      padding: EdgeInsets.all(24),
-      child: ScrollableWithBottomSection(
+      child: Column(
-          contentPadding: EdgeInsets.only(left: 24, right: 24, bottom: 24),
+        children: <Widget>[
-          content: Column(
+          Flexible(
-              crossAxisAlignment: CrossAxisAlignment.center,
+            flex: 2,
-              children: [
-                Padding(
-                  padding: EdgeInsets.only(left: 12, right: 12),
             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);
                   },
-          )),
+                )
+              ],
+            )
+          )
+        ],
+      )
     );
   }
 }

lib/src/screens/welcome/welcome_page.dart

@@ -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),
+      padding: EdgeInsets.all(24),
-      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),
       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 {
                     ),
                   ],
                 ),
-            )
+                Column(
-          ],
+                  children: <Widget>[
-        ),
-        bottomSectionPadding: EdgeInsets.only(left: 24, right: 24, bottom: 20),
-        bottomSection: 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),
                     )
-        ]),
+                  ],
-      ),
+                )
+              ],
+            )
+          )
+        ],
+      )
     );
   }
 }

lib/src/widgets/base_text_form_field.dart

@@ -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(