flutter 适配各种屏幕

 

Flutter不同终端屏幕适配问题

// 以下是关于flutter_screenutil的官方文档链接，可以点击查看详细的使用方法和说明。
https://pub.dev/packages/flutter_screenutil

// 在每个页面的 build 方法中引入 ScreenUtil.init，以初始化屏幕适配工具。
// width 和 height 参数表示你的设计稿的宽度和高度。
Widget build(BuildContext context) {
   ScreenUtil.init(context, width: 750, height: 1334);
}

// 使用以下方式来设置高度，例如 bottom 或 top 的值。
ScreenUtil().setHeight(200)

// 使用以下方式来设置宽度，例如 left 或 right 的值。
ScreenUtil().setWidth(200)

封装屏幕适配工具

// 导入 flutter_screenutil 包
import 'package:flutter_screenutil/flutter_screenutil.dart';

// 定义一个名为Screen的类，提供一系列的静态方法，以方便进行屏幕适配。
class Screen {
  // 初始化方法，在每个页面的 build 方法中调用。
  static init(context, {width = 750, height = 1334}) {
    ScreenUtil.init(context, width: width, height: height);
  }
  
  // 设置宽度值，适用于left或right属性
  static width(value) {
    return ScreenUtil().setWidth(value);
  }

  // 设置高度值，适用于top或bottom属性
  static height(value) {
    return ScreenUtil().setHeight(value);
  }

  // 获取当前设备的屏幕宽度
  static screenWidth() {
    return ScreenUtil.screenWidth;
  }

  // 获取当前设备的屏幕高度
  static screenHeight() {
    return ScreenUtil.screenHeight;
  }

  // 获取设备的像素密度
  static pixelRatio() {
    return ScreenUtil.pixelRatio;
  }

  // 获取设备的状态栏高度，对于刘海屏，此值会更高
  static statusBarHeight() {
    return ScreenUtil.statusBarHeight;
  }

  // 获取设备的底部安全区高度，适用于全面屏下有按键的设备
  static bottomBarHeight() {
    return ScreenUtil.bottomBarHeight;
  }

  // 获取实际宽度dp与设计稿px的比例
  static scaleWidth() {
    return ScreenUtil().scaleWidth;
  }

  // 获取实际高度dp与设计稿px的比例
  static scaleHeight() {
    return ScreenUtil().scaleHeight;
  }

  // 获取系统字体缩放比例
  static textScaleFactor() {
    return ScreenUtil.textScaleFactor;
  }
}