Flutter屏幕适配插件screen_adaptation的使用

Flutter屏幕适配插件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 {
  [@override](/user/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.width]为[size.height] [landscapeSize.height]为[size.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](/user/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),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

完整示例Demo

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    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(
                    size: Size(750, 1334), child: child);
              },
            ));
  }
}

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    final bool _isPortrait = ScreenAdaptationUtil.getInstance().orientation == Orientation.portrait;
    return Scaffold(
      appBar: AppBar(
        title: Text('screen_adaptation'),
        actions: [
          TextButton(
              onPressed: () => Navigator.push(
                  context,
                  MaterialPageRoute(
                      builder: (BuildContext context) => DomePage())),
              child: Text(
                'dome',
                style: TextStyle(fontSize: 48.s, color: Colors.white),
              ))
        ],
      ),
      body: SingleChildScrollView(
        child: Column(
          children: [
            Padding(
              padding: EdgeInsets.all(30.w),
              child: Text(
                '旋转屏幕后UI会自动进行适配',
                style: TextStyle(fontSize: 48.s),
              ),
            ),
            Container(
              width: _isPortrait ? 750.w : 1334.w,
              height: 100.w,
              color: Colors.blueGrey,
              alignment: Alignment.center,
              child: Text(
                '宽度100%',
                style: TextStyle(color: Colors.white, fontSize: 35.s),
              ),
            ),
            Container(
              margin: EdgeInsets.only(top: 30.w),
              width: _isPortrait ? 345.w : 667.w,
              height: _isPortrait ? 667.h : 345.w,
              color: Colors.blueGrey,
              alignment: Alignment.center,
              child: Text(
                '宽度50% 高度50%',
                style: TextStyle(color: Colors.white, fontSize: 35.s),
              ),
            ),
          ],
        ),
      ),
      bottomNavigationBar: TextButton(
        onPressed: () => Navigator.maybePop(context),
        child: Container(
          height: 100.w,
          alignment: Alignment.center,
          color: Colors.blue,
          child: Text(
            '返回',
            style: TextStyle(color: Colors.white, fontSize: 40.s),
          ),
        ),
      ),
    );
  }
}

class DomePage extends StatelessWidget {
  [@override](/user/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),
              ),
            ),
          ],
        ),
      ),
      bottomNavigationBar: TextButton(
        onPressed: () => Navigator.maybePop(context),
        child: Container(
          height: 100.w,
          alignment: Alignment.center,
          color: Colors.blue,
          child: Text(
            '返回',
            style: TextStyle(color: Colors.white, fontSize: 40.s),
          ),
        ),
      ),
    );
  }
}

更多关于Flutter屏幕适配插件screen_adaptation的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter屏幕适配插件screen_adaptation的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是如何在Flutter项目中使用screen_adaptation插件来进行屏幕适配的示例代码。这个插件可以帮助你简化在不同屏幕尺寸和分辨率上的适配工作。

首先，你需要在你的pubspec.yaml文件中添加screen_adaptation依赖：

dependencies:
  flutter:
    sdk: flutter
  screen_adaptation: ^x.y.z  # 请将 x.y.z 替换为最新的版本号

然后，运行flutter pub get来获取依赖。

接下来，你可以在你的Flutter应用中使用ScreenAdaptation来进行屏幕适配。以下是一个完整的示例：

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

void main() {
  // 初始化ScreenAdaptation
  ScreenAdaptation.init(
    designWidth: 375, // 设计稿宽度
    designHeight: 667, // 设计稿高度
  );

  runApp(MyApp());
}

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

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 使用ScreenAdaptation提供的适配方法
    double screenWidth = ScreenAdaptation.screenWidth;
    double screenHeight = ScreenAdaptation.screenHeight;
    double statusBarHeight = ScreenAdaptation.statusBarHeight;
    double navBarHeight = ScreenAdaptation.navBarHeight;

    return Scaffold(
      appBar: AppBar(
        title: Text('Screen Adaptation Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Screen Width: ${screenWidth.toStringAsFixed(1)} px',
              style: TextStyle(fontSize: ScreenAdaptation.setSp(16)), // 使用适配后的字体大小
            ),
            SizedBox(height: ScreenAdaptation.setHeight(20)), // 使用适配后的高度
            Text(
              'Screen Height: ${screenHeight.toStringAsFixed(1)} px',
              style: TextStyle(fontSize: ScreenAdaptation.setSp(16)),
            ),
            SizedBox(height: ScreenAdaptation.setHeight(20)),
            Text(
              'Status Bar Height: ${statusBarHeight.toStringAsFixed(1)} px',
              style: TextStyle(fontSize: ScreenAdaptation.setSp(16)),
            ),
            SizedBox(height: ScreenAdaptation.setHeight(20)),
            Text(
              'Navigation Bar Height: ${navBarHeight.toStringAsFixed(1)} px',
              style: TextStyle(fontSize: ScreenAdaptation.setSp(16)),
            ),
          ],
        ),
      ),
    );
  }
}

在这个示例中：

  1. 在main函数中，我们通过ScreenAdaptation.init方法初始化了插件，并设置了设计稿的宽度和高度。
  2. 在MyHomePage中，我们使用ScreenAdaptation.screenWidth和ScreenAdaptation.screenHeight获取了当前屏幕的宽度和高度。
  3. 使用ScreenAdaptation.setSp(double value)方法将设计稿中的sp值转换为当前屏幕的适配sp值。
  4. 使用ScreenAdaptation.setHeight(double value)方法将设计稿中的高度值转换为当前屏幕的适配高度值。

通过这些方法，你可以很方便地在Flutter应用中实现屏幕适配。注意，screen_adaptation插件的具体方法和API可能会随着版本更新而变化，请参考最新的官方文档以获取最新信息。

回到顶部