diff --git a/lib/di.dart b/lib/di.dart index b0caf5899..53620d3e8 100644 --- a/lib/di.dart +++ b/lib/di.dart @@ -280,7 +280,7 @@ Future 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, ); diff --git a/lib/main.dart b/lib/main.dart index d5b0e2f81..6807e9185 100644 --- a/lib/main.dart +++ b/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; - final width = MediaQuery.of(context).size.width; - final height = MediaQuery.of(context).size.height; - if (orientation == Orientation.portrait && width < height) { - SystemChrome.setPreferredOrientations( - [DeviceOrientation.portraitUp, DeviceOrientation.portraitDown]); - } else if (orientation == Orientation.landscape && width > height) { - SystemChrome.setPreferredOrientations( - [DeviceOrientation.landscapeLeft, DeviceOrientation.landscapeRight]); + if (!DeviceInfo.instance.isDesktop) { + if (responsiveLayoutUtil.shouldRenderMobileUI) { + SystemChrome.setPreferredOrientations( + [DeviceOrientation.portraitUp, DeviceOrientation.portraitDown]); + } else { + SystemChrome.setPreferredOrientations( + [DeviceOrientation.landscapeLeft, DeviceOrientation.landscapeRight]); + } } } diff --git a/lib/src/screens/dashboard/dashboard_page.dart b/lib/src/screens/dashboard/dashboard_page.dart index d7ba8410e..d4662c625 100644 --- a/lib/src/screens/dashboard/dashboard_page.dart +++ b/lib/src/screens/dashboard/dashboard_page.dart @@ -52,26 +52,23 @@ class DashboardPage extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( - body: LayoutBuilder( - builder: (context, constraints) { + body: Observer( + 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(); } else { - return _DashboardPageView( - balancePage: balancePage, - bottomSheetService: bottomSheetService, - dashboardViewModel: dashboardViewModel, - addressListViewModel: addressListViewModel, - ); + return dashboardPageView; } - } else if (ResponsiveLayoutUtil.instance.shouldRenderMobileUI()) { - return _DashboardPageView( - bottomSheetService: bottomSheetService, - balancePage: balancePage, - dashboardViewModel: dashboardViewModel, - addressListViewModel: addressListViewModel, - ); + } else if (responsiveLayoutUtil.shouldRenderMobileUI) { + return dashboardPageView; } else { return getIt.get(); } diff --git a/lib/src/screens/dashboard/widgets/address_page.dart b/lib/src/screens/dashboard/widgets/address_page.dart index d584ce95b..c57613fa5 100644 --- a/lib/src/screens/dashboard/widgets/address_page.dart +++ b/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, ), ), ), diff --git a/lib/src/screens/dashboard/widgets/transactions_page.dart b/lib/src/screens/dashboard/widgets/transactions_page.dart index 3f6b8a3c6..5c7b78f3a 100644 --- a/lib/src/screens/dashboard/widgets/transactions_page.dart +++ b/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), diff --git a/lib/src/screens/exchange/exchange_page.dart b/lib/src/screens/exchange/exchange_page.dart index 7ff9e6c30..1f441ea99 100644 --- a/lib/src/screens/exchange/exchange_page.dart +++ b/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, diff --git a/lib/src/screens/new_wallet/new_wallet_page.dart b/lib/src/screens/new_wallet/new_wallet_page.dart index b9dcc5ae3..5577fcd88 100644 --- a/lib/src/screens/new_wallet/new_wallet_page.dart +++ b/lib/src/screens/new_wallet/new_wallet_page.dart @@ -96,7 +96,7 @@ class _WalletNameFormState extends State { content: Center( child: ConstrainedBox( constraints: - BoxConstraints(maxWidth: ResponsiveLayoutUtil.kDesktopMaxWidthConstraint), + BoxConstraints(maxWidth: ResponsiveLayoutUtilBase.kDesktopMaxWidthConstraint), child: Column( crossAxisAlignment: CrossAxisAlignment.center, children: [ diff --git a/lib/src/screens/new_wallet/new_wallet_type_page.dart b/lib/src/screens/new_wallet/new_wallet_type_page.dart index 6f3bb078b..225e5b82d 100644 --- a/lib/src/screens/new_wallet/new_wallet_type_page.dart +++ b/lib/src/screens/new_wallet/new_wallet_type_page.dart @@ -70,7 +70,7 @@ class WalletTypeFormState extends State { Widget build(BuildContext context) { return Center( child: ConstrainedBox( - constraints: BoxConstraints(maxWidth: ResponsiveLayoutUtil.kDesktopMaxWidthConstraint), + constraints: BoxConstraints(maxWidth: ResponsiveLayoutUtilBase.kDesktopMaxWidthConstraint), child: Column( children: [ Padding( diff --git a/lib/src/screens/pin_code/pin_code_widget.dart b/lib/src/screens/pin_code/pin_code_widget.dart index 9b22fa822..36328aee2 100644 --- a/lib/src/screens/pin_code/pin_code_widget.dart +++ b/lib/src/screens/pin_code/pin_code_widget.dart @@ -191,7 +191,7 @@ class PinCodeState extends State { child: Center( child: ConstrainedBox( constraints: BoxConstraints( - maxWidth: ResponsiveLayoutUtil.kDesktopMaxWidthConstraint, + maxWidth: ResponsiveLayoutUtilBase.kDesktopMaxWidthConstraint, ), child: Container( key: _gridViewKey, diff --git a/lib/src/screens/receive/anonpay_invoice_page.dart b/lib/src/screens/receive/anonpay_invoice_page.dart index deda679c5..fc835c72d 100644 --- a/lib/src/screens/receive/anonpay_invoice_page.dart +++ b/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( diff --git a/lib/src/screens/receive/widgets/currency_input_field.dart b/lib/src/screens/receive/widgets/currency_input_field.dart index 20e7bd660..1241b2ba7 100644 --- a/lib/src/screens/receive/widgets/currency_input_field.dart +++ b/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: [ diff --git a/lib/src/screens/receive/widgets/qr_widget.dart b/lib/src/screens/receive/widgets/qr_widget.dart index a34893cd8..bbfd4d5c1 100644 --- a/lib/src/screens/receive/widgets/qr_widget.dart +++ b/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()!.qrWidgetCopyButtonColor); - return Column( - mainAxisSize: MainAxisSize.min, - mainAxisAlignment: MainAxisAlignment.center, - crossAxisAlignment: CrossAxisAlignment.center, - children: [ - Column( - children: [ - Padding( - padding: const EdgeInsets.only(bottom: 12), - child: Text( - S.of(context).qr_fullscreen, - style: TextStyle( - fontSize: 14, - fontWeight: FontWeight.w500, - color: Theme.of(context).extension()!.textColor), - ), - ), - Row( - children: [ - Spacer(flex: 3), - Observer( - builder: (_) => Flexible( - flex: 5, - child: GestureDetector( - onTap: () { - BrightnessUtil.changeBrightnessForFunction( - () async { - await Navigator.pushNamed(context, Routes.fullscreenQR, - arguments: QrViewData( - data: addressListViewModel.uri.toString(), - heroTag: heroTag, - )); + return Center( + child: SingleChildScrollView( + child: Column( + mainAxisSize: MainAxisSize.min, + mainAxisAlignment: MainAxisAlignment.center, + crossAxisAlignment: CrossAxisAlignment.center, + children: [ + Column( + children: [ + Padding( + padding: const EdgeInsets.only(bottom: 12), + child: Text( + S.of(context).qr_fullscreen, + style: TextStyle( + fontSize: 14, + fontWeight: FontWeight.w500, + color: Theme.of(context).extension()!.textColor), + ), + ), + Row( + children: [ + Spacer(flex: 3), + Observer( + builder: (_) => Flexible( + flex: 5, + child: GestureDetector( + onTap: () { + BrightnessUtil.changeBrightnessForFunction( + () async { + await Navigator.pushNamed(context, Routes.fullscreenQR, + arguments: QrViewData( + data: addressListViewModel.uri.toString(), + heroTag: heroTag, + )); + }, + ); }, - ); - }, - child: Hero( - tag: Key(heroTag ?? addressListViewModel.uri.toString()), - child: Center( - child: AspectRatio( - aspectRatio: 1.0, - child: Container( - padding: EdgeInsets.all(5), - decoration: BoxDecoration( - border: Border.all( - width: 3, - color: Theme.of(context).extension()!.textColor, - ), - ), - child: Container( + child: Hero( + tag: Key(heroTag ?? addressListViewModel.uri.toString()), + child: Center( + child: AspectRatio( + aspectRatio: 1.0, + child: Container( + padding: EdgeInsets.all(5), decoration: BoxDecoration( border: Border.all( width: 3, - color:Colors.white, + color: + Theme.of(context).extension()!.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) - ], - ), - ], - ), - Observer(builder: (_) { - return Padding( - padding: EdgeInsets.only(top: 10), - child: Row( - children: [ - 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(context, S.of(context).copied_to_clipboard); - }, - child: Row( - mainAxisSize: MainAxisSize.max, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Expanded( - child: Text( - addressListViewModel.address.address, - textAlign: TextAlign.center, - style: TextStyle( - fontSize: 15, - fontWeight: FontWeight.w500, - color: Theme.of(context).extension()!.textColor), - ), - ), - Padding( - padding: EdgeInsets.only(left: 12), - child: copyImage, - ) + Spacer(flex: 3) ], ), - ), + ], ), - ), - ) - ], + Observer(builder: (_) { + return Padding( + padding: EdgeInsets.only(top: 10), + child: Row( + children: [ + 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(context, S.of(context).copied_to_clipboard); + }, + child: Row( + mainAxisSize: MainAxisSize.max, + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Expanded( + child: Text( + addressListViewModel.address.address, + textAlign: TextAlign.center, + style: TextStyle( + fontSize: 15, + fontWeight: FontWeight.w500, + color: Theme.of(context).extension()!.textColor), + ), + ), + Padding( + padding: EdgeInsets.only(left: 12), + child: copyImage, + ) + ], + ), + ), + ), + ), + ) + ], + ), + ), ); } diff --git a/lib/src/screens/restore/restore_from_backup_page.dart b/lib/src/screens/restore/restore_from_backup_page.dart index bf944a6e1..c3440fb06 100644 --- a/lib/src/screens/restore/restore_from_backup_page.dart +++ b/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: [ diff --git a/lib/src/screens/restore/restore_options_page.dart b/lib/src/screens/restore/restore_options_page.dart index 2252551cc..e54c0da29 100644 --- a/lib/src/screens/restore/restore_options_page.dart +++ b/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( diff --git a/lib/src/screens/restore/wallet_restore_page.dart b/lib/src/screens/restore/wallet_restore_page.dart index 649dadd19..4fa9e340d 100644 --- a/lib/src/screens/restore/wallet_restore_page.dart +++ b/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: [ diff --git a/lib/src/screens/seed/pre_seed_page.dart b/lib/src/screens/seed/pre_seed_page.dart index 7e6bfb1de..bb6902a7e 100644 --- a/lib/src/screens/seed/pre_seed_page.dart +++ b/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: [ diff --git a/lib/src/screens/seed/wallet_seed_page.dart b/lib/src/screens/seed/wallet_seed_page.dart index fa17d7ccf..200b87b7d 100644 --- a/lib/src/screens/seed/wallet_seed_page.dart +++ b/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: [ diff --git a/lib/src/screens/send/send_page.dart b/lib/src/screens/send/send_page.dart index 6b35158e3..fca3684ca 100644 --- a/lib/src/screens/send/send_page.dart +++ b/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; diff --git a/lib/src/screens/send/widgets/send_card.dart b/lib/src/screens/send/widgets/send_card.dart index ec1ee5087..65069e903 100644 --- a/lib/src/screens/send/widgets/send_card.dart +++ b/lib/src/screens/send/widgets/send_card.dart @@ -122,7 +122,7 @@ class SendCardState extends State with AutomaticKeepAliveClientMixin with AutomaticKeepAliveClientMixin { 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(); }); diff --git a/lib/src/screens/welcome/welcome_page.dart b/lib/src/screens/welcome/welcome_page.dart index 52de38021..2142fdf9b 100644 --- a/lib/src/screens/welcome/welcome_page.dart +++ b/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: [ diff --git a/lib/src/widgets/add_template_button.dart b/lib/src/widgets/add_template_button.dart index 667a103ab..a5e9f2e2a 100644 --- a/lib/src/widgets/add_template_button.dart +++ b/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)), diff --git a/lib/src/widgets/address_text_field.dart b/lib/src/widgets/address_text_field.dart index fcdbad701..092a70422 100644 --- a/lib/src/widgets/address_text_field.dart +++ b/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: [ diff --git a/lib/src/widgets/alert_background.dart b/lib/src/widgets/alert_background.dart index 0ced8ee06..56f10d1f6 100644 --- a/lib/src/widgets/alert_background.dart +++ b/lib/src/widgets/alert_background.dart @@ -25,7 +25,7 @@ class AlertBackground extends StatelessWidget { Theme.of(context).extension()!.backdropColor), child: Center( child: Container( - width: ResponsiveLayoutUtil.kDesktopMaxWidthConstraint, + width: ResponsiveLayoutUtilBase.kDesktopMaxWidthConstraint, child: child, ), ), diff --git a/lib/src/widgets/check_box_picker.dart b/lib/src/widgets/check_box_picker.dart index 71bfa7ee9..b4db82628 100644 --- a/lib/src/widgets/check_box_picker.dart +++ b/lib/src/widgets/check_box_picker.dart @@ -61,7 +61,7 @@ class CheckBoxPickerState extends State { child: ConstrainedBox( constraints: BoxConstraints( maxHeight: MediaQuery.of(context).size.height * 0.65, - maxWidth: ResponsiveLayoutUtil.kPopupWidth, + maxWidth: ResponsiveLayoutUtilBase.kPopupWidth, ), child: Column( mainAxisSize: MainAxisSize.min, diff --git a/lib/src/widgets/picker.dart b/lib/src/widgets/picker.dart index 6b6543d2f..01b869b1b 100644 --- a/lib/src/widgets/picker.dart +++ b/lib/src/widgets/picker.dart @@ -151,7 +151,7 @@ class _PickerState extends State> { child: ConstrainedBox( constraints: BoxConstraints( maxHeight: containerHeight, - maxWidth: ResponsiveLayoutUtil.kPopupWidth, + maxWidth: ResponsiveLayoutUtilBase.kPopupWidth, ), child: Column( mainAxisSize: MainAxisSize.min, diff --git a/lib/src/widgets/picker_inner_wrapper_widget.dart b/lib/src/widgets/picker_inner_wrapper_widget.dart index 3d9a289bc..2dd61e948 100644 --- a/lib/src/widgets/picker_inner_wrapper_widget.dart +++ b/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, diff --git a/lib/src/widgets/picker_wrapper_widget.dart b/lib/src/widgets/picker_wrapper_widget.dart index 244199936..f69bcd514 100644 --- a/lib/src/widgets/picker_wrapper_widget.dart +++ b/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), ], ), diff --git a/lib/src/widgets/primary_button.dart b/lib/src/widgets/primary_button.dart index c27169894..5f6b50f8b 100644 --- a/lib/src/widgets/primary_button.dart +++ b/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, diff --git a/lib/utils/responsive_layout_util.dart b/lib/utils/responsive_layout_util.dart index 4c06b7a3c..428ab61cc 100644 --- a/lib/utils/responsive_layout_util.dart +++ b/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._(); - - static final instance = ResponsiveLayoutUtil._(); - - 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; - } + ResponsiveLayoutUtilBase() { + WidgetsBinding.instance.addObserver(this); + final initialMediaQuery = MediaQueryData.fromView(WidgetsBinding.instance!.window); + updateDeviceInfo(initialMediaQuery); } - /// Returns dynamic size. - /// - /// If screen size is mobile, it returns 66% ([scale]) of the [originalValue]. - double getDynamicSize( - double originalValue, { - double? mobileSize, - double? scale, - }) { - scale ??= 2 / 3; - mobileSize ??= originalValue * scale; - final value = isMobile ? mobileSize : originalValue; + @override + void didChangeMetrics() { + final mediaQuery = MediaQueryData.fromView(WidgetsBinding.instance!.window); + updateDeviceInfo(mediaQuery); + } - 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;