简介

有些时候，需要根据屏幕进行适配，这里基本上会用这个插件flutter_screenutil。点赞数还是比较多的

点赞数
它还提供了中文手册，这点非常好

初始化

在程序启动早期，就需要初始化这个插件

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    //填入设计稿中设备的屏幕尺寸,单位dp
    return ScreenUtilInit(
      designSize: const Size(375, 812),
      minTextAdapt: true,
      splitScreenMode: true,
      builder: (context , child) {
        return MaterialApp(
          debugShowCheckedModeBanner: false,
          title: 'First Method',
          // You can use the library anywhere in the app even in theme
          theme: ThemeData(
            primarySwatch: Colors.blue,
            textTheme: Typography.englishLike2018.apply(fontSizeFactor: 1.sp),
          ),
          home: child,
        );
      },
      child: const HomePage(title: 'First Method'),
    );
  }
}

这里的designSize: const Size(375, 812),是UI设计稿上手机的尺寸，单位是点，px的要✖️2；基本原理就是取手机的实际尺寸，然后跟这个设计尺寸做个比值，就是放大或者缩小的倍数，调整一下就是按比例缩放了。大多数情况还是很有效的。

适合使用的地方，以及不建议用的地方

容器的宽高适合使用，而图片，圆角等最好不要用，不然的话会出现图片拉伸模糊的现象。容器等比例缩放而图片保持固定大小，那么缩小或者扩大的就是图片之间的空隙，整体效果比较好。
当然，这样带来的风险是在缩放比例太大的时候就会出现界面错乱的现象。所以，iPad之类的，最好给不同的设计，自适应的效果并不理想。
用起来比较方便，在数字后面直接加.w或者.h就可以了。实现原理就是对系统的数字类型做了扩展

extension SizeExtension on num {
  ///[ScreenUtil.setWidth]
  double get w => ScreenUtil().setWidth(this);

  ///[ScreenUtil.setHeight]
  double get h => ScreenUtil().setHeight(this);

   ///其他内容
}

其他工具

一些屏幕尺寸相关的工具也比较好用，比如取屏幕宽高等

    ScreenUtil.pixelRatio       //设备的像素密度
    ScreenUtil.screenWidth   (dart sdk>=2.6 : 1.sw)   //设备宽度
    ScreenUtil.screenHeight  (dart sdk>=2.6 : 1.sh)   //设备高度
    ScreenUtil.bottomBarHeight  //底部安全区距离，适用于全面屏下面有按键的
    ScreenUtil.statusBarHeight  //状态栏高度 刘海屏会更高
    ScreenUtil.textScaleFactor //系统字体缩放比例

    ScreenUtil().scaleWidth  // 实际宽度设计稿宽度的比例
    ScreenUtil().scaleHeight // 实际高度与设计稿高度度的比例

    ScreenUtil().orientation  //屏幕方向