flutter屏幕适配

现在的手机品牌和型号越来越多，导致我们平时写布局的时候会在个不同的移动设备上显示的效果不同，

比如我们的设计稿一个View的大小是300px，如果直接写300px，可能在当前设备显示正常，但到了其他设备可能就会偏小或者偏大，这就需要我们对屏幕进行适配。

安卓原生的话有自己的适配规则，可以根据不同的尺寸建立不同的文件夹，系统会根据当前的设备尺寸取对应的大小的布局。而flutter本身并没有适配规则，而原生的又比较繁琐，这就需要我们自己去对屏幕进行适配。

点击直达github地址 如果有帮助，请给我个star

flutter_ScreenUtil

flutter 屏幕适配方案

github: github.com/OpenFlutter…

csdn博客 工具 介绍: blog.csdn.net/u011272795/…

使用方法:

安装依赖：

安装之前请查看最新版本

dependencies:
  flutter:
    sdk: flutter # 添加依赖 flutter_screenutil: ^0.3.0 复制代码

在每个使用的地方导入包：

import 'package:flutter_screenutil/flutter_screenutil.dart';

复制代码

初始化设置尺寸

在使用之前请设置好设计稿的宽度和高度，传入设计稿的宽度和高度(单位px) 一定在MaterialApp的home中的页面设置，以保证在每次使用之前设置好了适配尺寸:

//设置适配尺寸 (填入设计稿中设备的屏幕尺寸) 假如设计稿是按iPhone6的尺寸设计的(iPhone6 750*1334)
    ScreenUtil.instance = ScreenUtil(width: 750, height: 1334)..init(context); 复制代码

使用：

适配尺寸：

//传入设计稿的px尺寸：
适配后的宽度width: ScreenUtil().setWidth(540), 适配后的高度height: ScreenUtil().setHeight(200), 高度也根据setWidth来做适配可以保证不变形 例如: Container( width: ScreenUtil().setWidth(375), height: ScreenUtil().setHeight(200), ), 复制代码

适配字体:

ScreenUtil().setSp(28) //传入字体大小，根据系统的“字体大小”辅助选项来进行缩放 ScreenUtil().setSp(28，false) //传入字体大小，不会根据系统的“字体大小”辅助选项来进行缩放 for example: Text( 'My font size is 28px and will not change with the system.', style: TextStyle( color: Colors.black, fontSize: ScreenUtil().setSp(28, false) ) ), 复制代码

其他相关api：

ScreenUtil.pixelRatio       //设备的像素密度
    ScreenUtil.screenWidth //设备宽度 ScreenUtil.screenHeight //设备高度 ScreenUtil.bottomBarHeight //底部安全区距离，适用于全面屏下面有按键的 ScreenUtil.statusBarHeight //状态栏高度 刘海屏会更高 单位px ScreenUtil.textScaleFactory //系统字体缩放比例 ScreenUtil().scaleWidth //宽度相对于设计稿放大的倍数 ScreenUtil().scaleHeight //高度相对于设计稿放大的倍数 复制代码

//导入
import 'package:flutter_screenutil/flutter_screenutil.dart'; ... @override Widget build(BuildContext context) { //设置适配尺寸 (填入设计稿中设备的屏幕尺寸) 假如设计稿是按iPhone6的尺寸设计的(iPhone6 750*1334) ScreenUtil.instance = ScreenUtil(width: 750, height: 1334)..init(context); print('设备宽度:${ScreenUtil.screenWidth}'); //Device width print('设备高度:${ScreenUtil.screenHeight}'); //Device height print('设备的像素密度:${ScreenUtil.pixelRatio}'); //Device pixel density print( '底部安全区距离:${ScreenUtil.bottomBarHeight}'); //Bottom safe zone distance，suitable for buttons with full screen print( '状态栏高度:${ScreenUtil.statusBarHeight}px'); //Status bar height , Notch will be higher Unit px print( '宽度相对于设计稿放大的倍数:${ScreenUtil().scaleWidth}'); //The width is enlarged relative to the design draft print( '高度相对于设计稿放大的倍数:${ScreenUtil().scaleHeight}'); //The height is enlarged relative to the design draft print('系统的字体缩放比例:${ScreenUtil.textScaleFactory}'); return new Scaffold( appBar: new AppBar( title: new Text(widget.title), ), body: new Center( child: Column( crossAxisAlignment: CrossAxisAlignment.center, children: <Widget>[ Row( children: <Widget>[ Container( width: ScreenUtil().setWidth(375), height: ScreenUtil().setHeight(200), color: Colors.red, child: Text( 'My width:${ScreenUtil().setWidth(375)}dp', style: TextStyle( color: Colors.white, fontSize: ScreenUtil().setSp(28, false)), ), ), Container( width: ScreenUtil().setWidth(375), height: ScreenUtil().setHeight(

转载于:https://www.cnblogs.com/ckAng/p/10077832.html