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,18 +395,21 @@ class WalletCardState extends State<WalletCard> {
                                       try {
                                         _addressObserverKey.currentState.setState(() {
                                           messageBoxHeight = 0;
-                                          messageBoxWidth = cardWidth - 10;
+                                          messageBoxWidth = cardWidth;
                                         });
                                       } catch(e) {
                                         print('${e.toString()}');
                                       }
                                     });
                                   },
-                                  child: Text(
+                                  child: Padding(
-                                    walletStore.subaddress.address,
+                                    padding: EdgeInsets.only(top: 5),
-                                    style: TextStyle(
+                                    child: Text(
-                                        fontSize: 14,
+                                      walletStore.subaddress.address,
+                                      style: TextStyle(
+                                        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.only(top: 24),
+      padding: EdgeInsets.all(24),
-      child: ScrollableWithBottomSection(
+      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: 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,64 +59,72 @@ 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),
+        children: <Widget>[
-        content: Column(
+          Flexible(
-          crossAxisAlignment: CrossAxisAlignment.center,
+            flex: 2,
-          children: <Widget>[
+            child: AspectRatio(
-            Padding(
+              aspectRatio: aspectRatioImage,
-              padding: EdgeInsets.only(left: 12, right: 12),
+              child: FittedBox(child: walletTypeImage, fit: BoxFit.fill)
-              child: AspectRatio(
-                  aspectRatio: aspectRatioImage,
-                  child: FittedBox(child: walletTypeImage, fit: BoxFit.fill)),
-            ),
-            Padding(
-              padding: EdgeInsets.only(top: 48),
-              child: Text(
-                S.of(context).choose_wallet_currency,
-                textAlign: TextAlign.center,
-                style: TextStyle(
-                  fontSize: 16,
-                  fontWeight: FontWeight.w600,
-                  color: Theme.of(context).primaryTextTheme.title.color
-                ),
-              ),
-            ),
-            Padding(
-              padding: EdgeInsets.only(top: 24),
-              child: SelectButton(
-                image: bitcoinIcon,
-                text: 'Bitcoin',
-                color: bitcoinBackgroundColor,
-                textColor: bitcoinTextColor,
-                onTap: () {}),
-            ),
-            Padding(
-              padding: EdgeInsets.only(top: 20),
-              child: SelectButton(
-                image: moneroIcon,
-                text: 'Monero',
-                color: moneroBackgroundColor,
-                textColor: moneroTextColor,
-                onTap: () => onSelectMoneroButton(context)),
             )
-          ],
+          ),
-        ),
+          Flexible(
-        bottomSectionPadding: EdgeInsets.only(
+            flex: 3,
-          left: 24,
+            child: Column(
-          right: 24,
+              mainAxisAlignment: MainAxisAlignment.spaceBetween,
-          bottom: 24
+              children: <Widget>[
-        ),
+                Column(
-        bottomSection: PrimaryButton(
+                  children: <Widget>[
-          onPressed: () => Navigator.of(context).pushNamed(Routes.newWallet),
+                    Padding(
-          text: S.of(context).seed_language_next,
+                      padding: EdgeInsets.only(top: 24),
-          color: Colors.green,
+                      child: Text(
-          textColor: Colors.white,
+                        S.of(context).choose_wallet_currency,
-          isDisabled: isDisabledButton,
+                        textAlign: TextAlign.center,
-        ),
+                        style: TextStyle(
-      ),
+                            fontSize: 16,
+                            fontWeight: FontWeight.w600,
+                            color: Theme.of(context).primaryTextTheme.title.color
+                        ),
+                      ),
+                    ),
+                    Padding(
+                      padding: EdgeInsets.only(top: 24),
+                      child: SelectButton(
+                          image: bitcoinIcon,
+                          text: 'Bitcoin',
+                          color: bitcoinBackgroundColor,
+                          textColor: bitcoinTextColor,
+                          onTap: () {}),
+                    ),
+                    Padding(
+                      padding: EdgeInsets.only(top: 20),
+                      child: SelectButton(
+                          image: moneroIcon,
+                          text: 'Monero',
+                          color: moneroBackgroundColor,
+                          textColor: moneroTextColor,
+                          onTap: () => onSelectMoneroButton(context)),
+                    )
+                  ],
+                ),
+                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,104 +60,108 @@ 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(
+        children: <Widget>[
-        contentPadding: EdgeInsets.only(left: 40, right: 40, bottom: 20),
+          Flexible(
-        content: Column(
+            flex: 2,
-          children: <Widget>[
+            child: AspectRatio(
-            Padding(
+              aspectRatio: 1,
-              padding: EdgeInsets.only(top: 33),
+              child: FittedBox(child: image, fit: BoxFit.fill)
-              child: image,
-            ),
-            Padding(
-              padding: EdgeInsets.only(top: 33),
-              child: Observer(
-                builder: (_) {
-                  _seed = walletSeedStore.seed;
-
-                  return Column(
-                    crossAxisAlignment: CrossAxisAlignment.center,
-                    children: <Widget>[
-                      Text(
-                        walletSeedStore.name,
-                        style: TextStyle(
-                          fontSize: 20,
-                          fontWeight: FontWeight.bold,
-                          color: Theme.of(context).primaryTextTheme.title.color
-                        ),
-                      ),
-                      Padding(
-                        padding: EdgeInsets.only(top: 20),
-                        child: Text(
-                          _seed,
-                          textAlign: TextAlign.center,
-                          style: TextStyle(
-                            fontSize: 14,
-                            color: Theme.of(context).primaryTextTheme.caption.color
-                          ),
-                        ),
-                      )
-                    ],
-                  );
-                }
-              ),
             )
-          ],
-        ),
-        bottomSectionPadding: EdgeInsets.only(
-          left: 24,
-          right: 24,
-          bottom: 52
-        ),
-        bottomSection: Container(
-          child: Row(
-            mainAxisSize: MainAxisSize.max,
-            children: <Widget>[
-              Flexible(
-                child: Container(
-                  padding: EdgeInsets.only(right: 8.0),
-                  child: PrimaryButton(
-                    onPressed: () => Share.text(
-                        S.of(context).seed_share,
-                        _seed,
-                        'text/plain'),
-                    text: S.of(context).save,
-                    color: Colors.green,
-                    textColor: Colors.white),
-                )
-              ),
-              Flexible(
-                child: Container(
-                  padding: EdgeInsets.only(left: 8.0),
-                  child: Builder(
-                    builder: (context) => PrimaryButton(
-                        onPressed: () {
-                          Clipboard.setData(
-                              ClipboardData(text: _seed));
-                          Scaffold.of(context).showSnackBar(
-                            SnackBar(
-                              content: Text(S
-                                  .of(context)
-                                  .copied_to_clipboard),
-                              backgroundColor: Colors.green,
-                              duration: Duration(milliseconds: 1500),
-                            ),
-                          );
-                        },
-                        text: S.of(context).copy,
-                        color: Colors.blue,
-                        textColor: Colors.white)
-                  ),
-                )
-              )
-            ],
           ),
-        ),
+          Flexible(
-      ),
+            flex: 3,
+            child: Column(
+              mainAxisAlignment: MainAxisAlignment.spaceBetween,
+              children: <Widget>[
+                Padding(
+                  padding: EdgeInsets.only(top: 33),
+                  child: Observer(
+                      builder: (_) {
+                        _seed = walletSeedStore.seed;
+
+                        return Column(
+                          crossAxisAlignment: CrossAxisAlignment.center,
+                          children: <Widget>[
+                            Text(
+                              walletSeedStore.name,
+                              style: TextStyle(
+                                  fontSize: 20,
+                                  fontWeight: FontWeight.bold,
+                                  color: Theme.of(context).primaryTextTheme.title.color
+                              ),
+                            ),
+                            Padding(
+                              padding: EdgeInsets.only(top: 20),
+                              child: Text(
+                                _seed,
+                                textAlign: TextAlign.center,
+                                style: TextStyle(
+                                    fontSize: 14,
+                                    color: Theme.of(context).primaryTextTheme.caption.color
+                                ),
+                              ),
+                            )
+                          ],
+                        );
+                      }
+                  ),
+                ),
+                Row(
+                  mainAxisSize: MainAxisSize.max,
+                  children: <Widget>[
+                    Flexible(
+                        child: Container(
+                          padding: EdgeInsets.only(right: 8.0),
+                          child: PrimaryButton(
+                              onPressed: () => Share.text(
+                                  S.of(context).seed_share,
+                                  _seed,
+                                  'text/plain'),
+                              text: S.of(context).save,
+                              color: Colors.green,
+                              textColor: Colors.white),
+                        )
+                    ),
+                    Flexible(
+                        child: Container(
+                          padding: EdgeInsets.only(left: 8.0),
+                          child: Builder(
+                              builder: (context) => PrimaryButton(
+                                  onPressed: () {
+                                    Clipboard.setData(
+                                        ClipboardData(text: _seed));
+                                    Scaffold.of(context).showSnackBar(
+                                      SnackBar(
+                                        content: Text(S
+                                            .of(context)
+                                            .copied_to_clipboard),
+                                        backgroundColor: Colors.green,
+                                        duration: Duration(milliseconds: 1500),
+                                      ),
+                                    );
+                                  },
+                                  text: S.of(context).copy,
+                                  color: Colors.blue,
+                                  textColor: Colors.white)
+                          ),
+                        )
+                    )
+                  ],
+                )
+              ],
+            )
+          )
+        ],
+      )
     );
   }
 }

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,55 +45,65 @@ 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: [
+            child: AspectRatio(
-                Padding(
+              aspectRatio: aspectRatioImage,
-                  padding: EdgeInsets.only(left: 12, right: 12),
+              child: FittedBox(child: walletNameImage, fit: BoxFit.fill)
-                  child: AspectRatio(
+            )
-                      aspectRatio: aspectRatioImage,
+          ),
-                      child: FittedBox(child: walletNameImage, fit: BoxFit.fill)),
+          Flexible(
-                ),
+            flex: 3,
-                Padding(padding: EdgeInsets.only(top: 40),
+            child: Column(
-                  child: Text(
+              mainAxisAlignment: MainAxisAlignment.spaceBetween,
-                    S.of(context).seed_language_choose,
+              children: <Widget>[
-                    textAlign: TextAlign.center,
+                Column(
-                    style: TextStyle(
+                  children: <Widget>[
-                        fontSize: 16.0,
+                    Padding(padding: EdgeInsets.only(top: 48),
-                        fontWeight: FontWeight.w600,
+                      child: Text(
-                        color: Theme.of(context).primaryTextTheme.title.color
+                        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(
-                Padding(padding: EdgeInsets.only(top: 24),
+                          builder: (_) => SelectButton(
-                  child: Observer(
+                              image: null,
-                      builder: (_) => SelectButton(
+                              text: seedLocales[seedLanguages.indexOf(seedLanguageStore.selectedSeedLanguage)],
-                          image: null,
+                              color: Theme.of(context).accentTextTheme.title.backgroundColor,
-                          text: seedLocales[seedLanguages.indexOf(seedLanguageStore.selectedSeedLanguage)],
+                              textColor: Theme.of(context).primaryTextTheme.title.color,
-                          color: Theme.of(context).accentTextTheme.title.backgroundColor,
+                              onTap: () async => await showDialog(
-                          textColor: Theme.of(context).primaryTextTheme.title.color,
+                                  context: context,
-                          onTap: () async => await showDialog(
+                                  builder: (BuildContext context) => SeedLanguagePicker()
-                              context: context,
+                              )
-                              builder: (BuildContext context) => SeedLanguagePicker()
                           )
-                      )
+                      ),
-                  ),
+                    )
+                  ],
+                ),
+                Observer(
+                  builder: (context) {
+                    return PrimaryButton(
+                        onPressed: () =>
+                            Navigator.of(context).popAndPushNamed(seedLanguageStore.currentRoute),
+                        text: S.of(context).seed_language_next,
+                        color: Colors.green,
+                        textColor: Colors.white);
+                  },
                 )
-              ]),
+              ],
-          bottomSectionPadding: EdgeInsets.only(left: 24, right: 24, bottom: 24),
+            )
-          bottomSection: Observer(
+          )
-            builder: (context) {
+        ],
-              return PrimaryButton(
+      )
-                  onPressed: () =>
-                      Navigator.of(context).popAndPushNamed(seedLanguageStore.currentRoute),
-                  text: S.of(context).seed_language_next,
-                  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,89 +37,97 @@ class WelcomePage extends BasePage {
         color: Theme.of(context).primaryTextTheme.title.color);
 
     return Container(
-      padding: EdgeInsets.only(top: 20),
+      padding: EdgeInsets.all(24),
-      child: ScrollableWithBottomSection(
+      child: Column(
-        contentPadding: EdgeInsets.only(bottom: 20),
+        children: <Widget>[
-        content: Column(
+          Flexible(
-          children: <Widget>[
+            flex: 2,
-            AspectRatio(
+            child: AspectRatio(
               aspectRatio: aspectRatioImage,
-              child: FittedBox(child: welcomeImage, fit: BoxFit.fill)),
+              child: FittedBox(child: welcomeImage, fit: BoxFit.fill)
-            Padding(
+            )
-              padding: EdgeInsets.only(left: 24, right: 24, top: 40),
+          ),
-              child: Column(
+          Flexible(
-                mainAxisAlignment: MainAxisAlignment.start,
+            flex: 3,
-                crossAxisAlignment: CrossAxisAlignment.center,
+            child: Column(
-                children: <Widget>[
+              mainAxisAlignment: MainAxisAlignment.spaceBetween,
-                  Text(
+              children: <Widget>[
-                    S.of(context).welcome,
+                Column(
-                    style: TextStyle(
+                  children: <Widget>[
-                      fontSize: 18,
+                    Padding(
-                      color: Theme.of(context).primaryTextTheme.caption.color,
+                      padding: EdgeInsets.only(top: 24),
-                    ),
+                      child: Text(
-                    textAlign: TextAlign.center,
+                        S.of(context).welcome,
-                  ),
+                        style: TextStyle(
-                  Padding(
+                          fontSize: 18,
-                    padding: EdgeInsets.only(top: 10),
+                          color: Theme.of(context).primaryTextTheme.caption.color,
-                    child: Text(
+                        ),
-                      S.of(context).cake_wallet,
+                        textAlign: TextAlign.center,
-                      style: TextStyle(
-                        fontSize: 36,
-                        fontWeight: FontWeight.bold,
-                        color: Theme.of(context).primaryTextTheme.title.color,
                       ),
-                      textAlign: TextAlign.center,
                     ),
-                  ),
+                    Padding(
-                  Padding(
+                      padding: EdgeInsets.only(top: 10),
-                    padding: EdgeInsets.only(top: 14),
+                      child: Text(
-                    child: Text(
+                        S.of(context).cake_wallet,
-                      S.of(context).first_wallet_text,
+                        style: TextStyle(
+                          fontSize: 36,
+                          fontWeight: FontWeight.bold,
+                          color: Theme.of(context).primaryTextTheme.title.color,
+                        ),
+                        textAlign: TextAlign.center,
+                      ),
+                    ),
+                    Padding(
+                      padding: EdgeInsets.only(top: 14),
+                      child: Text(
+                        S.of(context).first_wallet_text,
+                        style: TextStyle(
+                          fontSize: 16,
+                          fontWeight: FontWeight.w600,
+                          color: Theme.of(context).primaryTextTheme.caption.color,
+                        ),
+                        textAlign: TextAlign.center,
+                      ),
+                    ),
+                  ],
+                ),
+                Column(
+                  children: <Widget>[
+                    Text(
+                      S.of(context).please_make_selection,
                       style: TextStyle(
-                        fontSize: 16,
+                        fontSize: 12,
-                        fontWeight: FontWeight.w600,
                         color: Theme.of(context).primaryTextTheme.caption.color,
                       ),
                       textAlign: TextAlign.center,
                     ),
-                  ),
+                    Padding(
-                ],
+                      padding: EdgeInsets.only(top: 24),
-              ),
+                      child: PrimaryImageButton(
+                        onPressed: () => Navigator.pushNamed(context, Routes.newWalletFromWelcome),
+                        image: newWalletImage,
+                        text: S.of(context).create_new,
+                        color: Colors.white,
+                        textColor: Palette.oceanBlue,
+                        borderColor: Palette.oceanBlue,
+                      ),
+                    ),
+                    Padding(
+                      padding: EdgeInsets.only(top: 10),
+                      child: PrimaryImageButton(
+                          onPressed: () => Navigator.pushNamed(context, Routes.restoreOptions),
+                          image: restoreWalletImage,
+                          text: S.of(context).restore_wallet,
+                          color: Theme.of(context).primaryTextTheme.overline.color,
+                          textColor: Theme.of(context).primaryTextTheme.title.color),
+                    )
+                  ],
+                )
+              ],
             )
-          ],
-        ),
-        bottomSectionPadding: EdgeInsets.only(left: 24, right: 24, bottom: 20),
-        bottomSection: Column(children: <Widget>[
-          Text(
-            S.of(context).please_make_selection,
-            style: TextStyle(
-              fontSize: 12,
-              color: Theme.of(context).primaryTextTheme.caption.color,
-            ),
-            textAlign: TextAlign.center,
-          ),
-          Padding(
-            padding: EdgeInsets.only(top: 24),
-            child: PrimaryImageButton(
-                onPressed: () => Navigator.pushNamed(context, Routes.newWalletFromWelcome),
-                image: newWalletImage,
-                text: S.of(context).create_new,
-                color: Colors.white,
-                textColor: Palette.oceanBlue,
-                borderColor: Palette.oceanBlue,
-            ),
-          ),
-          Padding(
-            padding: EdgeInsets.only(top: 10),
-            child: PrimaryImageButton(
-                onPressed: () => Navigator.pushNamed(context, Routes.restoreOptions),
-                image: restoreWalletImage,
-                text: S.of(context).restore_wallet,
-                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(