screen_adaptation

flutter 屏幕适配方案

手机效果手机效果

手机效果

注意事项 最好 dart sdk>=2.6 没有使用低版本测试如有问题请反馈

配置pubspec.yaml

dependencies:
  screen_adaptation: ^{latest version}

使用的时候引入

import 'package:screen_adaptation/screen_adaptation.dart';

使用方法

class MyApp extends StatelessWidget {
  // This widget is the root of your application.  
  @override
  Widget build(BuildContext context) {
    /// [OrientationBuilder] 不需要旋转屏幕方向UI可以省略 直接返回MaterialApp
    return OrientationBuilder(
        builder: (BuildContext context, Orientation orientation) => MaterialApp(
          title: 'Flutter Demo',
          theme: ThemeData(
            primarySwatch: Colors.blue,
          ),
          home: MyHomePage(),
          builder: (BuildContext context, Widget child) {
            return ScreenAdaptationInit(
                allowFontScaling: true,
                size: Size(750, 1334),
                child: child);
          },
        ));
  }
}

如果需要旋转的屏幕的时候自动刷新UI 需要在最外层增加 OrientationBuilder 不需要请忽略

参数说明

  • ScreenAdaptationInit
属性 类型 默认值 描述
size Size Size(750, 1334) 设计稿中设备的尺寸
landscapeSize Size null 横屏UI设计图尺寸 可不传 默认为 竖屏size尺寸反转 landscapeSize.widthsize.height landscapeSize.heightsize.width
allowFontScaling bool false 字体是否根据系统缩放比例变化
  • ScreenAdaptationUtil

这里使用screenAdaptationUtil 代替 ScreenAdaptationUtil.getInstance()

属性 类型 使用方式 描述
width double screenAdaptationUtil.width 设计宽度
height double screenAdaptationUtil.height 设计高度
screenWidth double screenAdaptationUtil.screenWidth 屏幕宽度
screenHeight double screenAdaptationUtil.screenHeight 屏幕高度
pixelRatio double screenAdaptationUtil.pixelRatio 屏幕密度
textScaleFactor double screenAdaptationUtil.textScaleFactor 系统字体缩放比例
statusBarHeight double screenAdaptationUtil.statusBarHeight 状态栏高度
bottomBarHeight double screenAdaptationUtil.bottomBarHeight 底部安全距离
allowFontScaling bool screenAdaptationUtil.allowFontScaling 是否允许字体根据系统缩放
setWidth Function screenAdaptationUtil.setWidth(num)或者num.w 根据宽度进行适配
setHeight Function screenAdaptationUtil.setHeight(num)或者num.h 根据高度进行适配
setSp Function screenAdaptationUtil.setSp(fontSize,allowFontScaling:true/false)或者fontSize.s fontSize.st fontSize.sf 文字适配 allowFontScaling 是否允许系统缩放
setAutomatic Function screenAdaptationUtil.setAutomatic(num)或者num.r 根据宽高比例较小的适配

例子

class DomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SingleChildScrollView(
        padding: EdgeInsets.only(
            top: ScreenAdaptationUtil.getInstance().statusBarHeight + 30.w,
            left: 30.w,
            right: 30.w,
            bottom: 30.w),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Wrap(
              spacing: 30.w,
              runSpacing: 30.w,
              children: [
                Container(
                  width: ScreenAdaptationUtil.getInstance().setWidth(100),
                  height: ScreenAdaptationUtil.getInstance().setWidth(100),
                  color: Colors.blueGrey,
                  alignment: Alignment.center,
                ),
                Container(
                  width: 100.h,
                  height: 100.w,
                  color: Colors.blueGrey,
                  alignment: Alignment.center,
                ),
                Container(
                  width: 100.w,
                  height: 100.h,
                  color: Colors.blueGrey,
                  alignment: Alignment.center,
                ),
                Container(
                  width: 100.h,
                  height: 100.h,
                  color: Colors.blueGrey,
                  alignment: Alignment.center,
                ),
                Container(
                  width: 100.r,
                  height: 100.r,
                  color: Colors.blueGrey,
                  alignment: Alignment.center,
                ),
              ],
            ),
            Container(
              child: Text('设计宽度:${ScreenAdaptationUtil.getInstance().width}'),
            ),
            Container(
              child: Text('设计高度:${ScreenAdaptationUtil.getInstance().height}'),
            ),
            Container(
              child: Text(
                  '屏幕宽度:${ScreenAdaptationUtil.getInstance().screenWidth}'),
            ),
            Container(
              child: Text(
                  '屏幕高度:${ScreenAdaptationUtil.getInstance().screenHeight}'),
            ),
            Container(
              child:
                  Text('屏幕密度:${ScreenAdaptationUtil.getInstance().pixelRatio}'),
            ),
            Container(
              child: Text(
                  '文字缩放比例:${ScreenAdaptationUtil.getInstance().textScaleFactor}'),
            ),
            Container(
              child: Text(
                  '状态栏高度:${ScreenAdaptationUtil.getInstance().statusBarHeight}'),
            ),
            Container(
              child: Text(
                  '底部安全距离:${ScreenAdaptationUtil.getInstance().bottomBarHeight}'),
            ),
            Container(
              child: Text(
                  '是否允许字体根据系统缩放变化:${ScreenAdaptationUtil.getInstance().allowFontScaling}'),
            ),
            Container(
              margin: EdgeInsets.only(top: 30.w),
              child: Text(
                '不会根据系统缩放变化的文字',
                style: TextStyle(
                    fontSize: ScreenAdaptationUtil.getInstance()
                        .setSp(60, allowFontScaling: false)),
              ),
            ),
            Container(
              margin: EdgeInsets.only(top: 30.w),
              child: Text(
                '不会根据系统缩放变化的文字',
                style: TextStyle(fontSize: 60.sf),
              ),
            ),
            Container(
              margin: EdgeInsets.symmetric(vertical: 30.w),
              child: Text(
                '因为ScreenAdaptationInit allowFontScaling默认为false 我也不会变化',
                style: TextStyle(fontSize: 60.s),
              ),
            ),
            Container(
              child: Text(
                '会根据系统缩放变化的文字 缩放了 ${ScreenAdaptationUtil.getInstance().textScaleFactor}',
                style: TextStyle(
                    color: Colors.blueGrey,
                    fontSize: ScreenAdaptationUtil.getInstance()
                        .setSp(60, allowFontScaling: true)),
              ),
            ),
            Container(
              child: Text(
                '会根据系统缩放变化的文字 缩放了 ${ScreenAdaptationUtil.getInstance().textScaleFactor}',
                style: TextStyle(color: Colors.blueGrey, fontSize: 60.st),
              ),
            ),
          ],
        ),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}