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
属性类型默认值描述
sizeSizeSize(750, 1334)设计稿中设备的尺寸
landscapeSizeSizenull横屏UI设计图尺寸 可不传 默认为 竖屏size尺寸反转 landscapeSize.widthsize.height landscapeSize.heightsize.width
allowFontScalingboolfalse字体是否根据系统缩放比例变化
  • ScreenAdaptationUtil

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

属性类型使用方式描述
widthdoublescreenAdaptationUtil.width设计宽度
heightdoublescreenAdaptationUtil.height设计高度
screenWidthdoublescreenAdaptationUtil.screenWidth屏幕宽度
screenHeightdoublescreenAdaptationUtil.screenHeight屏幕高度
pixelRatiodoublescreenAdaptationUtil.pixelRatio屏幕密度
textScaleFactordoublescreenAdaptationUtil.textScaleFactor系统字体缩放比例
statusBarHeightdoublescreenAdaptationUtil.statusBarHeight状态栏高度
bottomBarHeightdoublescreenAdaptationUtil.bottomBarHeight底部安全距离
allowFontScalingboolscreenAdaptationUtil.allowFontScaling是否允许字体根据系统缩放
setWidthFunctionscreenAdaptationUtil.setWidth(num)或者num.w根据宽度进行适配
setHeightFunctionscreenAdaptationUtil.setHeight(num)或者num.h根据高度进行适配
setSpFunctionscreenAdaptationUtil.setSp(fontSize,allowFontScaling:true/false)或者fontSize.s fontSize.st fontSize.sf文字适配 allowFontScaling 是否允许系统缩放
setAutomaticFunctionscreenAdaptationUtil.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.
    );
  }
}

Libraries

screen_adaptation
screen_adaptation_init
screen_adaptation_provider
screen_adaptation_util
util_extension