第一百一十二回 flutter_screenutil包

我们在上一章回中介绍了屏幕适配相关的内容，本章回中将介绍flutter_screenutil包，该包主要用来实现屏幕适配.闲话休提，让我们一起Talk Flutter吧。

概念介绍

我们在本章回中介绍的包是flutter_screenutil,它主要用来做屏幕和字体大小的适配，它的实现原理和我们在上一章回中介绍的屏幕适配核心思想一样，这点可以通过该包的源代码看出来。不过该包可以自行选择屏幕宽度或者高度来适配，而且还支持字体大小适配，这对于可以调整字体大小的手机来说非常适用。

此外，该包是国人写的，在dar的仓库中很受欢迎，现在我越来越感受到国内软件的成熟，也希望国内软件发展的越来越好。

使用方法

1. 在yaml格式的配置文件中引入flutter_screenutil包,并且获取到当前工程中；
2. 创建ScreenUtilInit类型对象，主要是给该类的designSize和builder属性赋值；
3. 在其它组件中使用w,h方法适配屏幕上的尺寸，w表示使用屏幕宽度做适配，h表示使用屏幕高度做适配；

上面的步骤看着简单，不过还有一些细节需要说明：

• builder属性是必选属性，它主要用来创建组件，组件中的任何地方都可以使用该包中的方法实现适配。因此该包通常位于顶层组件中，或者说位于Widget树的根结点上，其位置和provider所在的位置类似。
• designSize属性是可选属性，建议把UI设计稿中的基准尺寸赋值给它。如果不给它赋值，那么使用默认值360*690.
• 该包提供的w,h方法是getter方法，使用十分方便，这些方法是在基础类型上扩展(extension)出的方法，刚开始使用时不理解，看一下它的源代码就能明白其中的原理(后面章回中会介绍)。

示例代码

Scaffold(
  appBar: AppBar(
    title: const Text('Example of Screen'),
    backgroundColor: Colors.purpleAccent,
  ),
  ///screen util包最好在根目录进行初始化，用它包含MaterialApp比较好
  body: ScreenUtilInit(
    ///我在这里输入的是分辨率，单位为dp，没有转换成px
    designSize:const Size(375.0,667.0),
    builder: (context,child) {
      return HomeWidget();
    },
    ///这个child的值和builder中参数的child相同
    child: HomeWidget(),
  ),
);

///使用screenutil包中值来适配屏幕
Container(
  color: Colors.green,
  width: 200.w,
  height: 200.w,
  child: const  Icon(Icons.face),
),

上面的代码中把包的初始化操作放在了根Widget中，也就是代码中Scaffold组件的body属性中，包的子组件中是HomeWidget,因此在HomeWidget组件的任何位置都可以使用包中的适配方法。

示例代码中给一个容器做了屏幕适配，上一章回中的示例代码中也是使用容器做适配。编译并且运行该代码，可以看到两个容器经过适配后的大小都一样，这说明，我们自定义的适配方法和包中提供的适配方法都可以用来做屏幕适配，而且适配效果相同。

经验分享

在App开发过程中屏幕适配是必不可少的内容，在原生开发中Andoird使用百分比布局和约束布局来做适配，IOS使用AutoLayout或者故事板中的约束来做适配。不管是哪种形式的适配，它们的核心思想都相同：把相同的尺寸乘以一定的比率，使得该尺寸在不同大小的屏幕上占用的屏幕空间相同。这个在Andoird中的百分比布局中体现特别明显。

综合这几种屏幕适配方式来看，flutter_screenutil包的适配方法和IOS中的AutoLayout最为相似，不过它的使用方法要比AutoLayout简单。

看官们，关于"flutter_screenutil包"相关的内容就介绍到这里，欢迎大家在评论区交流与讨论!