前言
你的flutter在小屏幕手機上出現(xiàn)文字丟失了么槽惫？
你的flutter應(yīng)用在小屏幕手機上排版出錯了么加勤？
你的flutter應(yīng)用在大屏幕手機上布局錯亂了么？
你在用flutter_screenutil做屏幕自適應(yīng)么耀态？
今天我來給大家介紹一款簡單不侵入代碼的自適應(yīng)家制。
如果你有如下需求：
- 舊的flutter想快速屏幕適應(yīng)各種手機
- 頁面代碼中不想增加關(guān)于適配屏幕的代碼
kg_density
代碼地址：https://github.com/smartbackme/KgDensity
kg_density 是一個極簡的屏幕適配方案，可以快速的幫助已經(jīng)開發(fā)好的項目適配屏幕
開始集成
dependencies:
kg_density: ^0.0.1
以下機型來自 iphone5s
登錄適配之前
img5.jpg
登錄適配之后
img4.jpg
圖表頁面適配之前
img6.jpg
圖表頁面適配之后
img2.jpg
其他頁面適配之前
img1.jpg
其他頁面適配之后
img3.jpg
使用方法：
- 創(chuàng)建 FlutterBinding
class MyFlutterBinding extends WidgetsFlutterBinding with KgFlutterBinding {
static WidgetsBinding ensureInitialized() {
if (WidgetsBinding.instance == null) MyFlutterBinding();
return WidgetsBinding.instance!;
}
}
- MaterialApp 配置
MaterialApp(
///定義主題
theme: ThemeData(),
builder: KgDensity.initSize(),
);
- 啟動前的配置
void main() {
///初始化
KgDensity.initKgDensity(375);
MyFlutterBinding.ensureInitialized();
///運行
runApp(App());
}
注意說明：
- KgDensity.initSize(builder: ??)
為了方便其他builder配置不同，代碼中專門增加其他builder
使用方法
builder: KgDensity.initSize(builder: EasyLoading.init()),
- KgDensity.initKgDensity(375)
數(shù)字配置的是按照設(shè)計稿件的最窄邊來配置的
若不使用KgDensity 進行適配厉膀，請不要init
- 正確獲取size
MediaQuery.of(context).size
請不要使用 window.physicalSize，MediaQueryData.fromWindow(window)
