Flutter 插件笔记 | 屏幕适配 flutter_screenutil

本节将介绍一下屏幕适配 flutter_screenutil。
 packages链接：flutter_screenutil

导入

项目中使用flutter_screenutil，需要在项目目录中的pubspec.yaml文件中的dependencies里导入package。

dependencies:
   # 最新的版本，版本会迭代，需保持最新的
   flutter_screenutil: ^0.5.1

导入后，运行flutter packages get获取刚才添加好的flutter_screenutil。

使用

使用时需要根据设计稿的尺寸初始化一下，具体实现看下方。

...
  // 作者建议在第一次 build 的时候就进行初始化，这样接下来就可以放心使用了。
  @override
  Widget build(BuildContext context) {
    // 方式一：默认设置宽度1080px，高度1920px 
    ScreenUtil.instance = ScreenUtil.getInstance()..init(context);
    // 方式二：设置宽度750px，高度1334px
    ScreenUtil.instance = ScreenUtil(width: 750, height: 1334)..init(context);
    // 方式三：设置宽度750px，高度1334px，根据系统字体进行缩放
    ScreenUtil.instance = ScreenUtil(width: 750, height: 1334, allowFontScaling: true)..init(context);
    ...
}
...

初始化后就能进行配置了，比如配置宽度和高度。

Container(
  width:ScreenUtil().setWidth(100)
  height:ScreenUtil().setHeight(80)
  ....
}

或者设置一下字体大小。

// 不跟随系统字体变化
Text(
  `24px fontsize text`,
  style: TextStyle(
    ...
    fontSize: ScreenUtil.getInstance().setSp(24),
  )
）
// 跟随系统字体变化
Text(
  `24px fontsize text`,
  style: TextStyle(
    ...
    fontSize: ScreenUtil(allowFontScaling: true).setSp(24),
  )
）

拓展

长方形和正方形

// 长方形
Container(
  width:ScreenUtil().setWidth(350)
  height:ScreenUtil().setHeight(200)
  ....
)
// 正方形   这里注意都是 setWidth
Container(
  width:ScreenUtil().setWidth(100)
  height:ScreenUtil().setWidth(100)
  ....
)