Fix Constrained width screens UI

lib/src/screens/new_wallet/new_wallet_page.dart

@@ -1,6 +1,7 @@
 import 'package:cake_wallet/entities/generate_name.dart';
 import 'package:cake_wallet/routes.dart';
 import 'package:cake_wallet/themes/theme_base.dart';
+import 'package:cake_wallet/utils/responsive_layout_util.dart';
 import 'package:cake_wallet/utils/show_pop_up.dart';
 import 'package:mobx/mobx.dart';
 import 'package:flutter_mobx/flutter_mobx.dart';
@@ -29,9 +30,6 @@ class NewWalletPage extends BasePage {
   @override
   String get title => S.current.new_wallet;
 
-  @override
-  Widget trailing(BuildContext context) => SizedBox.shrink();
-
   @override
   Widget body(BuildContext context) => WalletNameForm(
       _walletNewVM, currentTheme.type == ThemeType.dark ? walletNameImage : walletNameLightImage);
@@ -89,12 +87,15 @@ class _WalletNameFormState extends State<WalletNameForm> {
   Widget build(BuildContext context) {
     return Padding(
       padding: EdgeInsets.only(top: 24),
-      child: Center(
-        child: ConstrainedBox(
-          constraints: BoxConstraints(maxWidth: 600),
       child: ScrollableWithBottomSection(
           contentPadding: EdgeInsets.only(left: 24, right: 24, bottom: 24),
-              content: Column(crossAxisAlignment: CrossAxisAlignment.center, children: [
+          content: Center(
+            child: ConstrainedBox(
+              constraints:
+                  BoxConstraints(maxWidth: ResponsiveLayoutUtil.kDesktopMaxWidthConstraint),
+              child: Column(
+                crossAxisAlignment: CrossAxisAlignment.center,
+                children: [
                   Padding(
                     padding: EdgeInsets.only(left: 12, right: 12),
                     child: AspectRatio(
@@ -191,9 +192,14 @@ class _WalletNameFormState extends State<WalletNameForm> {
                           key: _languageSelectorKey, initialSelected: defaultSeedLanguage),
                     )
                   ]
-              ]),
+                ],
+              ),
+            ),
+          ),
           bottomSectionPadding: EdgeInsets.all(24),
-              bottomSection: Column(
+          bottomSection: ConstrainedBox(
+            constraints: BoxConstraints(maxWidth: ResponsiveLayoutUtil.kDesktopMaxWidthConstraint),
+            child: Column(
               children: [
                 Observer(
                   builder: (context) {
@@ -216,9 +222,8 @@ class _WalletNameFormState extends State<WalletNameForm> {
                   child: Text(S.of(context).advanced_privacy_settings),
                 ),
               ],
+            ),
           )),
-        ),
-      ),
     );
   }
 

lib/src/screens/new_wallet/new_wallet_type_page.dart

@@ -1,3 +1,4 @@
+import 'package:cake_wallet/utils/responsive_layout_util.dart';
 import 'package:cw_core/wallet_type.dart';
 import 'package:cake_wallet/themes/theme_base.dart';
 import 'package:flutter/material.dart';
@@ -18,9 +19,6 @@ class NewWalletTypePage extends BasePage {
   @override
   String get title => S.current.wallet_list_restore_wallet;
 
-  @override
-  Widget trailing(BuildContext context) => SizedBox.shrink();
-
   @override
   Widget body(BuildContext context) => WalletTypeForm(
       onTypeSelected: onTypeSelected,
@@ -60,12 +58,12 @@ class WalletTypeFormState extends State<WalletTypeForm> {
 
   @override
   Widget build(BuildContext context) {
-    return Center(
+    return ScrollableWithBottomSection(
-      child: ConstrainedBox(
-        constraints: BoxConstraints(maxWidth: 600),
-        child: ScrollableWithBottomSection(
       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,
             children: <Widget>[
               Padding(
@@ -95,8 +93,12 @@ class WalletTypeFormState extends State<WalletTypeForm> {
                   ))
             ],
           ),
+        ),
+      ),
       bottomSectionPadding: EdgeInsets.only(left: 24, right: 24, bottom: 24),
-          bottomSection: PrimaryButton(
+      bottomSection: ConstrainedBox(
+        constraints: BoxConstraints(maxWidth: ResponsiveLayoutUtil.kDesktopMaxWidthConstraint),
+        child: PrimaryButton(
           onPressed: () => onTypeSelected(),
           text: S.of(context).seed_language_next,
           color: Theme.of(context).accentTextTheme.bodyText1!.color!,
@@ -104,7 +106,6 @@ class WalletTypeFormState extends State<WalletTypeForm> {
           isDisabled: selected == null,
         ),
       ),
-      ),
     );
   }
 

lib/src/screens/pin_code/pin_code_widget.dart

@@ -1,3 +1,4 @@
+import 'package:cake_wallet/utils/responsive_layout_util.dart';
 import 'package:cake_wallet/utils/show_bar.dart';
 import 'package:another_flushbar/flushbar.dart';
 import 'package:flutter/material.dart';
@@ -134,7 +135,8 @@ class PinCodeState<T extends PinCodeWidget> extends State<T> {
       child: Container(
         color: Theme.of(context).backgroundColor,
         padding: EdgeInsets.only(left: 40.0, right: 40.0, bottom: 40.0),
-        child: Column(children: <Widget>[
+        child: Column(
+          children: <Widget>[
             Spacer(flex: 2),
             Text(title,
                 style: TextStyle(
@@ -157,7 +159,11 @@ class PinCodeState<T extends PinCodeWidget> extends State<T> {
                         shape: BoxShape.circle,
                         color: isFilled
                             ? Theme.of(context).primaryTextTheme!.headline6!.color!
-                          : Theme.of(context).accentTextTheme!.bodyText2!.color!.withOpacity(0.25),
+                            : Theme.of(context)
+                                .accentTextTheme!
+                                .bodyText2!
+                                .color!
+                                .withOpacity(0.25),
                       ));
                 }),
               ),
@@ -183,9 +189,11 @@ class PinCodeState<T extends PinCodeWidget> extends State<T> {
             Flexible(
               flex: 24,
               child: Center(
+                child: ConstrainedBox(
+                  constraints: BoxConstraints(
+                    maxWidth: ResponsiveLayoutUtil.kDesktopMaxWidthConstraint,
+                  ),
                   child: Container(
-                height: MediaQuery.of(context).size.height * 0.6,
-                width: MediaQuery.of(context).size.height * 0.6,
                     key: _gridViewKey,
                     child: _aspectRatio > 0
                         ? ScrollConfiguration(
@@ -270,8 +278,10 @@ class PinCodeState<T extends PinCodeWidget> extends State<T> {
                                         style: TextStyle(
                                             fontSize: 30.0,
                                             fontWeight: FontWeight.w600,
-                                        color:
+                                            color: Theme.of(context)
-                                            Theme.of(context).primaryTextTheme!.headline6!.color!)),
+                                                .primaryTextTheme!
+                                                .headline6!
+                                                .color!)),
                                   ),
                                 );
                               }),
@@ -280,9 +290,11 @@ class PinCodeState<T extends PinCodeWidget> extends State<T> {
                         : null,
                   ),
                 ),
+              ),
             )
           ],
         ),
+      ),
     );
   }
 

lib/utils/responsive_layout_util.dart

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