Flutter如何用解决不同平台，不同设备尺寸的样式兼容问题？使用第三方库--ScreenUtil

champion_ooO

已于 2023-05-29 11:31:17 修改

阅读量1.1k

点赞数

分类专栏： Flutter 文章标签： flutter android ios

于 2023-05-25 14:21:29 首次发布

本文链接：https://blog.youkuaiyun.com/champion_ooO/article/details/130866346

版权

Flutter 专栏收录该内容

11 篇文章

订阅专栏

文章详细介绍了如何在Flutter项目中引入和使用flutter_screenUtil库，包括从pub.dev查找库信息，选择兼容版本，修改pubspec.yaml文件添加依赖，通过Pubget安装，以及在代码中使用ScreenUtil进行屏幕适配的方法。

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

一. 准备工作

1. 首先需要去pub官网查看这个第三方库的信息，访问地址：https://pub.dev

2. 在搜索框中输入 flutter_screenUtil

3.进入详情页后，最关心的是关于该依赖的版本问题，因为版本会导致功能不一样

4. 进入版本页

注意：如果你的flutter项目版本低于2.12.0 ，那么你需要在版本页往下寻找不带有 Null Safety的版本去使用。

5. 找到你所需的版本号，我们的准备工作就到此结束，接下来进入编辑器中开始实际引入操作。

二. 项目中引入

1. 找到项目中的 pubspec.yaml 文件，在依赖中添加你需要的screenUtil依赖，以及所需的版本号。（因为作者本人的flutter项目版本是1.22.6，所以在此我引入的是4.0.4，不支持空安全的版本，大家根据自己项目的flutter版本引入版本号）

2. 添加完成后，ctrl+s 保存文件

（1）点击Andriod Studio编辑器中的右上角：Pub get即可，此时，项目会根据yaml文件中的dependencies去下载对应的资源（推荐使用这个Pub get按钮，编辑器的终端输入命令没有这个稳定）

（2）点击Pub get后，Android Studio会在message中，告知下载是否成功。

code为0，代表成功；如果code不为0，那么会出现对应的错误。

三. 代码中使用

1. 在成功引入后，接下来就是对代码进行修改。

(1) 这是不加入ScreenUtil时，runApp内容

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    debugShowCheckedModeBanner: false,
    title: "flutter Demo",
    theme: ThemeData(primarySwatch: Colors.blue),
    home: Scaffold(
      body: Container(
            child: Text("hello screen")
        ) 
    ),
  ));
}

（2）重点来了：在常规runApp的结构中，我们是直接嵌入了 MaterialApp组件。如果使用ScreenUtil，那么就需要对runApp组件进行改造，改造分为4步：

第一步：将MaterialApp组件内容剪切出来；

import 'package:flutter/material.dart';

// 不要忘记引入该资源!!!
import 'package:flutter_screenutil/flutter_screenutil.dart';

void main() {
  runApp();
}

第二步：在runApp()中返回ScreenUtilInit()；

import 'package:flutter/material.dart';

// 不要忘记引入该资源
import 'package:flutter_screenutil/flutter_screenutil.dart';

void main() {
  runApp(ScreenUtilInit());
}

第三步：在剪切板的MaterialApp组件内容放在ScreenUtilInit组件的builder中保存即可；

import 'package:flutter/material.dart';

// 不要忘记引入该资源
import 'package:flutter_screenutil/flutter_screenutil.dart';

void main() {
  runApp(ScreenUtilInit(
     // 第一个参数，必传项
    designSize: Size(375, 812),  // 代表UI图设计尺寸,具体值根据UI提供的设置
    // 第二个参数，必传项
    builder: () =>
        MaterialApp(
          debugShowCheckedModeBanner: false,
          title: "flutter Demo",
          theme: ThemeData(primarySwatch: Colors.blue),
          home: Scaffold(
              body: Container(
                  child: Text("hello screen")
              )
          ),
        ),
      )
  );
}

第四步：在项目中设置了具体数值的地方，比如width，height，top，left，padding，borderRadius，fontSize等进行相应的修改。

// 使用screenUtil前的代码
width: 200,
height: 200,
padding: EdgeInsets.all(10.0),
fontSize: 14,


// 使用screenUtil后的代码
width: ScreenUtil().setWidth(200),
height: ScreenUtil().setHeight(200),
padding: EdgeInsets.all(ScreenUtil().SetWidth(10.0)),
fontSize: ScreenUtil().setSp(14)

注意：如果项目的Dart版本高于2.6.0，(windows键+R键：cmd窗口中输入dart --version即可查看版本号)那么就不采用ScreenUtil.setWidth() 这样的写法，直接使用.w，.h，.sp这样的写法，参照下图

width: 200,
fontSize: 14,

// 修改为：
width: 200.w,
fontSize: 14.sp,

最后：你可以到手机，平板上进行调试了