TF-528 Update size for responsive on tablet and landscape mobile

This commit is contained in:
dab246
2022-05-04 10:52:57 +07:00
committed by Dat H. Pham
parent 2e3c4e8f88
commit dbbc13eab4
20 changed files with 316 additions and 418 deletions
@@ -1,4 +1,3 @@
import 'package:flutter/foundation.dart';
import 'package:flutter/widgets.dart';
import 'package:get/get.dart';
@@ -8,9 +7,8 @@ class ResponsiveUtils {
final int minTabletWidth = 600;
final int minTabletLargeWidth = 900;
final double defaultSizeDrawerWidthMobileTablet = 375;
final double defaultSizeDrawerWidthWeb = 320;
final double defaultSizeMenuWidthWeb = 262;
final double defaultSizeDrawer = 320;
final double defaultSizeMenu = 262;
final double _loginTextFieldWidthSmallScreen = 280.0;
final double _loginTextFieldWidthLargeScreen = 320.0;
@@ -21,7 +19,7 @@ class ResponsiveUtils {
final double desktopVerticalMargin = 120.0;
final double desktopHorizontalMargin = 200.0;
bool isMobileDevice(BuildContext context) => context.mediaQueryShortestSide < minTabletWidth;
bool isScreenWithShortestSide(BuildContext context) => context.mediaQueryShortestSide < minTabletWidth;
double getSizeScreenWidth(BuildContext context) => context.width;
@@ -29,28 +27,28 @@ class ResponsiveUtils {
double getSizeScreenShortestSide(BuildContext context) => context.mediaQueryShortestSide;
double getDeviceWidth(BuildContext context) {
final widthScreen = kIsWeb ? context.width : context.mediaQueryShortestSide;
return widthScreen;
}
double getDeviceWidth(BuildContext context) => context.width;
bool isMobile(BuildContext context) => getDeviceWidth(context) < minTabletWidth;
bool isTablet(BuildContext context) => getDeviceWidth(context) >= minTabletWidth && getDeviceWidth(context) < minTabletLargeWidth;
bool isTablet(BuildContext context) =>
getDeviceWidth(context) >= minTabletWidth && getDeviceWidth(context) < minTabletLargeWidth;
bool isDesktop(BuildContext context) => getDeviceWidth(context) >= minDesktopWidth;
bool isTabletLarge(BuildContext context) => getDeviceWidth(context) >= minTabletLargeWidth && getDeviceWidth(context) < minDesktopWidth;
bool isTabletLarge(BuildContext context) =>
getDeviceWidth(context) >= minTabletLargeWidth && getDeviceWidth(context) < minDesktopWidth;
bool isPortrait(BuildContext context) => context.orientation == Orientation.portrait;
bool isLandscape(BuildContext context) => context.orientation == Orientation.landscape;
bool isLandscapeMobile(BuildContext context) => isMobile(context) && isLandscape(context);
bool isLandscapeMobile(BuildContext context) => isScreenWithShortestSide(context) && isLandscape(context);
bool isPortraitMobile(BuildContext context) => isMobile(context) && isPortrait(context);
bool isPortraitMobile(BuildContext context) => isScreenWithShortestSide(context) && isPortrait(context);
double getWidthLoginTextField(BuildContext context) => isMobile(context) ? _loginTextFieldWidthSmallScreen : _loginTextFieldWidthLargeScreen;
double getWidthLoginTextField(BuildContext context) =>
isMobile(context) ? _loginTextFieldWidthSmallScreen : _loginTextFieldWidthLargeScreen;
double getWidthLoginButton() => _loginButtonWidth;
}
@@ -42,6 +42,7 @@ class _TreeViewData extends StatelessWidget {
key: PageStorageKey('tree_view'),
shrinkWrap: true,
primary: false,
padding: EdgeInsets.zero,
itemCount: children.length,
itemBuilder: (context, index) {
return children.elementAt(index);
@@ -3,6 +3,7 @@ import 'package:flutter/material.dart';
class ResponsiveWidget extends StatelessWidget {
final Widget mobile;
final Widget? landscapeMobile;
final Widget? tablet;
final Widget? tabletLarge;
final Widget? desktop;
@@ -13,6 +14,7 @@ class ResponsiveWidget extends StatelessWidget {
Key? key,
required this.responsiveUtils,
required this.mobile,
this.landscapeMobile,
this.tablet,
this.desktop,
this.tabletLarge,
@@ -22,6 +24,7 @@ class ResponsiveWidget extends StatelessWidget {
Widget build(BuildContext context) {
if (desktop != null && responsiveUtils.isDesktop(context)) return desktop!;
if (tabletLarge != null && responsiveUtils.isTabletLarge(context)) return tabletLarge!;
if (landscapeMobile != null && responsiveUtils.isLandscapeMobile(context)) return landscapeMobile!;
if (tablet != null && responsiveUtils.isTablet(context)) return tablet!;
return mobile;
}