flutter_autosize_screen 0.0.1 flutter_autosize_screen: ^0.0.1 copied to clipboard
A low-cost Flutter screen adaptation solution
A low-cost Flutter screen adaptation solution(一个极低成本的 Flutter 屏幕适配方案) #
100% 还原 UI,只需要按照设计图写的宽高写即可 #
先看图片 #
iPhone 8 ------------------------------- iPhone 11 : #
iPhone 12 pro max --------------------- ipad air : #
android 图 #
768x1280-320dpi----------10801920-420dpi----------1440x2560-560dpi #
使用 #
引用 #
flutter_autosize_screen: ^{LAST_VERSION}
初始化 #
- 在main方法的第一行就初始化,下面的基准一般以宽度为基准,直接写Ui设计图的宽度尺寸,如果是横屏的状态的 下面的 360 就是以高度为基准
void main() {
AutoSizeUtil.setStandard(360);
runAutoApp(const MyApp());
}
- 替换根 MaterialApp 的 MediaQuery
MaterialApp(
title: 'Autosize Demo',
/// 替换,这样可以在以后 使用 MediaQuery.of(context) 得到 正确的Size
builder: AutoSizeUtil.appBuilder,
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
body: HomePage(),
),
)
- 获取Size
AutoSizeUtil.getScreenSize()
//或者
MediaQuery.of(context).size
- 直接按照设计图的尺寸写即可
Container(
alignment: Alignment.center,
height: 60,
width :60
color: Colors.redAccent,
child: Text(
"直接按照设计图写尺寸",
),
)
- 切记
不能使用 window 获取 size 或者是 获取 MediaQuery
window.physicalSize
MediaQueryData.fromWindow(window)