121 lines
3.0 KiB
Dart
121 lines
3.0 KiB
Dart
|
import 'package:flutter/material.dart';
|
|||
|
|
|
|||
|
|
// This is where the magic happens.
|
|||
|
|
// This functions are responsible to make UI responsive across all the mobile devices.
|
|||
|
|
|
|||
|
|
Size size = WidgetsBinding.instance.window.physicalSize /
|
|||
|
|
WidgetsBinding.instance.window.devicePixelRatio;
|
|||
|
|
|
|||
|
|
// Caution! If you think these are static values and are used to build a static UI, you mustn’t.
|
|||
|
|
// These are the Viewport values of your Figma Design.
|
|||
|
|
// These are used in the code as a reference to create your UI Responsively.
|
|||
|
|
const num FIGMA_DESIGN_WIDTH = 428;
|
|||
|
|
const num FIGMA_DESIGN_HEIGHT = 926;
|
|||
|
|
const num FIGMA_DESIGN_STATUS_BAR = 47;
|
|||
|
|
|
|||
|
|
///This method is used to get device viewport width.
|
|||
|
|
get width {
|
|||
|
|
return size.width;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
///This method is used to get device viewport height.
|
|||
|
|
get height {
|
|||
|
|
num statusBar =
|
|||
|
|
MediaQueryData.fromWindow(WidgetsBinding.instance.window).viewPadding.top;
|
|||
|
|
num bottomBar = MediaQueryData.fromWindow(WidgetsBinding.instance.window)
|
|||
|
|
.viewPadding
|
|||
|
|
.bottom;
|
|||
|
|
num screenHeight = size.height - statusBar - bottomBar;
|
|||
|
|
return screenHeight;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
///This method is used to set padding/margin (for the left and Right side) & width of the screen or widget according to the Viewport width.
|
|||
|
|
double getHorizontalSize(double px) {
|
|||
|
|
return ((px * width) / FIGMA_DESIGN_WIDTH);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
///This method is used to set padding/margin (for the top and bottom side) & height of the screen or widget according to the Viewport height.
|
|||
|
|
double getVerticalSize(double px) {
|
|||
|
|
return ((px * height) / (FIGMA_DESIGN_HEIGHT - FIGMA_DESIGN_STATUS_BAR));
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
///This method is used to set smallest px in image height and width
|
|||
|
|
double getSize(double px) {
|
|||
|
|
var height = getVerticalSize(px);
|
|||
|
|
var width = getHorizontalSize(px);
|
|||
|
|
if (height < width) {
|
|||
|
|
return height.toInt().toDouble();
|
|||
|
|
} else {
|
|||
|
|
return width.toInt().toDouble();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
///This method is used to set text font size according to Viewport
|
|||
|
|
double getFontSize(double px) {
|
|||
|
|
return getSize(px);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
///This method is used to set padding responsively
|
|||
|
|
EdgeInsetsGeometry getPadding({
|
|||
|
|
double? all,
|
|||
|
|
double? left,
|
|||
|
|
double? top,
|
|||
|
|
double? right,
|
|||
|
|
double? bottom,
|
|||
|
|
}) {
|
|||
|
|
return getMarginOrPadding(
|
|||
|
|
all: all,
|
|||
|
|
left: left,
|
|||
|
|
top: top,
|
|||
|
|
right: right,
|
|||
|
|
bottom: bottom,
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
///This method is used to set margin responsively
|
|||
|
|
EdgeInsetsGeometry getMargin({
|
|||
|
|
double? all,
|
|||
|
|
double? left,
|
|||
|
|
double? top,
|
|||
|
|
double? right,
|
|||
|
|
double? bottom,
|
|||
|
|
}) {
|
|||
|
|
return getMarginOrPadding(
|
|||
|
|
all: all,
|
|||
|
|
left: left,
|
|||
|
|
top: top,
|
|||
|
|
right: right,
|
|||
|
|
bottom: bottom,
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
///This method is used to get padding or margin responsively
|
|||
|
|
EdgeInsetsGeometry getMarginOrPadding({
|
|||
|
|
double? all,
|
|||
|
|
double? left,
|
|||
|
|
double? top,
|
|||
|
|
double? right,
|
|||
|
|
double? bottom,
|
|||
|
|
}) {
|
|||
|
|
if (all != null) {
|
|||
|
|
left = all;
|
|||
|
|
top = all;
|
|||
|
|
right = all;
|
|||
|
|
bottom = all;
|
|||
|
|
}
|
|||
|
|
return EdgeInsets.only(
|
|||
|
|
left: getHorizontalSize(
|
|||
|
|
left ?? 0,
|
|||
|
|
),
|
|||
|
|
top: getVerticalSize(
|
|||
|
|
top ?? 0,
|
|||
|
|
),
|
|||
|
|
right: getHorizontalSize(
|
|||
|
|
right ?? 0,
|
|||
|
|
),
|
|||
|
|
bottom: getVerticalSize(
|
|||
|
|
bottom ?? 0,
|
|||
|
|
),
|
|||
|
|
);
|
|||
|
|
}
|