一. 引入包:

https://pub.dev/packages/flutter_screenutil

flutter_screenutil: ^1.1.0

二. 在要用的地方引入:

import 'package:flutter_screenutil/flutter_screenutil.dart';

三. 基本使用:

1. 我们要在使用之前初始化默认设计版面

现在一般是iPhone6(750*1334)

初始化完成后,现在我们相当于把屏幕宽度分为了750份,把屏幕高度分为了1334份, 今后相对宽度用300.w表示, 相对高度用700.h表示.

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter_ScreenUtil',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    //设计稿默认按照iPhone6 ​​750*1334
    ScreenUtil.init(context,
        width: 750,
        height: 1334,
        allowFontScaling: false //设置字体大小是否根据系统的“字体大小”辅助选项来进行缩放
        );

    return MyWidget01();
  }
}

class MyWidget01 extends StatefulWidget {
  @override
  _MyWidget01State createState() => _MyWidget01State();
}

class _MyWidget01State extends State<MyWidget01> {
  double _sliderW = 0;
  double _sliderH = 0;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Stack(
      children: <Widget>[
        Column(
          children: <Widget>[
            Container(
              width: _sliderW * 750.w,//把屏幕宽度分为750份,它占多少份
              height: _sliderH * 1334.h,//把屏幕高度分为1334份,它占多少份
              color: Colors.amber,
            ),
          ],
        ),
        Column(
          children: <Widget>[
            Text("调整宽度:(0~750)"),
            Slider(
                value: _sliderW,
                onChanged: (v) {
                  setState(() {
                    _sliderW = v;
                  });
                }),
            Container(
              height: 1150.h,//把屏幕高度分为1334份,它占多少份
              child: Row(
                children: <Widget>[
                  RotatedBox(
                    quarterTurns: 45,
                    child: Slider(
                        label: "haha",
                        value: _sliderH,
                        onChanged: (v) {
                          setState(() {
                            _sliderH = v;
                          });
                        }),
                  ),
                  RotatedBox(
                    quarterTurns: 45,
                    child: Text("调整高度:(0~1334)"),
                  ),
                ],
              ),
            )
          ],
        )
      ],
    ));
  }
}

除了200.w、300.h这样的表达方式，也可以使用

ScreenUtil().setWidth(750); //相当于750.w
ScreenUtil().setHeight(1334); //相当于1334.w

四、适配字体

//传入字体大小，默认不根据系统的“字体大小”辅助选项来进行缩放(可在初始化ScreenUtil时设置allowFontScaling)
ScreenUtil().setSp(28)
或
28.sp (dart sdk>=2.6)
 
//传入字体大小，根据系统的“字体大小”辅助选项来进行缩放(如果某个地方不遵循全局的allowFontScaling设置)       
ScreenUtil().setSp(24, allowFontScalingSelf: true)
或
24.ssp (dart sdk>=2.6)


//for example:

Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Text('我的文字大小在设计稿上是24px，不会随着系统的文字缩放比例变化',
                    style: TextStyle(
                      color: Colors.black,
                      fontSize: ScreenUtil().setSp(24),
                    )),
                Text('我的文字大小在设计稿上是24px，会随着系统的文字缩放比例变化',
                    style: TextStyle(
                        color: Colors.black,
                        fontSize: ScreenUtil()
                            .setSp(24, allowFontScalingSelf: true))),
              ],
            )

五、获取关于屏幕适配相关的参数

  void printScreenInformation() {
    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().scaleWidth}');
    print('实际高度的dp与设计稿px的比例:${ScreenUtil().scaleHeight}');

    print(
        '宽度和字体相对于设计稿放大的比例:${ScreenUtil().scaleWidth * ScreenUtil.pixelRatio}');
    print('高度相对于设计稿放大的比例:${ScreenUtil().scaleHeight * ScreenUtil.pixelRatio}');
    print('系统的字体缩放比例:${ScreenUtil.textScaleFactor}');
  }
}