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 _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;
@@ -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;
@@ -29,8 +29,8 @@ class ComposerView extends GetWidget<ComposerController> {
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,
@@ -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;
@@ -77,13 +77,13 @@ class _AttachmentsPlaceHolderLoadingState extends State<AttachmentsPlaceHolderLo
_placeHolderAttachment(context),
SizedBox(width: 16),
_placeHolderAttachment(context),
if (!widget.responsiveUtils.isMobile(context))
if (!widget.responsiveUtils.isMobileDevice(context))
SizedBox(width: 16),
if (!widget.responsiveUtils.isMobile(context))
if (!widget.responsiveUtils.isMobileDevice(context))
_placeHolderAttachment(context),
if (widget.responsiveUtils.isTablet(context))
if (!widget.responsiveUtils.isMobileDevice(context) && widget.responsiveUtils.isTablet(context))
SizedBox(width: 16),
if (widget.responsiveUtils.isTablet(context))
if (!widget.responsiveUtils.isMobileDevice(context) && widget.responsiveUtils.isTablet(context))
_placeHolderAttachment(context),
]),
],
@@ -95,7 +95,7 @@ class _AttachmentsPlaceHolderLoadingState extends State<AttachmentsPlaceHolderLo
Widget _placeHolderAttachment(BuildContext context) {
double width = MediaQuery.of(context).size.width;
final percentAttachment = widget.responsiveUtils.isMobile(context)
final percentAttachment = widget.responsiveUtils.isMobileDevice(context)
? 0.4
: widget.responsiveUtils.isTablet(context) ? 0.22 : 0.14;
return Container(
@@ -186,7 +186,7 @@ class MailboxController extends BaseController {
mailboxDashBoardController.setSelectedMailbox(presentationMailboxSelected);
mailboxDashBoardController.clearSelectedEmail();
if (responsiveUtils.isMobile(context)) {
if (responsiveUtils.isMobileDevice(context)) {
mailboxDashBoardController.closeDrawer();
}
}
@@ -24,9 +24,10 @@ class MailboxView extends GetWidget<MailboxController> {
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<MailboxController> {
key: PageStorageKey('mailbox_list'),
primary: false,
shrinkWrap: true,
padding: EdgeInsets.zero,
children: [
Obx(() => controller.defaultMailboxList.isNotEmpty
? _buildDefaultMailbox(context, controller.defaultMailboxList)
@@ -14,17 +14,23 @@ class MailboxDashBoardView extends GetWidget<MailboxDashBoardController> {
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(),
@@ -23,8 +23,8 @@ class ThreadView extends GetWidget<ThreadController> {
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,
-8
View File
@@ -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());
}