flutter_screenutil屏幕適配

 

flutter_screenutil插件

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

注意：此插件仍處於開發階段，某些API可能尚未推出。

安裝依賴：

安裝之前請查看最新版本

# 添加依賴
  flutter_screenutil: ^0.5.3

在每個使用的地方導入包：

import 'package:flutter_screenutil/flutter_screenutil.dart';

屬性

屬性	類型	默認值	描述
width	double	1080px	設計稿中設備的寬度,單位px
height	double	1920px	設計稿中設備的高度,單位px
allowFontScaling	bool	false	設置字體大小是否根據系統的“字體大小”輔助選項來進行縮放

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

在使用之前請設置好設計稿的寬度和高度，傳入設計稿的寬度和高度(單位px) 一定在MaterialApp的home中的頁面設置(即入口文件，只需設置一次),以保證在每次使用之前設置好了適配尺寸:

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

//默認 width : 1080px , height:1920px , allowFontScaling:false
ScreenUtil.instance = ScreenUtil.getInstance()..init(context);

//假如設計稿是按iPhone6的尺寸設計的(iPhone6 750*1334) 
ScreenUtil.instance = ScreenUtil(width: 750, height: 1334)..init(context);

//設置字體大小根據系統的“字體大小”輔助選項來進行縮放,默認為false
ScreenUtil.instance = ScreenUtil(width: 750, height: 1334, allowFontScaling: true)..init(context);

使用：

適配尺寸：

傳入設計稿的px尺寸：

根據屏幕寬度適配 width: ScreenUtil.getInstance().setWidth(540),

根據屏幕高度適配 height: ScreenUtil.getInstance().setHeight(200),

也可以使用 ScreenUtil() 替代 ScreenUtil.getInstance(), 例如：ScreenUtil().setHeight(200)

注意

高度也根據setWidth來做適配可以保證不變形(當你想要一個正方形的時候)

setHeight方法主要是在高度上進行適配, 在你想控制UI上一屏的高度與實際中顯示一樣時使用.

 //初始化設計尺寸
ScreenUtil.instance = ScreenUtil(width: 750, height: 1334)..init(context);

print('設備的像素密度：${ScreenUtil.pixelRatio}');
print('設備的高：${ScreenUtil.screenHeight}');
print('設備的寬：${ScreenUtil.screenWidth}');

適配字體:

傳入設計稿的px尺寸：

//傳入字體大小，默認不根據系統的“字體大小”輔助選項來進行縮放(可在初始化ScreenUtil時設置allowFontScaling)
ScreenUtil.getInstance().setSp(28)         
 
//傳入字體大小，根據系統的“字體大小”輔助選項來進行縮放(如果某個地方不遵循全局的allowFontScaling設置)     
ScreenUtil(allowFontScaling: true).setSp(28)        
     
//for example:

Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Text('我的文字大小在設計稿上是25px，不會隨着系統的文字縮放比例變化',
                    style: TextStyle(
                        color: Colors.black, fontSize: ScreenUtil.getInstance().setSp(24))),
                Text('我的文字大小在設計稿上是25px，會隨着系統的文字縮放比例變化',
                    style: TextStyle(
                        color: Colors.black, fontSize: ScreenUtil(allowFontScaling: true).setSp(24))),
              ],
  )

其他相關api：

ScreenUtil.pixelRatio //設備的像素密度 ScreenUtil.screenWidth //設備寬度 ScreenUtil.screenHeight //設備高度 ScreenUtil.bottomBarHeight //底部安全區距離，適用於全面屏下面有按鍵的 ScreenUtil.statusBarHeight //狀態欄高度 劉海屏會更高 單位px ScreenUtil.textScaleFactory //系統字體縮放比例 ScreenUtil.getInstance().scaleWidth // 實際寬度的dp與設計稿px的比例 ScreenUtil.getInstance().scaleHeight // 實際高度的dp與設計稿px的比例

完整demo示例代碼：

import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter_ScreenUtil',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new MyHomePage(title: 'FlutterScreenUtil Demo'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    //設置適配尺寸 (填入設計稿中設備的屏幕尺寸) 假如設計稿是按iPhone6的尺寸設計的(iPhone6 750*1334)
    ScreenUtil.instance = ScreenUtil(width: 750, height: 1334)..init(context);
    print('設備寬度:${ScreenUtil.screenWidth}'); //Device width
    print('設備高度:${ScreenUtil.screenHeight}'); //Device height
    print('設備的像素密度:${ScreenUtil.pixelRatio}'); //Device pixel density
    print(
        '底部安全區距離:${ScreenUtil.bottomBarHeight}dp'); //Bottom safe zone distance，suitable for buttons with full screen
    print(
        '狀態欄高度:${ScreenUtil.statusBarHeight}dp'); //Status bar height , Notch will be higher Unit px

    print('實際寬度的dp與設計稿px的比例:${ScreenUtil.getInstance().scaleWidth}');
    print('實際高度的dp與設計稿px的比例:${ScreenUtil.getInstance().scaleHeight}');

    print(
        '寬度和字體相對於設計稿放大的比例:${ScreenUtil.getInstance().scaleWidth * ScreenUtil.pixelRatio}');
    print(
        '高度相對於設計稿放大的比例:${ScreenUtil.getInstance().scaleHeight * ScreenUtil.pixelRatio}');
    print('系統的字體縮放比例:${ScreenUtil.textScaleFactory}');

    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          print(
              'ScreenUtil.getInstance().width：${ScreenUtil.getInstance().width}');
          print('ScreenUtil().width：${ScreenUtil().width}');
        },
        child: Icon(Icons.accessible_forward),
      ),
      body: new Center(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            Row(
              children: <Widget>[
                Container(
                  width: ScreenUtil.getInstance().setWidth(375),
                  height: ScreenUtil.getInstance().setHeight(200),
                  color: Colors.red,
                  child: Text(
                    '我的寬度:${ScreenUtil.getInstance().setWidth(375)}dp',
                    style: TextStyle(
                      color: Colors.white,
                      fontSize: ScreenUtil.getInstance().setSp(24),
                    ),
                  ),
                ),
                Container(
                  width: ScreenUtil.getInstance().setWidth(375),
                  height: ScreenUtil.getInstance().setHeight(200),
                  color: Colors.blue,
                  child:
                      Text('我的寬度:${ScreenUtil.getInstance().setWidth(375)}dp',
                          style: TextStyle(
                            color: Colors.white,
                            fontSize: ScreenUtil.getInstance().setSp(24),
                          )),
                ),
              ],
            ),
            Text('設備寬度:${ScreenUtil.screenWidth}px'),
            Text('設備高度:${ScreenUtil.screenHeight}px'),
            Text('設備寬度:${ScreenUtil.screenWidthDp}dp'),
            Text('設備高度:${ScreenUtil.screenHeightDp}dp'),
            Text('設計稿寬度:${ScreenUtil.getInstance().width}'),
            Text('設備的像素密度:${ScreenUtil.pixelRatio}'),
            Text('底部安全區距離:${ScreenUtil.bottomBarHeight}dp'),
            Text('狀態欄高度:${ScreenUtil.statusBarHeight}dp'),
            Text(
              '實際寬度的dp與設計稿px的比例:${ScreenUtil.getInstance().scaleWidth}',
              textAlign: TextAlign.center,
            ),
            Text(
              '實際高度的dp與設計稿px的比例:${ScreenUtil.getInstance().scaleHeight}',
              textAlign: TextAlign.center,
            ),
            SizedBox(
              height: ScreenUtil.getInstance().setHeight(100),
            ),
            Text('系統的字體縮放比例:${ScreenUtil.textScaleFactory}'),
            Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Text('我的文字大小在設計稿上是24px，不會隨着系統的文字縮放比例變化',
                    style: TextStyle(
                        color: Colors.black,
                        fontSize: ScreenUtil.getInstance().setSp(24))),
                Text('我的文字大小在設計稿上是24px，會隨着系統的文字縮放比例變化',
                    style: TextStyle(
                        color: Colors.black,
                        fontSize:
                            ScreenUtil(allowFontScaling: true).setSp(24))),
              ],
            )
          ],
        ),
      ),
    );
  }
}

 

總結：這次學習了使用flutter_ScreenUtil來適配Flutter的APP應用，需要注意的是這個插件再不斷升級中，所以使用的時候要使用最新版。

github地址：https://github.com/OpenFlutter/flutter_screenutil