Flutter应用缩放插件scaled_app的使用

简介

scaled_app 插件用于按比例缩放整个UI设计，包括按钮、图像、字体等所有小部件。通过该插件可以确保在不同设备上UI的一致性，使得250x250的方形元素能够根据屏幕宽度自动调整为占屏幕宽度的三分之二。

未缩放前

缩放后

当我们将上述截图调整为相同的宽度时，可以看到所有元素都保持一致的比例：

实际演示

你可以访问 Live Demo 查看实际效果。

功能特性

• 适用于固定宽度的UI设计。
• 可以对整个UI进行缩放，而不仅仅是部分组件。

使用方法

替换 runApp 为 runAppScaled

这是最简单的方式，只需将 main.dart 中的 runApp 更改为 runAppScaled 并提供一个计算缩放因子的回调函数即可。

void main() {
  runAppScaled(const MyApp(), scaleFactor: (deviceSize) {
    // 设计稿中使用的屏幕宽度
    const double widthOfDesign = 375;
    return deviceSize.width / widthOfDesign;
  });
}

替换 WidgetsFlutterBinding 为 ScaledWidgetsFlutterBinding

如果你需要更灵活地控制初始化过程，可以选择这种方式：

void main() {
  ScaledWidgetsFlutterBinding.ensureInitialized(
    scaleFactor: (deviceSize) {
      // 设计稿中使用的屏幕宽度
      const double widthOfDesign = 375;
      return deviceSize.width / widthOfDesign;
    },
  );
  runApp(const MyApp());
}

使用 MediaQueryData.scale

接下来，在你的页面或路由中，可以通过 MediaQueryData.scale 来缩放尺寸、视图内边距、视图填充等属性。

class PageRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MediaQuery(
      data: MediaQuery.of(context).scale(),
      child: const Scaffold(...),
    );
  }
}

示例代码

以下是一个完整的示例，展示了如何结合以上步骤创建一个支持缩放的应用程序：

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

double scaleFactorCallback(Size deviceSize) {
  // 设计稿中使用的屏幕宽度
  const double widthOfDesign = 375;
  return deviceSize.width / widthOfDesign;
}

void main() {
  // 方法1：使用runAppScaled
  runAppScaled(const MyApp(), scaleFactor: scaleFactorCallback);

  // 方法2：使用ScaledWidgetsFlutterBinding（注释掉）
  /*
  ScaledWidgetsFlutterBinding.ensureInitialized(
    scaleFactor: scaleFactorCallback,
  );
  runApp(const MyApp());
  */
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Scaled app demo",
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        useMaterial3: true,
        primarySwatch: Colors.purple,
        fontFamily: "Roboto",
        textTheme: const TextTheme(bodyMedium: TextStyle(fontSize: 16)),
        appBarTheme: const AppBarTheme(centerTitle: false),
      ),
      home: const HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  int currentPageIndex = 0;
  bool scaleMediaQueryData = true;

  @override
  Widget build(BuildContext context) {
    final originalMediaQueryData = MediaQuery.of(context).copyWith(
      textScaler: TextScaler.noScaling,
    );
    final scaledMediaQueryData = originalMediaQueryData.scale();

    return MediaQuery(
      data: scaleMediaQueryData ? scaledMediaQueryData : originalMediaQueryData,
      child: Scaffold(
        bottomNavigationBar: NavigationBar(
          onDestinationSelected: (int index) {
            setState(() {
              currentPageIndex = index;
            });
          },
          selectedIndex: currentPageIndex,
          destinations: const <Widget>[
            NavigationDestination(
              icon: Icon(Icons.toggle_on_outlined),
              label: 'Enable / disable',
            ),
            NavigationDestination(
              icon: Icon(Icons.keyboard_capslock),
              label: 'MediaQueryData',
            ),
          ],
        ),
        body: <Widget>[
          ScaledAppDemo(mediaQueryData: originalMediaQueryData),
          ScaledMediaQueryDataDemo(
            scaleMediaQueryData: scaleMediaQueryData,
            mediaQueryData: scaleMediaQueryData
                ? scaledMediaQueryData
                : originalMediaQueryData,
            onToggleScaleMediaQueryData: (value) {
              setState(() {
                scaleMediaQueryData = value;
              });
            },
          ),
        ][currentPageIndex],
      ),
    );
  }
}

通过以上步骤和示例代码，您可以轻松地将 scaled_app 集成到您的Flutter项目中，从而实现更加灵活且响应式的用户界面设计。