flutter 屏幕適配方案，讓你的UI在不同尺寸的屏幕上都能顯示合理的布局!

Flutter的適配可以使用flutter_ScreenUtil

使用方法

安裝

安裝之前請查看最新版本 新版本如有問題請使用上一版

dependencies:
  flutter:
    sdk: flutter
  # 添加依賴
  flutter_screenutil: ^{latest version}

在每個使用的地方導入包：
import 'package:flutter_screenutil/flutter_screenutil.dart';

屬性

designSize

類型：Size，例如：Size(360, 690）作用：設計稿中設備的尺寸(單位隨意,但在使用過程中必須保持一致)

allowFontScaling

類型：bool，默認值： false，作用：設置字體大小是否根據系統的“字體大小”輔助選項來進行縮放

初始化并設置適配尺寸及字體大小是否根據系統的“字體大小”輔助選項來進行縮放

在使用之前請設置好設計稿的寬度和高度，傳入設計稿的寬度和高度(單位隨意,但在使用過程中必須保持一致) 一定要進行初始化(只需設置一次),以保證在每次使用之前設置好了適配尺寸:

//填入設計稿中設備的屏幕尺寸

class HomePage extends StatelessWidget {
  const HomePage({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    // 初始化
    ScreenUtil.init(
      // 設備像素大小(必須在首頁中獲取)
      BoxConstraints(
        maxWidth: MediaQuery.of(context).size.width,
        maxHeight: MediaQuery.of(context).size.height,
      ),
      // 設計尺寸
      designSize: Size(750, 1334),
      allowFontScaling: false,
    );
    return Container(
      child: child,
    );
  }
}

使用

API

傳入設計稿的dp尺寸

    ScreenUtil().setWidth(540)  (sdk>=2.6 : 540.w)   //根據屏幕寬度適配尺寸
    ScreenUtil().setHeight(200) (sdk>=2.6 : 200.h)   //根據屏幕高度適配尺寸(一般根據寬度適配即可)
    ScreenUtil().radius(200)    (sdk>=2.6 : 200.r)   //根據寬度或高度中的較小者進行調整
    ScreenUtil().setSp(24)      (sdk>=2.6 : 24.sp)   //適配字體
    ScreenUtil().setSp(24, allowFontScalingSelf: true)   (sdk>=2.6 : 24.ssp) //適配字體(根據系統的“字體大小”輔助選項來進行縮放)
    ScreenUtil().setSp(24, allowFontScalingSelf: false)  (sdk>=2.6 : 24.nsp) //適配字體(不會根據系統的“字體大小”輔助選項來進行縮放)

    ScreenUtil.pixelRatio       //設備的像素密度
    ScreenUtil.screenWidth   (sdk>=2.6 : 1.sw)   //設備寬度
    ScreenUtil.screenHeight  (sdk>=2.6 : 1.sh)   //設備高度
    ScreenUtil.bottomBarHeight  //底部安全區距離，適用于全面屏下面有按鍵的
    ScreenUtil.statusBarHeight  //狀態欄高度 劉海屏會更高
    ScreenUtil.textScaleFactor //系統字體縮放比例

    ScreenUtil().scaleWidth  // 實際寬度設計稿寬度的比例
    ScreenUtil().scaleHeight // 實際高度與設計稿高度度的比例

    0.2.sw  //屏幕寬度的0.2倍
    0.5.sh  //屏幕高度的50%