一. 准备工作
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,
最后:你可以到手机,平板上进行调试了