TF-682 Add responsive for landscape tablet

This commit is contained in:
dab246
2022-07-01 17:18:57 +07:00
committed by Dat H. Pham
parent fe5de99f5d
commit 01d8e3639a
2 changed files with 55 additions and 8 deletions
@@ -1,15 +1,18 @@
import 'package:core/utils/build_utils.dart';
import 'package:flutter/widgets.dart';
import 'package:get/get.dart';
class ResponsiveUtils {
static const double defaultSizeLeftMenuMobile = 375;
static const double defaultSizeDrawer = 320;
final int heightShortest = 600;
final int minDesktopWidth = 1200;
final int minTabletWidth = 600;
final int minTabletLargeWidth = 900;
final double defaultSizeDrawer = 320;
final double defaultSizeMenu = 256;
final double _loginTextFieldWidthSmallScreen = 280.0;
@@ -47,8 +50,20 @@ class ResponsiveUtils {
bool isLandscapeMobile(BuildContext context) => isScreenWithShortestSide(context) && isLandscape(context);
bool isLandscapeTablet(BuildContext context) {
return context.mediaQueryShortestSide >= minTabletWidth &&
context.mediaQueryShortestSide < minDesktopWidth &&
isLandscape(context);
}
bool isPortraitMobile(BuildContext context) => isScreenWithShortestSide(context) && isPortrait(context);
bool isPortraitTablet(BuildContext context) {
return context.mediaQueryShortestSide >= minTabletWidth &&
context.mediaQueryShortestSide < minDesktopWidth &&
isPortrait(context);
}
double getWidthLoginTextField(BuildContext context) =>
isMobile(context) ? _loginTextFieldWidthSmallScreen : _loginTextFieldWidthLargeScreen;
@@ -67,7 +82,16 @@ class ResponsiveUtils {
}
}
bool isSmallScreen(BuildContext context) {
return isPortraitMobile(context) || isLandscapeMobile(context) || isTablet(context);
bool hasLeftMenuDrawerActive(BuildContext context) {
if (BuildUtils.isWeb) {
return isMobile(context) &&
isTablet(context) &&
isTabletLarge(context);
} else {
return true;
}
}
bool isWebDesktop(BuildContext context) =>
BuildUtils.isWeb && isDesktop(context);
}
@@ -5,6 +5,7 @@ class ResponsiveWidget extends StatelessWidget {
final Widget mobile;
final Widget? landscapeMobile;
final Widget? tablet;
final Widget? landscapeTablet;
final Widget? tabletLarge;
final Widget? desktop;
@@ -16,17 +17,39 @@ class ResponsiveWidget extends StatelessWidget {
required this.mobile,
this.landscapeMobile,
this.tablet,
this.desktop,
this.landscapeTablet,
this.tabletLarge,
this.desktop,
}) : super(key: key);
@override
Widget build(BuildContext context) {
log('ResponsiveWidget::build(): WIDTH_SIZE: ${responsiveUtils.getDeviceWidth(context)}');
if (landscapeMobile != null && responsiveUtils.isLandscapeMobile(context)) return landscapeMobile!;
if (tablet != null && responsiveUtils.isTablet(context)) return tablet!;
if (tabletLarge != null && responsiveUtils.isTabletLarge(context)) return tabletLarge!;
if (desktop != null && responsiveUtils.isDesktop(context)) return desktop!;
if (responsiveUtils.isLandscapeMobile(context)) {
return landscapeMobile ?? mobile;
}
if (responsiveUtils.isLandscapeTablet(context)) {
return landscapeTablet ?? tablet ?? mobile;
}
if (responsiveUtils.isMobile(context)) {
return tablet ?? mobile;
}
if (responsiveUtils.isTablet(context)) {
return tablet ?? mobile;
}
if (responsiveUtils.isTabletLarge(context)) {
return tabletLarge ?? tablet ?? mobile;
}
if (responsiveUtils.isDesktop(context)) {
return desktop ?? tablet ?? mobile;
}
return mobile;
}
}