From 3fd9a0cbda373c30e0b895db42e597792c50f16b Mon Sep 17 00:00:00 2001 From: dab246 Date: Tue, 19 Oct 2021 08:43:14 +0700 Subject: [PATCH] TF-161 Rotate the display in mobile view --- .../lib/presentation/utils/responsive_utils.dart | 6 ++++++ .../views/responsive/responsive_widget.dart | 4 +++- .../composer/presentation/composer_view.dart | 4 ++-- lib/features/email/presentation/email_view.dart | 6 +++--- .../attachments_place_holder_loading_widget.dart | 10 +++++----- .../mailbox/presentation/mailbox_controller.dart | 2 +- .../mailbox/presentation/mailbox_view.dart | 4 +++- .../presentation/mailbox_dashboard_view.dart | 16 +++++++++++----- .../thread/presentation/thread_view.dart | 4 ++-- lib/main.dart | 8 -------- 10 files changed, 36 insertions(+), 28 deletions(-) diff --git a/core/lib/presentation/utils/responsive_utils.dart b/core/lib/presentation/utils/responsive_utils.dart index c3727ba04..4efaa4f8e 100644 --- a/core/lib/presentation/utils/responsive_utils.dart +++ b/core/lib/presentation/utils/responsive_utils.dart @@ -14,6 +14,8 @@ class ResponsiveUtils { static const double _desktopVerticalMargin = 144.0; static const double _desktopHorizontalMargin = 234.0; + bool isMobileDevice(BuildContext context) => MediaQuery.of(context).size.shortestSide < 600; + double getSizeWidthScreen(BuildContext context) => MediaQuery.of(context).size.width; double getSizeHeightScreen(BuildContext context) => MediaQuery.of(context).size.height; @@ -24,6 +26,10 @@ class ResponsiveUtils { bool isDesktop(BuildContext context) => getSizeWidthScreen(context) >= minDesktopWidth; + bool isPortrait(BuildContext context) => MediaQuery.of(context).orientation == Orientation.portrait; + + bool isLandscape(BuildContext context) => MediaQuery.of(context).orientation == Orientation.landscape; + double getWidthLoginTextField(BuildContext context) => isMobile(context) ? _loginTextFieldWidthSmallScreen : _loginTextFieldWidthLargeScreen; double getWidthLoginButton() => _loginButtonWidth; diff --git a/core/lib/presentation/views/responsive/responsive_widget.dart b/core/lib/presentation/views/responsive/responsive_widget.dart index fdb6faa47..4808cc4a8 100644 --- a/core/lib/presentation/views/responsive/responsive_widget.dart +++ b/core/lib/presentation/views/responsive/responsive_widget.dart @@ -19,7 +19,9 @@ class ResponsiveWidget extends StatelessWidget { @override Widget build(BuildContext context) { return LayoutBuilder(builder: (context, constraints) { - if (responsiveUtils.isDesktop(context)) { + if (responsiveUtils.isMobileDevice(context)) { + return mobile; + } else if (responsiveUtils.isDesktop(context)) { return desktop ?? tablet; } else if (responsiveUtils.isTablet(context)) { return tablet; diff --git a/lib/features/composer/presentation/composer_view.dart b/lib/features/composer/presentation/composer_view.dart index 08664b8e6..b572609b2 100644 --- a/lib/features/composer/presentation/composer_view.dart +++ b/lib/features/composer/presentation/composer_view.dart @@ -29,8 +29,8 @@ class ComposerView extends GetWidget { child: Scaffold( backgroundColor: AppColor.primaryLightColor, body: SafeArea( - right: false, - left: false, + right: responsiveUtils.isMobileDevice(context) && responsiveUtils.isLandscape(context), + left: responsiveUtils.isMobileDevice(context) && responsiveUtils.isLandscape(context), child: Container( margin: EdgeInsets.zero, alignment: Alignment.topCenter, diff --git a/lib/features/email/presentation/email_view.dart b/lib/features/email/presentation/email_view.dart index e49c62806..f98c45850 100644 --- a/lib/features/email/presentation/email_view.dart +++ b/lib/features/email/presentation/email_view.dart @@ -29,8 +29,8 @@ class EmailView extends GetView { return Scaffold( backgroundColor: AppColor.primaryLightColor, body: SafeArea( - right: false, - left: false, + right: responsiveUtils.isMobileDevice(context) && responsiveUtils.isLandscape(context), + left: responsiveUtils.isMobileDevice(context) && responsiveUtils.isLandscape(context), child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ @@ -154,7 +154,7 @@ class EmailView extends GetView { } int _getAttachmentLimitDisplayed(BuildContext context) { - if (responsiveUtils.isMobile(context)) { + if (responsiveUtils.isMobileDevice(context)) { return 2; } else if (responsiveUtils.isTablet(context)) { return 4; diff --git a/lib/features/email/presentation/widgets/attachments_place_holder_loading_widget.dart b/lib/features/email/presentation/widgets/attachments_place_holder_loading_widget.dart index 19cd6fb3e..f4b810d47 100644 --- a/lib/features/email/presentation/widgets/attachments_place_holder_loading_widget.dart +++ b/lib/features/email/presentation/widgets/attachments_place_holder_loading_widget.dart @@ -77,13 +77,13 @@ class _AttachmentsPlaceHolderLoadingState extends State { child: Scaffold( backgroundColor: AppColor.primaryLightColor, body: SafeArea( + right: false, + left: false, child: Container( alignment: Alignment.center, - margin: EdgeInsets.symmetric(vertical: 24), child: Column( children: [ _buildHeaderMailbox(context), @@ -110,6 +111,7 @@ class MailboxView extends GetWidget { key: PageStorageKey('mailbox_list'), primary: false, shrinkWrap: true, + padding: EdgeInsets.zero, children: [ Obx(() => controller.defaultMailboxList.isNotEmpty ? _buildDefaultMailbox(context, controller.defaultMailboxList) diff --git a/lib/features/mailbox_dashboard/presentation/mailbox_dashboard_view.dart b/lib/features/mailbox_dashboard/presentation/mailbox_dashboard_view.dart index fc78bd859..b6daef2c1 100644 --- a/lib/features/mailbox_dashboard/presentation/mailbox_dashboard_view.dart +++ b/lib/features/mailbox_dashboard/presentation/mailbox_dashboard_view.dart @@ -14,17 +14,23 @@ class MailboxDashBoardView extends GetWidget { Widget build(BuildContext context) { return Scaffold( key: controller.scaffoldKey, - drawer: responsiveUtils.isMobile(context) + drawer: responsiveUtils.isMobileDevice(context) ? Container( child: MailboxView(), - width: responsiveUtils.getSizeWidthScreen(context)) + width: responsiveUtils.isPortrait(context) + ? responsiveUtils.getSizeWidthScreen(context) + : responsiveUtils.getSizeWidthScreen(context) / 2) : null, - drawerEnableOpenDragGesture: responsiveUtils.isMobile(context), - body: SafeArea( + drawerEnableOpenDragGesture: responsiveUtils.isMobileDevice(context), + body: Container( child: Row( crossAxisAlignment: CrossAxisAlignment.start, + mainAxisAlignment: MainAxisAlignment.start, children: [ - if (!responsiveUtils.isMobile(context)) Expanded(child: MailboxView()), + if (!responsiveUtils.isMobileDevice(context)) + Expanded( + flex: responsiveUtils.isDesktop(context) ? 1 : 2, + child: MailboxView()), Expanded( flex: responsiveUtils.isDesktop(context) ? 1 : 3, child: ThreadView(), diff --git a/lib/features/thread/presentation/thread_view.dart b/lib/features/thread/presentation/thread_view.dart index e5acef898..b7426ba8c 100644 --- a/lib/features/thread/presentation/thread_view.dart +++ b/lib/features/thread/presentation/thread_view.dart @@ -23,8 +23,8 @@ class ThreadView extends GetWidget { resizeToAvoidBottomInset: false, backgroundColor: AppColor.primaryLightColor, body: SafeArea( - right: false, - left: false, + right: responsiveUtils.isMobileDevice(context) && responsiveUtils.isLandscape(context), + left: responsiveUtils.isMobileDevice(context) && responsiveUtils.isLandscape(context), child: Container( alignment: Alignment.center, padding: EdgeInsets.zero, diff --git a/lib/main.dart b/lib/main.dart index 72df8fdc2..5d2ece890 100644 --- a/lib/main.dart +++ b/lib/main.dart @@ -1,6 +1,5 @@ import 'package:core/core.dart'; import 'package:flutter/material.dart'; -import 'package:flutter/services.dart'; import 'package:flutter_localizations/flutter_localizations.dart'; import 'package:get/get.dart'; import 'package:tmail_ui_user/features/caching/config/hive_cache_config.dart'; @@ -13,13 +12,6 @@ void main() async { WidgetsFlutterBinding.ensureInitialized(); await MainBindings().dependencies(); await HiveCacheConfig().setUp(); - // Disable landscape on device mobile - if (Get.size.shortestSide < ResponsiveUtils.minTabletWidth) { - SystemChrome.setPreferredOrientations([ - DeviceOrientation.portraitUp, - DeviceOrientation.portraitDown, - ]); - } runApp(TMailApp()); }