适配各种屏幕

Flutter 不同终端屏幕适配问题

   https://pub.dev/packages/flutter_screenutil

 

 

每个页面的 build 引入

Widget build(BuildContext context) {

   ScreenUtil.init(context,  750, height: 1334); // width 设计图的宽, height 设计图的高

}

ScreenUtil().setHeight(200)  // 这种方式写 高 bottom top 的值

ScreenUtil().setWidth(200) //这种方式写 宽 left right

封装好的代码

import 'package:flutter_screenutil/flutter_screenutil.dart';

// 适配设备各种分辨率

class Screen{
  static init(context, {width = 750, height = 1334}) {
    ScreenUtil.init(context,  width, height: height); //初始化 每个页面的 build 都要引入
  }
  static width(value) {
    return ScreenUtil().setWidth(value); //设置 宽度 left right
  }
  static height(value) {
    return ScreenUtil().setHeight(value); //设置 高度 top bottom
  }
  static screenWidth() {
    return ScreenUtil.screenWidth; //设备宽度
  }
  static screenHeight() {
    return ScreenUtil.screenHeight; //设备高度
  }
  static pixelRatio() {
    return ScreenUtil.pixelRatio; //设备的像素密度
  }
  static statusBarHeight() {
    return ScreenUtil.statusBarHeight; //状态栏高度 刘海屏会更高  单位px
  }
  static bottomBarHeight() {
    return ScreenUtil.bottomBarHeight; //底部安全区距离，适用于全面屏下面有按键的
  }
  static scaleWidth() {
    return ScreenUtil().scaleWidth; // 实际宽度的dp与设计稿px的比例
  }
  static scaleHeight() {
    return ScreenUtil().scaleHeight; // 实际高度的dp与设计稿px的比例
  }
  static textScaleFactor() {
    return ScreenUtil.textScaleFactor ; //系统字体缩放比例
  }
}