CW-511-Tablet-iPad-keyboard-issue (#1143)

* fix keyboard issue

* Update responsive_layout_util.dart

* fix close button color

* minor fix

* [skip ci] Update pin_code_widget.dart

* Update main.dart

* fix qr widget overflow issue

* Fix minor UI issue

---------

Co-authored-by: Omar Hatem <omarh.ismail1@gmail.com>

lib/di.dart

@@ -280,7 +280,7 @@ Future<void> setup({
     powNodeSource: _powNodeSource,
     isBitcoinBuyEnabled: isBitcoinBuyEnabled,
     // Enforce darkTheme on platforms other than mobile till the design for other themes is completed
-    initialTheme: ResponsiveLayoutUtil.instance.isMobile && DeviceInfo.instance.isMobile
+    initialTheme: responsiveLayoutUtil.shouldRenderMobileUI && DeviceInfo.instance.isMobile
         ? null
         : ThemeList.darkTheme,
   );

lib/main.dart

@@ -5,6 +5,7 @@ import 'package:cake_wallet/entities/language_service.dart';
 import 'package:cake_wallet/buy/order.dart';
 import 'package:cake_wallet/locales/locale.dart';
 import 'package:cake_wallet/store/yat/yat_store.dart';
+import 'package:cake_wallet/utils/device_info.dart';
 import 'package:cake_wallet/utils/exception_handler.dart';
 import 'package:cw_core/address_info.dart';
 import 'package:cake_wallet/utils/responsive_layout_util.dart';
@@ -322,22 +323,20 @@ class _Home extends StatefulWidget {
 class _HomeState extends State<_Home> {
   @override
   void didChangeDependencies() {
-    if (!ResponsiveLayoutUtil.instance.isMobile) {
+    _setOrientation(context);
-      _setOrientation(context);
+
-    }
     super.didChangeDependencies();
   }
 
   void _setOrientation(BuildContext context) {
-    final orientation = MediaQuery.of(context).orientation;
+    if (!DeviceInfo.instance.isDesktop) {
-    final width = MediaQuery.of(context).size.width;
+      if (responsiveLayoutUtil.shouldRenderMobileUI) {
-    final height = MediaQuery.of(context).size.height;
+        SystemChrome.setPreferredOrientations(
-    if (orientation == Orientation.portrait && width < height) {
+            [DeviceOrientation.portraitUp, DeviceOrientation.portraitDown]);
-      SystemChrome.setPreferredOrientations(
+      } else {
-          [DeviceOrientation.portraitUp, DeviceOrientation.portraitDown]);
+        SystemChrome.setPreferredOrientations(
-    } else if (orientation == Orientation.landscape && width > height) {
+            [DeviceOrientation.landscapeLeft, DeviceOrientation.landscapeRight]);
-      SystemChrome.setPreferredOrientations(
+      }
-          [DeviceOrientation.landscapeLeft, DeviceOrientation.landscapeRight]);
     }
   }
 

lib/src/screens/dashboard/dashboard_page.dart

@@ -52,26 +52,23 @@ class DashboardPage extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return Scaffold(
-      body: LayoutBuilder(
+      body: Observer(
-        builder: (context, constraints) {
+        builder: (_) {
+          final dashboardPageView = _DashboardPageView(
+            balancePage: balancePage,
+            bottomSheetService: bottomSheetService,
+            dashboardViewModel: dashboardViewModel,
+            addressListViewModel: addressListViewModel,
+          );
+
           if (DeviceInfo.instance.isDesktop) {
-            if (constraints.maxWidth > ResponsiveLayoutUtil.kDesktopMaxDashBoardWidthConstraint) {
+            if (responsiveLayoutUtil.screenWidth > ResponsiveLayoutUtilBase.kDesktopMaxDashBoardWidthConstraint) {
               return getIt.get<DesktopSidebarWrapper>();
             } else {
-              return _DashboardPageView(
+              return dashboardPageView;
-                balancePage: balancePage,
-                bottomSheetService: bottomSheetService,
-                dashboardViewModel: dashboardViewModel,
-                addressListViewModel: addressListViewModel,
-              );
             }
-          } else if (ResponsiveLayoutUtil.instance.shouldRenderMobileUI()) {
+          } else if (responsiveLayoutUtil.shouldRenderMobileUI) {
-            return _DashboardPageView(
+            return dashboardPageView;
-              bottomSheetService: bottomSheetService,
-              balancePage: balancePage,
-              dashboardViewModel: dashboardViewModel,
-              addressListViewModel: addressListViewModel,
-            );
           } else {
             return getIt.get<DesktopSidebarWrapper>();
           }

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

@@ -64,7 +64,15 @@ class AddressPage extends BasePage {
 
   @override
   Widget? leading(BuildContext context) {
-    bool isMobileView = ResponsiveLayoutUtil.instance.isMobile;
+    final _backButton = Icon(
+      Icons.arrow_back_ios,
+      color: titleColor(context),
+      size: 16,
+    );
+    final _closeButton =
+    currentTheme.type == ThemeType.dark ? closeButtonImageDarkTheme : closeButtonImage;
+
+    bool isMobileView = responsiveLayoutUtil.shouldRenderMobileUI;
 
     return MergeSemantics(
       child: SizedBox(
@@ -79,7 +87,7 @@ class AddressPage extends BasePage {
                 overlayColor: MaterialStateColor.resolveWith((states) => Colors.transparent),
               ),
               onPressed: () => onClose(context),
-              child: !isMobileView ? closeButton(context) : backButton(context),
+              child: !isMobileView ? _closeButton : _backButton,
             ),
           ),
         ),

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

@@ -34,7 +34,7 @@ class TransactionsPage extends StatelessWidget {
       onLongPressUp: () => dashboardViewModel.balanceViewModel.isReversing =
           !dashboardViewModel.balanceViewModel.isReversing,
       child: Container(
-        color: ResponsiveLayoutUtil.instance.isMobile
+        color: responsiveLayoutUtil.shouldRenderMobileUI
             ? null
             : Theme.of(context).colorScheme.background,
         padding: EdgeInsets.only(top: 24, bottom: 24),

lib/src/screens/exchange/exchange_page.dart

@@ -127,7 +127,7 @@ class ExchangePage extends BasePage {
     final _closeButton =
         currentTheme.type == ThemeType.dark ? closeButtonImageDarkTheme : closeButtonImage;
 
-    bool isMobileView = ResponsiveLayoutUtil.instance.isMobile;
+    bool isMobileView = responsiveLayoutUtil.shouldRenderMobileUI;
 
     return MergeSemantics(
       child: SizedBox(
@@ -705,7 +705,7 @@ class ExchangePage extends BasePage {
               },
             ));
 
-    if (ResponsiveLayoutUtil.instance.isMobile) {
+    if (responsiveLayoutUtil.shouldRenderMobileUI) {
       return MobileExchangeCardsSection(
         firstExchangeCard: firstExchangeCard,
         secondExchangeCard: secondExchangeCard,

lib/src/screens/new_wallet/new_wallet_page.dart

@@ -96,7 +96,7 @@ class _WalletNameFormState extends State<WalletNameForm> {
           content: Center(
             child: ConstrainedBox(
               constraints:
-                  BoxConstraints(maxWidth: ResponsiveLayoutUtil.kDesktopMaxWidthConstraint),
+                  BoxConstraints(maxWidth: ResponsiveLayoutUtilBase.kDesktopMaxWidthConstraint),
               child: Column(
                 crossAxisAlignment: CrossAxisAlignment.center,
                 children: [

lib/src/screens/new_wallet/new_wallet_type_page.dart

@@ -70,7 +70,7 @@ class WalletTypeFormState extends State<WalletTypeForm> {
   Widget build(BuildContext context) {
     return Center(
         child: ConstrainedBox(
-            constraints: BoxConstraints(maxWidth: ResponsiveLayoutUtil.kDesktopMaxWidthConstraint),
+            constraints: BoxConstraints(maxWidth: ResponsiveLayoutUtilBase.kDesktopMaxWidthConstraint),
             child: Column(
               children: [
                 Padding(

lib/src/screens/pin_code/pin_code_widget.dart

@@ -191,7 +191,7 @@ class PinCodeState<T extends PinCodeWidget> extends State<T> {
               child: Center(
                 child: ConstrainedBox(
                   constraints: BoxConstraints(
-                    maxWidth: ResponsiveLayoutUtil.kDesktopMaxWidthConstraint,
+                    maxWidth: ResponsiveLayoutUtilBase.kDesktopMaxWidthConstraint,
                   ),
                   child: Container(
                     key: _gridViewKey,

lib/src/screens/receive/anonpay_invoice_page.dart

@@ -99,7 +99,7 @@ class AnonPayInvoicePage extends BasePage {
         child: ScrollableWithBottomSection(
           contentPadding: EdgeInsets.only(bottom: 24),
           content: Container(
-            decoration: ResponsiveLayoutUtil.instance.isMobile ? BoxDecoration(
+            decoration: responsiveLayoutUtil.shouldRenderMobileUI ? BoxDecoration(
               borderRadius: BorderRadius.only(
                   bottomLeft: Radius.circular(24), bottomRight: Radius.circular(24)),
               gradient: LinearGradient(

lib/src/screens/receive/widgets/currency_input_field.dart

@@ -32,7 +32,7 @@ class CurrencyInputField extends StatelessWidget {
     );
     // This magic number for wider screen sets the text input focus at center of the inputfield
     final _width =
-        ResponsiveLayoutUtil.instance.isMobile ? MediaQuery.of(context).size.width : 500;
+        responsiveLayoutUtil.shouldRenderMobileUI ? MediaQuery.of(context).size.width : 500;
 
     return Column(
       children: [

lib/src/screens/receive/widgets/qr_widget.dart

@@ -38,129 +38,134 @@ class QRWidget extends StatelessWidget {
     final copyImage = Image.asset('assets/images/copy_address.png',
         color: Theme.of(context).extension<QRCodeTheme>()!.qrWidgetCopyButtonColor);
 
-    return Column(
+    return Center(
-      mainAxisSize: MainAxisSize.min,
+      child: SingleChildScrollView(
-      mainAxisAlignment: MainAxisAlignment.center,
+        child: Column(
-      crossAxisAlignment: CrossAxisAlignment.center,
+          mainAxisSize: MainAxisSize.min,
-      children: <Widget>[
+          mainAxisAlignment: MainAxisAlignment.center,
-        Column(
+          crossAxisAlignment: CrossAxisAlignment.center,
-          children: [
+          children: <Widget>[
-            Padding(
+            Column(
-              padding: const EdgeInsets.only(bottom: 12),
+              children: [
-              child: Text(
+                Padding(
-                S.of(context).qr_fullscreen,
+                  padding: const EdgeInsets.only(bottom: 12),
-                style: TextStyle(
+                  child: Text(
-                    fontSize: 14,
+                    S.of(context).qr_fullscreen,
-                    fontWeight: FontWeight.w500,
+                    style: TextStyle(
-                    color: Theme.of(context).extension<DashboardPageTheme>()!.textColor),
+                        fontSize: 14,
-              ),
+                        fontWeight: FontWeight.w500,
-            ),
+                        color: Theme.of(context).extension<DashboardPageTheme>()!.textColor),
-            Row(
+                  ),
-              children: <Widget>[
+                ),
-                Spacer(flex: 3),
+                Row(
-                Observer(
+                  children: <Widget>[
-                  builder: (_) => Flexible(
+                    Spacer(flex: 3),
-                    flex: 5,
+                    Observer(
-                    child: GestureDetector(
+                      builder: (_) => Flexible(
-                      onTap: () {
+                        flex: 5,
-                        BrightnessUtil.changeBrightnessForFunction(
+                        child: GestureDetector(
-                          () async {
+                          onTap: () {
-                            await Navigator.pushNamed(context, Routes.fullscreenQR,
+                            BrightnessUtil.changeBrightnessForFunction(
-                                arguments: QrViewData(
+                              () async {
-                                  data: addressListViewModel.uri.toString(),
+                                await Navigator.pushNamed(context, Routes.fullscreenQR,
-                                  heroTag: heroTag,
+                                    arguments: QrViewData(
-                                ));
+                                      data: addressListViewModel.uri.toString(),
+                                      heroTag: heroTag,
+                                    ));
+                              },
+                            );
                           },
-                        );
+                          child: Hero(
-                      },
+                            tag: Key(heroTag ?? addressListViewModel.uri.toString()),
-                      child: Hero(
+                            child: Center(
-                        tag: Key(heroTag ?? addressListViewModel.uri.toString()),
+                              child: AspectRatio(
-                        child: Center(
+                                aspectRatio: 1.0,
-                          child: AspectRatio(
+                                child: Container(
-                            aspectRatio: 1.0,
+                                  padding: EdgeInsets.all(5),
-                            child: Container(
-                              padding: EdgeInsets.all(5),
-                              decoration: BoxDecoration(
-                                border: Border.all(
-                                  width: 3,
-                                  color: Theme.of(context).extension<DashboardPageTheme>()!.textColor,
-                                ),
-                              ),
-                              child: Container(
                                   decoration: BoxDecoration(
                                     border: Border.all(
                                       width: 3,
-                                      color:Colors.white,
+                                      color:
+                                          Theme.of(context).extension<DashboardPageTheme>()!.textColor,
                                     ),
                                   ),
-                                  child: QrImage(data: addressListViewModel.uri.toString())),
+                                  child: Container(
+                                      decoration: BoxDecoration(
+                                        border: Border.all(
+                                          width: 3,
+                                          color: Colors.white,
+                                        ),
+                                      ),
+                                      child: QrImage(data: addressListViewModel.uri.toString())),
+                                ),
+                              ),
                             ),
                           ),
                         ),
                       ),
                     ),
-                  ),
+                    Spacer(flex: 3)
-                ),
-                Spacer(flex: 3)
-              ],
-            ),
-          ],
-        ),
-        Observer(builder: (_) {
-          return Padding(
-            padding: EdgeInsets.only(top: 10),
-            child: Row(
-              children: <Widget>[
-                Expanded(
-                  child: Form(
-                    key: formKey,
-                    child: CurrencyInputField(
-                      focusNode: amountTextFieldFocusNode,
-                      controller: amountController,
-                      onTapPicker: () => _presentPicker(context),
-                      selectedCurrency: addressListViewModel.selectedCurrency,
-                      isLight: isLight,
-                    ),
-                  ),
-                ),
-              ],
-            ),
-          );
-        }),
-        Padding(
-          padding: EdgeInsets.only(top: 20, bottom: 8),
-          child: Builder(
-            builder: (context) => Observer(
-              builder: (context) => GestureDetector(
-                onTap: () {
-                  Clipboard.setData(ClipboardData(text: addressListViewModel.address.address));
-                  showBar<void>(context, S.of(context).copied_to_clipboard);
-                },
-                child: Row(
-                  mainAxisSize: MainAxisSize.max,
-                  crossAxisAlignment: CrossAxisAlignment.start,
-                  children: <Widget>[
-                    Expanded(
-                      child: Text(
-                        addressListViewModel.address.address,
-                        textAlign: TextAlign.center,
-                        style: TextStyle(
-                            fontSize: 15,
-                            fontWeight: FontWeight.w500,
-                            color: Theme.of(context).extension<DashboardPageTheme>()!.textColor),
-                      ),
-                    ),
-                    Padding(
-                      padding: EdgeInsets.only(left: 12),
-                      child: copyImage,
-                    )
                   ],
                 ),
-              ),
+              ],
             ),
-          ),
+            Observer(builder: (_) {
-        )
+              return Padding(
-      ],
+                padding: EdgeInsets.only(top: 10),
+                child: Row(
+                  children: <Widget>[
+                    Expanded(
+                      child: Form(
+                        key: formKey,
+                        child: CurrencyInputField(
+                          focusNode: amountTextFieldFocusNode,
+                          controller: amountController,
+                          onTapPicker: () => _presentPicker(context),
+                          selectedCurrency: addressListViewModel.selectedCurrency,
+                          isLight: isLight,
+                        ),
+                      ),
+                    ),
+                  ],
+                ),
+              );
+            }),
+            Padding(
+              padding: EdgeInsets.only(top: 20, bottom: 8),
+              child: Builder(
+                builder: (context) => Observer(
+                  builder: (context) => GestureDetector(
+                    onTap: () {
+                      Clipboard.setData(ClipboardData(text: addressListViewModel.address.address));
+                      showBar<void>(context, S.of(context).copied_to_clipboard);
+                    },
+                    child: Row(
+                      mainAxisSize: MainAxisSize.max,
+                      crossAxisAlignment: CrossAxisAlignment.start,
+                      children: <Widget>[
+                        Expanded(
+                          child: Text(
+                            addressListViewModel.address.address,
+                            textAlign: TextAlign.center,
+                            style: TextStyle(
+                                fontSize: 15,
+                                fontWeight: FontWeight.w500,
+                                color: Theme.of(context).extension<DashboardPageTheme>()!.textColor),
+                          ),
+                        ),
+                        Padding(
+                          padding: EdgeInsets.only(left: 12),
+                          child: copyImage,
+                        )
+                      ],
+                    ),
+                  ),
+                ),
+              ),
+            )
+          ],
+        ),
+      ),
     );
   }
 

lib/src/screens/restore/restore_from_backup_page.dart

@@ -42,7 +42,7 @@ class RestoreFromBackupPage extends BasePage {
 
     return Center(
       child: ConstrainedBox(
-        constraints: BoxConstraints(maxWidth: ResponsiveLayoutUtil.kDesktopMaxWidthConstraint),
+        constraints: BoxConstraints(maxWidth: ResponsiveLayoutUtilBase.kDesktopMaxWidthConstraint),
         child: Padding(
             padding: EdgeInsets.only(bottom: 24, left: 24, right: 24),
             child: Column(children: [

lib/src/screens/restore/restore_options_page.dart

@@ -31,7 +31,7 @@ class RestoreOptionsPage extends BasePage {
   Widget body(BuildContext context) {
     return Center(
       child: Container(
-          width: ResponsiveLayoutUtil.kDesktopMaxWidthConstraint,
+          width: ResponsiveLayoutUtilBase.kDesktopMaxWidthConstraint,
           height: double.infinity,
           padding: EdgeInsets.symmetric(vertical: 24, horizontal: 24),
           child: SingleChildScrollView(

lib/src/screens/restore/wallet_restore_page.dart

@@ -163,7 +163,7 @@ class WalletRestorePage extends BasePage {
         color: Theme.of(context).colorScheme.background,
         child: Center(
           child: ConstrainedBox(
-            constraints: BoxConstraints(maxWidth: ResponsiveLayoutUtil.kDesktopMaxWidthConstraint),
+            constraints: BoxConstraints(maxWidth: ResponsiveLayoutUtilBase.kDesktopMaxWidthConstraint),
             child: Column(
               mainAxisAlignment: MainAxisAlignment.center,
               children: [

lib/src/screens/seed/pre_seed_page.dart

@@ -35,7 +35,7 @@ class PreSeedPage extends BasePage {
           alignment: Alignment.center,
           padding: EdgeInsets.all(24),
           child: ConstrainedBox(
-            constraints: BoxConstraints(maxWidth: ResponsiveLayoutUtil.kDesktopMaxWidthConstraint),
+            constraints: BoxConstraints(maxWidth: ResponsiveLayoutUtilBase.kDesktopMaxWidthConstraint),
             child: Column(
               mainAxisAlignment: MainAxisAlignment.spaceBetween,
               children: <Widget>[

lib/src/screens/seed/wallet_seed_page.dart

@@ -93,7 +93,7 @@ class WalletSeedPage extends BasePage {
           padding: EdgeInsets.all(24),
           alignment: Alignment.center,
           child: ConstrainedBox(
-            constraints: BoxConstraints(maxWidth: ResponsiveLayoutUtil.kDesktopMaxWidthConstraint),
+            constraints: BoxConstraints(maxWidth: ResponsiveLayoutUtilBase.kDesktopMaxWidthConstraint),
             child: Column(
               mainAxisAlignment: MainAxisAlignment.spaceBetween,
               children: <Widget>[

lib/src/screens/send/send_page.dart

@@ -69,7 +69,7 @@ class SendPage extends BasePage {
     final _closeButton =
         currentTheme.type == ThemeType.dark ? closeButtonImageDarkTheme : closeButtonImage;
 
-    bool isMobileView = ResponsiveLayoutUtil.instance.isMobile;
+    bool isMobileView = responsiveLayoutUtil.shouldRenderMobileUI;
 
     return MergeSemantics(
       child: SizedBox(
@@ -98,7 +98,7 @@ class SendPage extends BasePage {
   double _sendCardHeight(BuildContext context) {
     final double initialHeight = sendViewModel.hasCoinControl ? 500 : 465;
 
-    if (!ResponsiveLayoutUtil.instance.isMobile) {
+    if (!responsiveLayoutUtil.shouldRenderMobileUI) {
       return initialHeight - 66;
     }
     return initialHeight;

lib/src/screens/send/widgets/send_card.dart

@@ -122,7 +122,7 @@ class SendCardState extends State<SendCard> with AutomaticKeepAliveClientMixin<S
           ),
         ),
         Container(
-          decoration: ResponsiveLayoutUtil.instance.isMobile
+          decoration: responsiveLayoutUtil.shouldRenderMobileUI
               ? BoxDecoration(
                   borderRadius: BorderRadius.only(
                       bottomLeft: Radius.circular(24), bottomRight: Radius.circular(24)),
@@ -139,9 +139,9 @@ class SendCardState extends State<SendCard> with AutomaticKeepAliveClientMixin<S
           child: Padding(
             padding: EdgeInsets.fromLTRB(
               24,
-              ResponsiveLayoutUtil.instance.isMobile ? 100 : 55,
+              responsiveLayoutUtil.shouldRenderMobileUI ? 100 : 55,
               24,
-              ResponsiveLayoutUtil.instance.isMobile ? 32 : 0,
+              responsiveLayoutUtil.shouldRenderMobileUI ? 32 : 0,
             ),
             child: SingleChildScrollView(
               child: Observer(

lib/src/screens/settings/display_settings_page.dart

@@ -75,7 +75,7 @@ class DisplaySettingsPage extends BasePage {
                   return LanguageService.list[code]?.toLowerCase().contains(searchText) ?? false;
                 },
               ),
-              if (ResponsiveLayoutUtil.instance.isMobile && DeviceInfo.instance.isMobile)
+              if (responsiveLayoutUtil.shouldRenderMobileUI && DeviceInfo.instance.isMobile)
                 SettingsThemeChoicesCell(_displaySettingsViewModel),
             ],
           ),

lib/src/screens/wallet_list/wallet_list_page.dart

@@ -275,7 +275,7 @@ class WalletListBodyState extends State<WalletListBody> {
           await hideProgressText();
           // only pop the wallets route in mobile as it will go back to dashboard page
           // in desktop platforms the navigation tree is different
-          if (ResponsiveLayoutUtil.instance.shouldRenderMobileUI()) {
+          if (responsiveLayoutUtil.shouldRenderMobileUI) {
             WidgetsBinding.instance.addPostFrameCallback((_) {
               Navigator.of(context).pop();
             });

lib/src/screens/welcome/welcome_page.dart

@@ -70,7 +70,7 @@ class WelcomePage extends BasePage {
             padding: EdgeInsets.only(top: 64, bottom: 24, left: 24, right: 24),
             child: ConstrainedBox(
               constraints: BoxConstraints(
-                  maxWidth: ResponsiveLayoutUtil.kDesktopMaxWidthConstraint),
+                  maxWidth: ResponsiveLayoutUtilBase.kDesktopMaxWidthConstraint),
               child: Column(
                 mainAxisAlignment: MainAxisAlignment.spaceBetween,
                 children: <Widget>[

lib/src/widgets/add_template_button.dart

@@ -27,7 +27,7 @@ class AddTemplateButton extends StatelessWidget {
           child: Container(
             height: 34,
             padding: EdgeInsets.symmetric(
-                horizontal: ResponsiveLayoutUtil.instance.isMobile ? 10 : 30),
+                horizontal: responsiveLayoutUtil.shouldRenderMobileUI ? 10 : 30),
             alignment: Alignment.center,
             decoration: BoxDecoration(
               borderRadius: BorderRadius.all(Radius.circular(20)),

lib/src/widgets/address_text_field.dart

@@ -100,7 +100,7 @@ class AddressTextField extends StatelessWidget {
             child: SizedBox(
               width: prefixIconWidth * options.length + (spaceBetweenPrefixIcons * options.length),
               child: Row(
-                mainAxisAlignment: ResponsiveLayoutUtil.instance.isMobile
+                mainAxisAlignment: responsiveLayoutUtil.shouldRenderMobileUI
                     ? MainAxisAlignment.spaceBetween
                     : MainAxisAlignment.end,
                 children: [

lib/src/widgets/alert_background.dart

@@ -25,7 +25,7 @@ class AlertBackground extends StatelessWidget {
                     Theme.of(context).extension<AlertTheme>()!.backdropColor),
             child: Center(
               child: Container(
-                width: ResponsiveLayoutUtil.kDesktopMaxWidthConstraint,
+                width: ResponsiveLayoutUtilBase.kDesktopMaxWidthConstraint,
                 child: child,
               ),
             ),

lib/src/widgets/check_box_picker.dart

@@ -61,7 +61,7 @@ class CheckBoxPickerState extends State<CheckBoxPicker> {
               child: ConstrainedBox(
                 constraints: BoxConstraints(
                   maxHeight: MediaQuery.of(context).size.height * 0.65,
-                  maxWidth: ResponsiveLayoutUtil.kPopupWidth,
+                  maxWidth: ResponsiveLayoutUtilBase.kPopupWidth,
                 ),
                 child: Column(
                   mainAxisSize: MainAxisSize.min,

lib/src/widgets/picker.dart

@@ -151,7 +151,7 @@ class _PickerState<Item> extends State<Picker<Item>> {
               child: ConstrainedBox(
                 constraints: BoxConstraints(
                   maxHeight: containerHeight,
-                  maxWidth: ResponsiveLayoutUtil.kPopupWidth,
+                  maxWidth: ResponsiveLayoutUtilBase.kPopupWidth,
                 ),
                 child: Column(
                   mainAxisSize: MainAxisSize.min,

lib/src/widgets/picker_inner_wrapper_widget.dart

@@ -52,7 +52,7 @@ class PickerInnerWrapperWidget extends StatelessWidget {
                         itemsHeight != null && itemsHeight! <= containerHeight
                             ? itemsHeight!
                             : containerHeight,
-                    maxWidth: ResponsiveLayoutUtil.kPopupWidth,
+                    maxWidth: ResponsiveLayoutUtilBase.kPopupWidth,
                   ),
                   child: Column(
                     children: children,
@@ -77,7 +77,7 @@ class PickerInnerWrapperWidget extends StatelessWidget {
               child: ConstrainedBox(
                 constraints: BoxConstraints(
                   maxHeight: containerHeight,
-                  maxWidth: ResponsiveLayoutUtil.kPopupWidth,
+                  maxWidth: ResponsiveLayoutUtilBase.kPopupWidth,
                 ),
                 child: Column(
                   children: children,

lib/src/widgets/picker_wrapper_widget.dart

@@ -44,7 +44,7 @@ class PickerWrapperWidget extends StatelessWidget {
                   mainAxisSize: MainAxisSize.min,
                   children: children,
                 ),
-                SizedBox(height: ResponsiveLayoutUtil.kPopupSpaceHeight),
+                SizedBox(height: ResponsiveLayoutUtilBase.kPopupSpaceHeight),
                 AlertCloseButton(bottom: closeButtonBottom),
               ],
             ),

lib/src/widgets/primary_button.dart

@@ -26,7 +26,7 @@ class PrimaryButton extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     final content = ConstrainedBox(
-      constraints: BoxConstraints(maxWidth: ResponsiveLayoutUtil.kDesktopMaxWidthConstraint),
+      constraints: BoxConstraints(maxWidth: ResponsiveLayoutUtilBase.kDesktopMaxWidthConstraint),
       child: SizedBox(
           width: double.infinity,
           height: 52.0,
@@ -82,7 +82,7 @@ class LoadingPrimaryButton extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return ConstrainedBox(
-      constraints: BoxConstraints(maxWidth: ResponsiveLayoutUtil.kDesktopMaxWidthConstraint),
+      constraints: BoxConstraints(maxWidth: ResponsiveLayoutUtilBase.kDesktopMaxWidthConstraint),
       child: SizedBox(
           width: double.infinity,
           height: 52.0,
@@ -138,7 +138,7 @@ class PrimaryIconButton extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return ConstrainedBox(
-      constraints: BoxConstraints(maxWidth: ResponsiveLayoutUtil.kDesktopMaxWidthConstraint),
+      constraints: BoxConstraints(maxWidth: ResponsiveLayoutUtilBase.kDesktopMaxWidthConstraint),
       child: SizedBox(
           width: double.infinity,
           height: 52.0,
@@ -201,7 +201,7 @@ class PrimaryImageButton extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return ConstrainedBox(
-      constraints: BoxConstraints(maxWidth: ResponsiveLayoutUtil.kDesktopMaxWidthConstraint),
+      constraints: BoxConstraints(maxWidth: ResponsiveLayoutUtilBase.kDesktopMaxWidthConstraint),
       child: SizedBox(
           width: double.infinity,
           height: 52.0,

lib/utils/responsive_layout_util.dart

@@ -1,46 +1,53 @@
 import 'package:flutter/material.dart';
+import 'package:mobx/mobx.dart';
 
-class ResponsiveLayoutUtil {
+part 'responsive_layout_util.g.dart';
+
+class _ResponsiveLayoutUtil = ResponsiveLayoutUtilBase with _$_ResponsiveLayoutUtil;
+
+abstract class ResponsiveLayoutUtilBase with Store, WidgetsBindingObserver {
   static const double _kMobileThreshold = 550;
   static const double kDesktopMaxWidthConstraint = 400;
   static const double kDesktopMaxDashBoardWidthConstraint = 900;
   static const double kPopupWidth = 400;
   static const double kPopupSpaceHeight = 100;
 
-  const ResponsiveLayoutUtil._();
+  ResponsiveLayoutUtilBase() {
-
+    WidgetsBinding.instance.addObserver(this);
-  static final instance = ResponsiveLayoutUtil._();
+    final initialMediaQuery = MediaQueryData.fromView(WidgetsBinding.instance!.window);
-
+    updateDeviceInfo(initialMediaQuery);
-  bool get isMobile =>
-      MediaQueryData.fromWindow(WidgetsBinding.instance.window).size.shortestSide <=
-      _kMobileThreshold;
-
-  bool shouldRenderMobileUI() {
-    final mediaQuery = MediaQueryData.fromWindow(WidgetsBinding.instance.window);
-    final orientation = mediaQuery.orientation;
-    final width = mediaQuery.size.width;
-    final height = mediaQuery.size.height;
-    if (isMobile ||
-        (orientation == Orientation.portrait && width < height) ||
-        (orientation == Orientation.landscape && width < height)) {
-      return true;
-    } else {
-      return false;
-    }
   }
 
-  /// Returns dynamic size.
+  @override
-  ///
+  void didChangeMetrics() {
-  /// If screen size is mobile, it returns 66% ([scale]) of the [originalValue].
+    final mediaQuery = MediaQueryData.fromView(WidgetsBinding.instance!.window);
-  double getDynamicSize(
+    updateDeviceInfo(mediaQuery);
-    double originalValue, {
+  }
-    double? mobileSize,
-    double? scale,
-  }) {
-    scale ??= 2 / 3;
-    mobileSize ??= originalValue * scale;
-    final value = isMobile ? mobileSize : originalValue;
 
-    return value.roundToDouble();
+  @observable
+  double screenWidth = 0.0;
+
+  @observable
+  double screenHeight = 0.0;
+
+  @observable
+  Orientation orientation = Orientation.portrait;
+
+  @action
+  void updateDeviceInfo(MediaQueryData mediaQuery) {
+    orientation = mediaQuery.orientation;
+    screenWidth = mediaQuery.size.width;
+    screenHeight = mediaQuery.size.height;
+  }
+
+  @computed
+  bool get shouldRenderMobileUI {
+    return (screenWidth <= _kMobileThreshold) ||
+        (orientation == Orientation.portrait && screenWidth < screenHeight) ||
+        (orientation == Orientation.landscape && screenWidth < screenHeight);
   }
 }
+
+_ResponsiveLayoutUtil _singletonResponsiveLayoutUtil = _ResponsiveLayoutUtil();
+
+_ResponsiveLayoutUtil get responsiveLayoutUtil => _singletonResponsiveLayoutUtil;