Flutter 屏幕适配flutter_screenutil使用心得

Dear 丶 2021-08-28 14:41 740阅读 0赞

> 前言：首先屏幕适配这一块在原生方面深有体会，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);

如下图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZGFpbG9uZ19ibG9n_size_16_color_FFFFFF_t_70]

（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最新版,亲测）][Github_2019]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZGFpbG9uZ19ibG9n_size_16_color_FFFFFF_t_70]: /images/20210529/848124d03dae47968dd426d4429ef1a7.png
[Github_2019]: https://blog.csdn.net/xudailong_blog/article/details/78762262