flutter_autosize_screen 0.0.1 copy "flutter_autosize_screen: ^0.0.1" to clipboard
flutter_autosize_screen: ^0.0.1 copied to clipboard

outdated

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}

初始化 #

  1. 在main方法的第一行就初始化,下面的基准一般以宽度为基准,直接写Ui设计图的宽度尺寸,如果是横屏的状态的 下面的 360 就是以高度为基准
void main() {

  AutoSizeUtil.setStandard(360);
  runAutoApp(const MyApp());

}

  1. 替换根 MaterialApp 的 MediaQuery
MaterialApp(
      title: 'Autosize Demo',
      /// 替换,这样可以在以后 使用 MediaQuery.of(context) 得到 正确的Size
      builder: AutoSizeUtil.appBuilder,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        body: HomePage(),
      ),
    )

  1. 获取Size
AutoSizeUtil.getScreenSize()
//或者
MediaQuery.of(context).size
  1. 直接按照设计图的尺寸写即可
Container(
    alignment: Alignment.center,
    height: 60,
    width :60
    color: Colors.redAccent,
    child: Text(
      "直接按照设计图写尺寸",
    ),
  )
  1. 切记 不能使用 window 获取 size 或者是 获取 MediaQuery
    window.physicalSize
    MediaQueryData.fromWindow(window)
11
likes
0
pub points
36%
popularity

Publisher

unverified uploader

A low-cost Flutter screen adaptation solution

Repository (GitHub)
View/report issues

License

unknown (LICENSE)

Dependencies

flutter

More

Packages that depend on flutter_autosize_screen