Flutter 屏幕适配flutter_screenutil使用心得

最新推荐文章于 2025-05-27 20:12:36 发布

xudailong_blog

最新推荐文章于 2025-05-27 20:12:36 发布

阅读量1.6w

点赞数 3

分类专栏： Flutter开发文章标签： android 移动开发 flutter

本文链接：https://blog.youkuaiyun.com/xudailong_blog/article/details/105607611

版权

Flutter开发专栏收录该内容

93 篇文章

订阅专栏

本文探讨了Flutter应用中的屏幕适配问题，尤其是针对不同分辨率设备的差异。作者分享了flutter_screenutil插件的使用心得，包括正确引入插件的方法，以及在控件尺寸和字体大小方面的应用，帮助开发者解决屏幕适配带来的挑战。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言：首先屏幕适配这一块在原生方面深有体会，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最新版,亲测）