flutter 屏幕适配方案，让你的UI在不同尺寸的屏幕上都能显示合理的布局!
Flutter的适配可以使用flutter_ScreenUtil
使用方法
安装
安装之前请查看最新版本 新版本如有问题请使用上一版
dependencies:
flutter:
sdk: flutter
# 添加依赖
flutter_screenutil: ^{latest version}
在每个使用的地方导入包：
import 'package:flutter_screenutil/flutter_screenutil.dart';
属性
designSize
类型：Size，例如：Size(360, 690）作用：设计稿中设备的尺寸(单位随意,但在使用过程中必须保持一致)
allowFontScaling
类型：bool，默认值： false，作用：设置字体大小是否根据系统的“字体大小”辅助选项来进行缩放
初始化并设置适配尺寸及字体大小是否根据系统的“字体大小”辅助选项来进行缩放
在使用之前请设置好设计稿的宽度和高度，传入设计稿的宽度和高度(单位随意,但在使用过程中必须保持一致) 一定要进行初始化(只需设置一次),以保证在每次使用之前设置好了适配尺寸:
//填入设计稿中设备的屏幕尺寸
class HomePage extends StatelessWidget {
const HomePage({Key key}) : super(key: key);
@override
Widget build(BuildContext context) {
// 初始化
ScreenUtil.init(
// 设备像素大小(必须在首页中获取)
BoxConstraints(
maxWidth: MediaQuery.of(context).size.width,
maxHeight: MediaQuery.of(context).size.height,
),
// 设计尺寸
designSize: Size(750, 1334),
allowFontScaling: false,
);
return Container(
child: child,
);
}
}
使用
API
传入设计稿的dp尺寸
ScreenUtil().setWidth(540) (sdk>=2.6 : 540.w) //根据屏幕宽度适配尺寸
ScreenUtil().setHeight(200) (sdk>=2.6 : 200.h) //根据屏幕高度适配尺寸(一般根据宽度适配即可)
ScreenUtil().radius(200) (sdk>=2.6 : 200.r) //根据宽度或高度中的较小者进行调整
ScreenUtil().setSp(24) (sdk>=2.6 : 24.sp) //适配字体
ScreenUtil().setSp(24, allowFontScalingSelf: true) (sdk>=2.6 : 24.ssp) //适配字体(根据系统的“字体大小”辅助选项来进行缩放)
ScreenUtil().setSp(24, allowFontScalingSelf: false) (sdk>=2.6 : 24.nsp) //适配字体(不会根据系统的“字体大小”辅助选项来进行缩放)
ScreenUtil.pixelRatio //设备的像素密度
ScreenUtil.screenWidth (sdk>=2.6 : 1.sw) //设备宽度
ScreenUtil.screenHeight (sdk>=2.6 : 1.sh) //设备高度
ScreenUtil.bottomBarHeight //底部安全区距离，适用于全面屏下面有按键的
ScreenUtil.statusBarHeight //状态栏高度 刘海屏会更高
ScreenUtil.textScaleFactor //系统字体缩放比例
ScreenUtil().scaleWidth // 实际宽度设计稿宽度的比例
ScreenUtil().scaleHeight // 实际高度与设计稿高度度的比例
0.2.sw //屏幕宽度的0.2倍
0.5.sh //屏幕高度的50%
