mirror of
https://github.com/cake-tech/cake_wallet.git
synced 2024-11-16 17:27:37 +00:00
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:
parent
7710a19e82
commit
2d454e0e48
31 changed files with 222 additions and 206 deletions
|
@ -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,
|
||||
);
|
||||
|
|
|
@ -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]);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -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>();
|
||||
}
|
||||
|
|
|
@ -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,
|
||||
),
|
||||
),
|
||||
),
|
||||
|
|
|
@ -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),
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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: [
|
||||
|
|
|
@ -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(
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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(
|
||||
|
|
|
@ -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: [
|
||||
|
|
|
@ -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,
|
||||
)
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
)
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
@ -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: [
|
||||
|
|
|
@ -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(
|
||||
|
|
|
@ -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: [
|
||||
|
|
|
@ -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>[
|
||||
|
|
|
@ -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>[
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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(
|
||||
|
|
|
@ -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),
|
||||
],
|
||||
),
|
||||
|
|
|
@ -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();
|
||||
});
|
||||
|
|
|
@ -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>[
|
||||
|
|
|
@ -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)),
|
||||
|
|
|
@ -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: [
|
||||
|
|
|
@ -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,
|
||||
),
|
||||
),
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -44,7 +44,7 @@ class PickerWrapperWidget extends StatelessWidget {
|
|||
mainAxisSize: MainAxisSize.min,
|
||||
children: children,
|
||||
),
|
||||
SizedBox(height: ResponsiveLayoutUtil.kPopupSpaceHeight),
|
||||
SizedBox(height: ResponsiveLayoutUtilBase.kPopupSpaceHeight),
|
||||
AlertCloseButton(bottom: closeButtonBottom),
|
||||
],
|
||||
),
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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;
|
||||
|
|
Loading…
Reference in a new issue