github:
https://github.com/OpenFlutter/flutter_screenutil
效果:
步骤:
1、 增加依赖
dependencies:
flutter:
sdk: flutter
flutter_screenutil: ^1.0.2
2、 在每个使用的地方导入包:
import 'package:flutter_screenutil/flutter_screenutil.dart';
3、初始化并设置适配尺寸及字体大小是否根据系统的“字体大小”辅助选项来进行缩放
//填入设计稿中设备的屏幕尺寸
//默认 width : 1080px , height:1920px , allowFontScaling:false
ScreenUtil.init(context);
//假如设计稿是按iPhone6的尺寸设计的(iPhone6 750*1334)
ScreenUtil.init(context, width: 750, height: 1334);
//设置字体大小根据系统的“字体大小”辅助选项来进行缩放,默认为false
ScreenUtil.init(context, width: 750, height: 1334, allowFontScaling: true);
4、设置宽高
根据屏幕宽度适配
width: ScreenUtil().setWidth(375),
代码示例:
Container(
padding: EdgeInsets.all(ScreenUtil().setWidth(10)),
width: ScreenUtil().setWidth(375),
height: ScreenUtil().setHeight(200),
color: Colors.red,
child: Text(
'My width:${ScreenUtil().setWidth(375)}dp \n'
'My height:${ScreenUtil().setHeight(200)}dp',
style: TextStyle(
color: Colors.white, fontSize: ScreenUtil().setSp(24)),
),
)
flutter_screenutil.dart
static void init(BuildContext context,
{num width = defaultWidth,
num height = defaultHeight,
bool allowFontScaling = false}) {
if (_instance == null) {
_instance = ScreenUtil._();
}
_instance.uiWidthPx = width;
_instance.uiHeightPx = height;
_instance.allowFontScaling = allowFontScaling;
MediaQueryData mediaQuery = MediaQuery.of(context);
_mediaQueryData = mediaQuery;
_pixelRatio = mediaQuery.devicePixelRatio;
_screenWidth = mediaQuery.size.width;
_screenHeight = mediaQuery.size.height;
_statusBarHeight = mediaQuery.padding.top;
_bottomBarHeight = _mediaQueryData.padding.bottom;
_textScaleFactor = mediaQuery.textScaleFactor;
}
/// 根据UI设计的设备宽度适配
/// 高度也可以根据这个来做适配可以保证不变形,比如你先要一个正方形的时候.
/// Adapted to the device width of the UI Design.
/// Height can also be adapted according to this to ensure no deformation ,
/// if you want a square
num setWidth(num width) => width * scaleWidth;
/// 实际的dp与UI设计px的比例
/// The ratio of the actual dp to the design draft px
double get scaleWidth => _screenWidth / uiWidthPx;
/// 当前设备宽度 dp
/// The horizontal extent of this size.
static double get screenWidthDp => _screenWidth;
Nexus 6P 示例效果图中设置宽度375px,转换为205.7dp
375 * 411.4 / 750 = 205.7