適配各種屏幕

Flutter 不同終端屏幕適配問題

   https://pub.dev/packages/flutter_screenutil

 

 

每個頁面的 build 引入

Widget build(BuildContext context) {

   ScreenUtil.init(context, width: 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: 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 ; //系統字體縮放比例
  }
}