一、簡介

flutter_screenutil?是一個 Flutter 插件，專門用于處理屏幕適配問題。它簡化了不同設備間尺寸差異的處理，確保你的應用在各種屏幕上都能保持良好的顯示效果。開發者可以通過簡單的調用來設置基于設計圖尺寸的控件寬高和字體大小。

項目地址：https://github.com/OpenFlutter/flutter_screenutil.git

二、屬性

屬性	類型	默認值	描述
designSize	Size	Size(360,690)	設計稿中設備的尺寸（建議dp）
builder	Widget Function()	Container()	一般返回一個 MaterialApp 類型的 Function()
orientation	Orientation	portrait	屏幕方向
splitScreenMode	bool	true	支持分屏尺寸

三、使用方法

（1）添加依賴

在你的項目?pubspec.yaml?文件中添加?flutter_screenutil?依賴：

dependencies:

????????flutter_screenutil: ^5.9.3

然后執行?pub get?來下載并安裝依賴。

（2）初始化

flutter_screenutil?提供了兩種方式進行初始化：ScreenUtilInit?方式和?ScreenUtil.init?方式。首先在使用的地方導入包：

import 'package:flutter_screenutil/flutter_screenutil.dart';

ScreenUtilInit 方式

使用 ScreenUtilInit 方式進行初始化，需要將項目的 MaterialApp 進行一層包裹，然后在?builder?中返回項目本身的 MaterialApp ，在 ScreenUtilInit 的?designSize?參數中傳入設計圖的尺寸，實現如下：

class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return ScreenUtilInit(designSize: Size(360, 690), // 傳入設計圖尺寸builder: () => MaterialApp(...),);}
}

ScreenUtil.init 方式：

直接使用?ScreenUtil.init?方法，傳入屏幕尺寸、設計圖尺寸和屏幕方向即可對?flutter_screenutil?進行初始化，代碼如下：

ScreenUtil.init(BoxConstraints(maxWidth: MediaQuery.of(context).size.width,  //屏幕寬度maxHeight: MediaQuery.of(context).size.height, //屏幕高度),designSize: const Size(360, 690), // 設計圖尺寸orientation: Orientation.portrait); // 屏幕方向

使用這種方式只需在使用?flutter_screenutil?前進行初始化即可，一般放在根路由即第一個頁面加載的時候進行初始化。

注意：ScreenUtil.init?不能在?MyApp?中進行初始化，會報如下錯誤?No MediaQuery ancestor could be found starting from the context that was passed to MediaQuery.of(). This can happen because you have not added a WidgetsApp, CupertinoApp, or MaterialApp widget (those widgets introduce a MediaQuery), or it can happen if the context you use comes from a widget above those widgets.?因為這個時候還沒加載?MaterialApp?無法使用 MediaQuery.of(context ) 獲取到屏幕寬高

（3）使用

初始化以后就可以使用?flutter_screenutil?提供的方法獲取到適配后的數值進行使用了。

可通過如下 api 獲取寬高以及字體的適配數值：

ScreenUtil().setWidth(540)  // 根據屏幕寬度適配尺寸
ScreenUtil().setHeight(200) // 根據屏幕高度適配尺寸(一般根據寬度適配即可)
ScreenUtil().radius(200)    // 根據寬度或高度中的較小者進行調整
ScreenUtil().setSp(24)      // 字體大小適配

傳入的參數即為設計圖上的大小。在實際使用中的示例如下：

Container(width: ScreenUtil().setWidth(200),height: ScreenUtil().setHeight(540),child: Text("Hello", style: TextStyle(fontSize: ScreenUtil().setSp(24)),),
);

這樣即可使用適配的數值進行開發.

但發現這樣寫太麻煩了，為了獲取一個適配的數值，要寫一串的很長的代碼。flutter_screenutil?提供了更簡潔的調用方法，使用 Dart 擴展為 num 類型擴展了一系列屬性可以方便開發者調用，上面的 api 可以通過擴展屬性進行如下轉換：

ScreenUtil().setWidth(540)  =>  540.h
ScreenUtil().setHeight(200) =>  200.w
ScreenUtil().radius(200)    =>  200.r
ScreenUtil().setSp(24)      =>  24.sp

修改后的使用示例如下：

Container(width: 200.w,height: 540.h,child: Text("Hello", style: TextStyle(fontSize: 24.sp),),
);

四、字體適配

除了上面 4 種擴展屬性以外，還提供了?sm?以及?sw、?sh

• sm?：取數值本身與?sp?的值最小的值，如?12.sm?則取?12?與?12.sp?的值進行比較，取最小的值。

• sw?：screen width 的縮寫，即屏幕寬度，作用是按屏幕寬度比例返回值。如?0.2.sw?則返回屏幕寬度的 20%，1.sw?則是整個屏幕寬度

• sh?：screen height 的縮寫，及屏幕高度，作用與sw類似，返回指定比例的屏幕高度值。如?1.sh?為整個屏幕高度

使用?sp?作為字體單位，默認是會隨著系統字體縮放進行變化，如果不想字體隨著系統縮放而變化，可設置?textScaleFactor?為?1.0?來實現。

// 示例代碼:
Column(crossAxisAlignment: CrossAxisAlignment.start,children: <Widget>[Text('我的文字大小在設計稿上是20dp，因為設置了`textScaleFactor`,所以不會隨著系統的文字縮放比例變化',style: TextStyle(color: Colors.black,fontSize: 20.sp,),textScaleFactor: 1.0,),Text('我的文字大小在設計稿上是20dp，會隨著系統的文字縮放比例變化',style: TextStyle(color: Colors.black,fontSize: 20.sp,),),],
)

設置字體不隨系統字體大小進行改變

項目中可對?MaterialApp?進行全局設置或者對?Text?進行單獨設置：

全局設置：

MaterialApp(debugShowCheckedModeBanner: false,title: 'Flutter_ScreenUtil',theme: ThemeData(primarySwatch: Colors.blue,),builder: (context, widget) {return MediaQuery(///設置文字大小不隨系統設置改變data: MediaQuery.of(context).copyWith(textScaleFactor: 1.0),child: widget,);},home: HomePage(title: 'FlutterScreenUtil Demo'),
),

Text 單獨設置：

Text("text", textScaleFactor: 1.0)

五、API 參考

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.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 // 實際高度與設計稿高度度的比例ScreenUtil().orientation  // 屏幕方向0.5.sw  // 屏幕寬度的0.5倍
0.5.sh  // 屏幕高度的50%