VegeFira / flutter_autosize_screen

A low-cost Flutter screen adaptation solution（一个极低成本的 Flutter 屏幕适配方案）

A low-cost Flutter screen adaptation solution（一个极低成本的 Flutter 屏幕适配方案）

100% 还原 UI，只需要按照设计图写的宽高写即可

先看图片，设置的标准宽度是 360

iPhone 8 ------------------------------- iPhone 11 :

iPhone 12 pro max --------------------- ipad air :

android 图

768x1280-320dpi----------10801920-420dpi----------1440x2560-560dpi

web 图

随着拉长屏幕 ，慢慢的 宽度会大于高度，当大于的时候 ，会以 高度 为 基准。

使用

引用

flutter_autosize_screen: ^{LAST_VERSION}

初始化

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

void main() {
  // 设置基准
  AutoSizeUtil.setStandard(360);

  // 使用 runAutoApp 来代替 runApp
  // import 'package:flutter_autosize_screen/binding.dart';
  runAutoApp(const MyApp());

}

2. 替换根 MaterialApp 的 MediaQuery

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

3. 获取Size

AutoSizeUtil.getScreenSize()
//或者
MediaQuery.of(context).size

4. 直接按照设计图的尺寸写即可

Container(
    alignment: Alignment.center,
    height: 60,
    width :60,
    color: Colors.redAccent,
    child: Text(
      "直接按照设计图写尺寸",
    ),
  )

5. 切记 不能使用 window 获取 size 或者是 获取 MediaQuery
   window.physicalSize
   MediaQueryData.fromWindow(window)
   

原理

掘进

Thank

FlutterTest