Flutter屏幕适配解决方案与最佳实践

github 地址https://github.com/OpenFlutter/flutter_screenutil/blob/master/README_CN.md

如果要实现屏幕适配其实蛮简单的, 这里我们使用第三方框架, 介绍下使用

这里按照设计图宽高来写，allowFontScaling表示不跟随系统字体缩放
ScreenUtil.init(width: 750, height: 1334, allowFontScaling: false);

用魅族手机来看, 大家根据提示文字和代码对号入座 。

image.png

'My width:${375.w}dp n My height:${200.h}dp',

            Text('Device width:${ScreenUtil.screenWidthPx}px'),
            Text('Device height:${ScreenUtil.screenHeightPx}px'),
            Text('Device width:${ScreenUtil.screenWidth}dp'),
            Text('Device height:${ScreenUtil.screenHeight}dp'),
            Text('Device pixel density:${ScreenUtil.pixelRatio}'),
            Text('Bottom safe zone distance:${ScreenUtil.bottomBarHeight}dp'),
            Text('Status bar height:${ScreenUtil.statusBarHeight}dp'),
            Text('Ratio of actual width dp to design draft px:${ScreenUtil().scaleWidth}', textAlign: TextAlign.center, ),
            Text('Ratio of actual height dp to design draft px:${ScreenUtil().scaleHeight}',textAlign: TextAlign.center,),

Text('System font scaling factor:${ScreenUtil.textScaleFactor}'),

 Text(
                    'My font size is 24px on the design draft and will not change with the system.',
                    style: TextStyle(
                      color: Colors.black,
                      fontSize: 24.sp,
                    ))