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>
This commit is contained in:
Serhii 2023-11-03 07:42:18 +02:00 committed by GitHub
parent 7710a19e82
commit 2d454e0e48
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
31 changed files with 222 additions and 206 deletions

View file

@ -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,
);

View file

@ -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]);
}
}
}

View file

@ -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<DesktopSidebarWrapper>();
} 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<DesktopSidebarWrapper>();
}

View file

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

View file

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

View file

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

View file

@ -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: [

View file

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

View file

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

View file

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

View file

@ -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: [

View file

@ -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(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
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<DashboardPageTheme>()!.textColor),
),
),
Row(
children: <Widget>[
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: <Widget>[
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<DashboardPageTheme>()!.textColor),
),
),
Row(
children: <Widget>[
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<DashboardPageTheme>()!.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<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)
],
),
],
),
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,
)
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,
)
],
),
),
),
),
)
],
),
),
);
}

View file

@ -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: [

View file

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

View file

@ -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: [

View file

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

View file

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

View file

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

View file

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

View file

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

View file

@ -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();
});

View file

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

View file

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

View file

@ -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: [

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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