flutter_screenutil

flutter_screenutil是一個(gè)用于在Flutter應(yīng)用程序中進(jìn)行屏幕適配的工具包。它旨在幫助開(kāi)發(fā)者在不同屏幕尺寸和密度的設(shè)備上創(chuàng)建響應(yīng)式的UI布局。

`flutter_screenutil``提供了一些用于處理尺寸和間距的方法，使得開(kāi)發(fā)者可以根據(jù)設(shè)備的屏幕尺寸和密度來(lái)動(dòng)態(tài)調(diào)整UI元素的大小和位置。它提供了以下功能：

• 屏幕適配：flutter_screenutil可以根據(jù)設(shè)備的屏幕尺寸和密度，將設(shè)計(jì)稿上的尺寸轉(zhuǎn)換為適合當(dāng)前設(shè)備的實(shí)際尺寸。這樣，無(wú)論是在小屏幕手機(jī)上還是在大屏幕平板電腦上運(yùn)行應(yīng)用，UI元素都能正確地適配屏幕。

• 尺寸適配：flutter_screenutil提供了setWidth()和setHeight()方法，通過(guò)傳入設(shè)計(jì)稿上的尺寸，可以根據(jù)設(shè)備的屏幕寬度進(jìn)行動(dòng)態(tài)調(diào)整，返回適配后的實(shí)際寬度。

• 字體適配：flutter_screenutil提供了setSp()方法，可以根據(jù)設(shè)備的屏幕密度進(jìn)行字體大小的適配。通過(guò)傳入設(shè)計(jì)稿上的字體大小，可以根據(jù)當(dāng)前設(shè)備的屏幕密度動(dòng)態(tài)調(diào)整字體大小。

官方文檔
https://pub-web.flutter-io.cn/packages/flutter_screenutil

安裝

flutter pub add flutter_screenutil

原理

UI 設(shè)計(jì)的時(shí)候一般會(huì)按照一個(gè)固定的尺寸進(jìn)行設(shè)計(jì)，如 360 x 690 ，實(shí)際設(shè)備分辨率可能是 Google Pixel: 1080 x 1920 等。開(kāi)發(fā)時(shí)如果直接按照設(shè)計(jì)圖寫死數(shù)值則會(huì)出現(xiàn)最后實(shí)現(xiàn)的效果跟設(shè)計(jì)效果不一致的情況。這個(gè)時(shí)候就可以用比例的方式來(lái)進(jìn)行適配。

將設(shè)計(jì)圖分為固定單位并給這個(gè)單位定義一個(gè)標(biāo)識(shí)，例如就叫 w，然后通過(guò)獲取設(shè)備分辨率，使用設(shè)備真實(shí)寬度除以設(shè)計(jì)圖寬度 ，就得到了 1w 代表的真實(shí)寬度:

1w = 設(shè)備真實(shí)寬度 / 設(shè)計(jì)圖寬度

如設(shè)計(jì)圖尺寸是 360 x 690 ，則寬度為 360w ，真實(shí)設(shè)備寬度為 1080 則 1w = 1080 / 360 = 3。

示例

class MyApp extends StatelessWidget {const MyApp({super.key});// This widget is the root of your application.@overrideWidget build(BuildContext context) {return ScreenUtilInit(// 設(shè)計(jì)尺寸designSize: const Size(360, 690),// 是否根據(jù)最小寬度和高度調(diào)整文本minTextAdapt: true,builder: (context, child) {return MaterialApp(title: 'Flutter Demo',theme: ThemeData(colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),useMaterial3: true,),home: child,);},child: const MyHomePage(title: '適配'),);}
}class MyHomePage extends StatefulWidget {const MyHomePage({super.key, required this.title});final String title;@overrideState<MyHomePage> createState() => _MyHomePageState();
}class _MyHomePageState extends State<MyHomePage> {@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(backgroundColor: Theme.of(context).colorScheme.inversePrimary,title: Text(widget.title),),body: Column(children: [Container(width: 200,height: 200,color: Colors.red,child: const Text("適配后的的尺寸",style: TextStyle(fontSize: 20, color: Colors.white),),),const SizedBox(height: 20,),Container(width: ScreenUtil().setWidth(200),height: ScreenUtil().setWidth(200),color: Colors.blue,child: Text("適配后的的尺寸",style: TextStyle(fontSize: ScreenUtil().setSp(20), color: Colors.white),),),],),);}
}

常用方法

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

為了方便使用，還支持簡(jiǎn)寫

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

注意：
一般情況下 1.w != 1.h ，除非剛好屏幕分辨率比例與設(shè)計(jì)圖比例一致，所以如果要設(shè)置正方形，切記使用相同的單位，如都設(shè)置相同的 w 或者 h ，否則可能顯示為長(zhǎng)方形。