Flutter 屏幕适配flutter_screenutil使用心得

前言：首先屏幕适配这一块在原生方面深有体会，android的屏幕碎片化因为机型，屏幕大小从小屏幕手机到大屏幕手机再到平板。有着很大到差异，flutter官网是一款很适合做UI的跨平台框架，目前受到越来越多的开发者和公司的青睐，在适配方面已经做了很大的改变，可以说基本上不用做太多的屏幕适配，可谁料想，还是需要稍微做一点的屏幕适配。这就引出了下面的flutter_screenutil插件。

（一）说在前面：

一开始也是关注到这个插件，但在前面引入但适合发现效果并不是想象中但那样，就没有了后续，可能是姿势不对，后面在项目中做适配的时候，发现在新手机高分辨率的机型下与比较旧的手机720p的分辨率上还是有些差距的，部分边界越界。经前端同事的建议，又再一次拾起了这个插件。接下来说一下正确引入插件的姿势

（二）引入步骤：

（1） pubspec.yaml中引入最新的：

# 屏幕适配
flutter_screenutil: ^1.0.2

（2）初始化：
一定是要在home的statefulWdiget的build中初始化

首先我的home是：

  return MaterialApp(
      navigatorKey: navigatorKey,
      debugShowCheckedModeBanner: false,
      home: SplashScreen(),
    );

所以在SplashScreen的build中引入

ScreenUtil.init(context, width: 750, height: 1334, allowFontScaling: false);

如下图：

（3） 使用方式：

控件：

Container(
  width:ScreenUtil().setWidth(200)
  height:ScreenUtil().setHeight(180)
}

字体：

Text(
  `text str`,
  style: TextStyle(
    fontSize: ScreenUtil.getInstance().setSp(24),
  )
）

长宽相等：

Container(
  width:ScreenUtil().setWidth(200)
  height:ScreenUtil().setWidth(200)
)

目前用到的暂时这么多，具体的可以上github：https://github.com/OpenFlutter/flutter_screenutil
具体地址：
更多文章查看个人主页：
Github搭建个人博客（2019最新版,亲测）