TF-682 Add responsive for landscape tablet
This commit is contained in:
@@ -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;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user