flutter_ScreenUtil
flutter 屏幕适配方案,让你的UI在不同尺寸的屏幕上都能显示合理的布局!
github: https://github.com/OpenFlutter/flutter_screenutil
使用方法:
安装依赖:
安装之前请查看最新版本
1 | dependencies: |
在每个使用的地方导入包:
1 | import 'package:flutter_screenutil/flutter_screenutil.dart'; |
属性
属性 | 类型 | 默认值 | 描述 |
---|---|---|---|
width | double | 1080px | 设计稿中设备的宽度,单位px |
height | double | 1920px | 设计稿中设备的高度,单位px |
allowFontScaling | bool | false | 设置字体大小是否根据系统的“字体大小”辅助选项来进行缩放 |
初始化并设置适配尺寸及字体大小是否根据系统的“字体大小”辅助选项来进行缩放
在使用之前请设置好设计稿的宽度和高度,传入设计稿的宽度和高度(单位px)
一定在MaterialApp的home中的页面设置(即入口文件,只需设置一次),以保证在每次使用之前设置好了适配尺寸:
1 | //填入设计稿中设备的屏幕尺寸 |
使用:
适配尺寸:
传入设计稿的px尺寸:
根据屏幕宽度适配 width: ScreenUtil().setWidth(540)
,
根据屏幕高度适配 height: ScreenUtil().setHeight(200)
,
注意
高度也根据setWidth来做适配可以保证不变形(当你想要一个正方形的时候)
setHeight方法主要是在高度上进行适配, 在你想控制UI上一屏的高度与实际中显示一样时使用.
例如:
1 | //UI上是长方形: |
适配字体:
传入设计稿的px尺寸:
1 | //传入字体大小,默认不根据系统的“字体大小”辅助选项来进行缩放(可在初始化ScreenUtil时设置allowFontScaling) |
其他相关api:
1 | ScreenUtil.pixelRatio //设备的像素密度 |
1 | import 'package:flutter/material.dart'; |