TF-161 Rotate the display in mobile view

This commit is contained in:
dab246
2021-10-19 08:43:14 +07:00
committed by Dat H. Pham
parent 8a06b8ba50
commit 3fd9a0cbda
10 changed files with 36 additions and 28 deletions
@@ -14,6 +14,8 @@ class ResponsiveUtils {
static const double _desktopVerticalMargin = 144.0; static const double _desktopVerticalMargin = 144.0;
static const double _desktopHorizontalMargin = 234.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 getSizeWidthScreen(BuildContext context) => MediaQuery.of(context).size.width;
double getSizeHeightScreen(BuildContext context) => MediaQuery.of(context).size.height; double getSizeHeightScreen(BuildContext context) => MediaQuery.of(context).size.height;
@@ -24,6 +26,10 @@ class ResponsiveUtils {
bool isDesktop(BuildContext context) => getSizeWidthScreen(context) >= minDesktopWidth; 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 getWidthLoginTextField(BuildContext context) => isMobile(context) ? _loginTextFieldWidthSmallScreen : _loginTextFieldWidthLargeScreen;
double getWidthLoginButton() => _loginButtonWidth; double getWidthLoginButton() => _loginButtonWidth;
@@ -19,7 +19,9 @@ class ResponsiveWidget extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return LayoutBuilder(builder: (context, constraints) { return LayoutBuilder(builder: (context, constraints) {
if (responsiveUtils.isDesktop(context)) { if (responsiveUtils.isMobileDevice(context)) {
return mobile;
} else if (responsiveUtils.isDesktop(context)) {
return desktop ?? tablet; return desktop ?? tablet;
} else if (responsiveUtils.isTablet(context)) { } else if (responsiveUtils.isTablet(context)) {
return tablet; return tablet;
@@ -29,8 +29,8 @@ class ComposerView extends GetWidget<ComposerController> {
child: Scaffold( child: Scaffold(
backgroundColor: AppColor.primaryLightColor, backgroundColor: AppColor.primaryLightColor,
body: SafeArea( body: SafeArea(
right: false, right: responsiveUtils.isMobileDevice(context) && responsiveUtils.isLandscape(context),
left: false, left: responsiveUtils.isMobileDevice(context) && responsiveUtils.isLandscape(context),
child: Container( child: Container(
margin: EdgeInsets.zero, margin: EdgeInsets.zero,
alignment: Alignment.topCenter, alignment: Alignment.topCenter,
@@ -29,8 +29,8 @@ class EmailView extends GetView {
return Scaffold( return Scaffold(
backgroundColor: AppColor.primaryLightColor, backgroundColor: AppColor.primaryLightColor,
body: SafeArea( body: SafeArea(
right: false, right: responsiveUtils.isMobileDevice(context) && responsiveUtils.isLandscape(context),
left: false, left: responsiveUtils.isMobileDevice(context) && responsiveUtils.isLandscape(context),
child: Column( child: Column(
mainAxisAlignment: MainAxisAlignment.center, mainAxisAlignment: MainAxisAlignment.center,
children: [ children: [
@@ -154,7 +154,7 @@ class EmailView extends GetView {
} }
int _getAttachmentLimitDisplayed(BuildContext context) { int _getAttachmentLimitDisplayed(BuildContext context) {
if (responsiveUtils.isMobile(context)) { if (responsiveUtils.isMobileDevice(context)) {
return 2; return 2;
} else if (responsiveUtils.isTablet(context)) { } else if (responsiveUtils.isTablet(context)) {
return 4; return 4;
@@ -77,13 +77,13 @@ class _AttachmentsPlaceHolderLoadingState extends State<AttachmentsPlaceHolderLo
_placeHolderAttachment(context), _placeHolderAttachment(context),
SizedBox(width: 16), SizedBox(width: 16),
_placeHolderAttachment(context), _placeHolderAttachment(context),
if (!widget.responsiveUtils.isMobile(context)) if (!widget.responsiveUtils.isMobileDevice(context))
SizedBox(width: 16), SizedBox(width: 16),
if (!widget.responsiveUtils.isMobile(context)) if (!widget.responsiveUtils.isMobileDevice(context))
_placeHolderAttachment(context), _placeHolderAttachment(context),
if (widget.responsiveUtils.isTablet(context)) if (!widget.responsiveUtils.isMobileDevice(context) && widget.responsiveUtils.isTablet(context))
SizedBox(width: 16), SizedBox(width: 16),
if (widget.responsiveUtils.isTablet(context)) if (!widget.responsiveUtils.isMobileDevice(context) && widget.responsiveUtils.isTablet(context))
_placeHolderAttachment(context), _placeHolderAttachment(context),
]), ]),
], ],
@@ -95,7 +95,7 @@ class _AttachmentsPlaceHolderLoadingState extends State<AttachmentsPlaceHolderLo
Widget _placeHolderAttachment(BuildContext context) { Widget _placeHolderAttachment(BuildContext context) {
double width = MediaQuery.of(context).size.width; double width = MediaQuery.of(context).size.width;
final percentAttachment = widget.responsiveUtils.isMobile(context) final percentAttachment = widget.responsiveUtils.isMobileDevice(context)
? 0.4 ? 0.4
: widget.responsiveUtils.isTablet(context) ? 0.22 : 0.14; : widget.responsiveUtils.isTablet(context) ? 0.22 : 0.14;
return Container( return Container(
@@ -186,7 +186,7 @@ class MailboxController extends BaseController {
mailboxDashBoardController.setSelectedMailbox(presentationMailboxSelected); mailboxDashBoardController.setSelectedMailbox(presentationMailboxSelected);
mailboxDashBoardController.clearSelectedEmail(); mailboxDashBoardController.clearSelectedEmail();
if (responsiveUtils.isMobile(context)) { if (responsiveUtils.isMobileDevice(context)) {
mailboxDashBoardController.closeDrawer(); mailboxDashBoardController.closeDrawer();
} }
} }
@@ -24,9 +24,10 @@ class MailboxView extends GetWidget<MailboxController> {
child: Scaffold( child: Scaffold(
backgroundColor: AppColor.primaryLightColor, backgroundColor: AppColor.primaryLightColor,
body: SafeArea( body: SafeArea(
right: false,
left: false,
child: Container( child: Container(
alignment: Alignment.center, alignment: Alignment.center,
margin: EdgeInsets.symmetric(vertical: 24),
child: Column( child: Column(
children: [ children: [
_buildHeaderMailbox(context), _buildHeaderMailbox(context),
@@ -110,6 +111,7 @@ class MailboxView extends GetWidget<MailboxController> {
key: PageStorageKey('mailbox_list'), key: PageStorageKey('mailbox_list'),
primary: false, primary: false,
shrinkWrap: true, shrinkWrap: true,
padding: EdgeInsets.zero,
children: [ children: [
Obx(() => controller.defaultMailboxList.isNotEmpty Obx(() => controller.defaultMailboxList.isNotEmpty
? _buildDefaultMailbox(context, controller.defaultMailboxList) ? _buildDefaultMailbox(context, controller.defaultMailboxList)
@@ -14,17 +14,23 @@ class MailboxDashBoardView extends GetWidget<MailboxDashBoardController> {
Widget build(BuildContext context) { Widget build(BuildContext context) {
return Scaffold( return Scaffold(
key: controller.scaffoldKey, key: controller.scaffoldKey,
drawer: responsiveUtils.isMobile(context) drawer: responsiveUtils.isMobileDevice(context)
? Container( ? Container(
child: MailboxView(), child: MailboxView(),
width: responsiveUtils.getSizeWidthScreen(context)) width: responsiveUtils.isPortrait(context)
? responsiveUtils.getSizeWidthScreen(context)
: responsiveUtils.getSizeWidthScreen(context) / 2)
: null, : null,
drawerEnableOpenDragGesture: responsiveUtils.isMobile(context), drawerEnableOpenDragGesture: responsiveUtils.isMobileDevice(context),
body: SafeArea( body: Container(
child: Row( child: Row(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.start,
children: [ children: [
if (!responsiveUtils.isMobile(context)) Expanded(child: MailboxView()), if (!responsiveUtils.isMobileDevice(context))
Expanded(
flex: responsiveUtils.isDesktop(context) ? 1 : 2,
child: MailboxView()),
Expanded( Expanded(
flex: responsiveUtils.isDesktop(context) ? 1 : 3, flex: responsiveUtils.isDesktop(context) ? 1 : 3,
child: ThreadView(), child: ThreadView(),
@@ -23,8 +23,8 @@ class ThreadView extends GetWidget<ThreadController> {
resizeToAvoidBottomInset: false, resizeToAvoidBottomInset: false,
backgroundColor: AppColor.primaryLightColor, backgroundColor: AppColor.primaryLightColor,
body: SafeArea( body: SafeArea(
right: false, right: responsiveUtils.isMobileDevice(context) && responsiveUtils.isLandscape(context),
left: false, left: responsiveUtils.isMobileDevice(context) && responsiveUtils.isLandscape(context),
child: Container( child: Container(
alignment: Alignment.center, alignment: Alignment.center,
padding: EdgeInsets.zero, padding: EdgeInsets.zero,
-8
View File
@@ -1,6 +1,5 @@
import 'package:core/core.dart'; import 'package:core/core.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_localizations/flutter_localizations.dart'; import 'package:flutter_localizations/flutter_localizations.dart';
import 'package:get/get.dart'; import 'package:get/get.dart';
import 'package:tmail_ui_user/features/caching/config/hive_cache_config.dart'; import 'package:tmail_ui_user/features/caching/config/hive_cache_config.dart';
@@ -13,13 +12,6 @@ void main() async {
WidgetsFlutterBinding.ensureInitialized(); WidgetsFlutterBinding.ensureInitialized();
await MainBindings().dependencies(); await MainBindings().dependencies();
await HiveCacheConfig().setUp(); await HiveCacheConfig().setUp();
// Disable landscape on device mobile
if (Get.size.shortestSide < ResponsiveUtils.minTabletWidth) {
SystemChrome.setPreferredOrientations([
DeviceOrientation.portraitUp,
DeviceOrientation.portraitDown,
]);
}
runApp(TMailApp()); runApp(TMailApp());
} }