Flutter流体界面设计插件fluid_ui_design的使用

Fluid UI Design 是一个基于 Utopia 原则实现流体设计的包（Utopia 官网）。与传统的响应式设计不同，Fluid UI Design 根据事先定义的缩放比例和屏幕大小来计算尺寸值。在使用此包之前，建议先阅读 Utopia 的文章以更好地理解这种设计理念。

请注意，这只是一个 0.0.1 版本的框架，因此可能存在一些错误，并且不是所有的功能都已经实现。如果你发现任何错误或有功能请求，请在 GitHub 上创建一个 issue。

开始使用

要使所有 Fluid 类在布局中可用，你需要提供一个配置对象作为主题扩展到你的主题中。这将使所有 Fluid 类在主题中可用。

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  
  [@override](/user/override)
  Widget build(BuildContext context) {
    FluidConfig config = FluidConfig.fromContext(context);

    return MaterialApp(
      theme: ThemeData(
        extensions: <ThemeExtension<dynamic>>[
          config,
        ],
      ),
      home: const MyHomePage(),
    );
  }
}

这将加载带有预定义比例尺和断点的应用。要自定义比例尺和断点，可以在 FluidWrapper 中传递它们。

FluidConfig config = FluidConfig.fromContext(context,
  spaceConfig: SpaceConfig(
    baseMin: 4,
    baseMax: 8,
    xxxsModifier: 0.25,
    xxsModifier: 0.5,
    xsModifier: 0.75,
    sModifier: 1,
    mModifier: 1.5,
    lModifier: 2,
    xlModifier: 3,
    xxlModifier: 4,
    xxxlModifier: 6,
  ),
  typeConfig: TypeConfig(
    minBaseFontSize: 16,
    maxBaseFontSize: 20,
    minTypeScaleModifier: 1.2,
    maxTypeScaleModifier: 1.5,
  ),
  viewportConfig: ViewportConfig(
    minViewportSize: 320,
    maxViewportSize: 1200,
  )
);

return MaterialApp(
  theme: ThemeData(
    extensions: <ThemeExtension<dynamic>>[
      config,
    ],
  ),
  home: const MyHomePage(),
);

Fluid 类

Fluid Config

如果你需要在代码中访问配置，可以使用 FluidConfig 类。这个类是一个配置对象的包装器，并提供了一些辅助方法来获取当前视口大小和当前缩放比例。 我们在主题中保存了这个配置文件，所以你可以从主题中访问它。使用以下代码可以从我们之前创建的主题中检索配置：

FluidConfig config = FluidConfig.of(context);

或者使用 BuildContext 上的扩展方法：

FluidConfig config = context.fluid;

FluidSize

FluidSize 是一个确定大小的基本类。它可以用来根据当前屏幕大小与 FluidWrapper 设置的最小和最大值来获取线性值。

FluidSize(fluidConfig: context.fluid, min: 100, max: 200);

当在最小屏幕尺寸/断点时，它会返回 100。当在最大屏幕尺寸/断点时，它会返回 200。当在中间某个屏幕尺寸/断点时，它会返回介于两者之间的值。

FluidSpace

FluidSpace 是基于设置中的修改比例尺的一个层。设计师可以在设计中创建一个 FluidSpace 缩放比例，通过这些修改比例尺，你可以得到一个逻辑上可使用的布局尺寸。FluidSpaces 类用于预设比例尺。

要获取特定的 FluidSpace，可以使用以下代码：

SizedBox(height: FluidSpaces(context.fluid).m.value);

更简洁的方法是使用 BuildContext 上的扩展方法。这个扩展方法在包中可用。

SizedBox(height: context.fluid.spaces.m);

FluidSpacePair

有时你希望根据屏幕大小让 FluidSpace 更多或更少地增长。在大屏幕上，你可能希望顶部有更多的空间。这可以通过 FluidSpacePair 来实现。这个类接受两个 FluidSpaces 并在小屏幕上返回第一个，在大屏幕上返回第二个。当屏幕大小介于两者之间时，它会返回一个介于两者之间的值。

FluidSpacePair(
  fluidConfig: context.fluid,
  small: FluidSpaces(context.fluid).m,
  large: FluidSpaces(context.fluid).xl,
);

FluidType // FluidFontSize

FluidType 用于创建一个逻辑类型比例尺。对于排版，你希望根据屏幕大小有不同的字体大小。使用 FluidType 还可以根据屏幕大小在视口中缩放比例尺。这意味着在大屏幕上字体大小的变化比在小屏幕上更大。这基于 Utopia 原则。通常，我们使用一个从 -10 到 10 的比例尺，其中 0 是基准字体大小。这个比例尺可以在设置中更改。要获取特定比例尺的值，可以使用以下代码：

FluidType(fluidConfig: context.fluid, scaleStep: 2).value;

更简洁的方法是使用 BuildContext 上的扩展方法。这个扩展方法在包中可用。

context.fluid.typeSize(2);

或者

context.fluid.fontSize(2);

文本缩放助手

为了简化使用文本比例尺，我们提供了 TextScaleHelper。这个助手是为与 Google Fonts 结合使用而构建的，但也可以用于任何字体。以下是如何使用 Google Fonts 的示例：

config.fromGoogleFont(GoogleFonts.firaSans).bold.displayLarge;

这将返回一个具有粗体字体、正确缩放大小并且基于 Google 字体 Fira Sans 的 TextStyle。

如果你想用另一个字体实现这个缩放助手，你需要自己创建一个 TextScaleHelper 对象，并提供一个回调函数，该函数使用正确的参数构建字体。

TextScaleHelper(
  this,
  ({
    required FontWeight fontWeight,
    required double fontSize,
    required Color color
  }) {
    return TextStyle(
      fontWeight: fontWeight,
      fontSize: fontSize,
      color: color,
      // 添加定义所需字体设置的参数
    );
  },
);

示例代码

以下是完整的示例代码，展示了如何使用 fluid_ui_design 包。

import 'package:fluid_ui_design/fluid_ui_design.dart';
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';

import 'playground_page.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  
  [@override](/user/override)
  Widget build(BuildContext context) {
    FluidConfig config = FluidConfig.fromContext(context,
      spaceConfig: const SpaceConfig(),
      typeConfig: const TypeConfig(minBaseFontSize: 10, maxBaseFontSize: 12),
      viewportConfig: const ViewportConfig()
    );

    return MaterialApp(
      theme: ThemeData(
        useMaterial3: true,
        primaryColor: const Color(0xffe65728),
        textTheme: TextTheme(
          displayLarge: config.fromGoogleFont(GoogleFonts.firaSans).bold.displayLarge,
          displayMedium: config.fromGoogleFont(GoogleFonts.firaSans).bold.displayMedium,
          displaySmall: config.fromGoogleFont(GoogleFonts.firaSans).displaySmall,
          headlineLarge: config.fromGoogleFont(GoogleFonts.firaSans).bold.headlineLarge,
          headlineMedium: config.fromGoogleFont(GoogleFonts.firaSans).headlineMedium,
          headlineSmall: config.fromGoogleFont(GoogleFonts.firaSans).headlineSmall,
          bodyLarge: config.fromGoogleFont(GoogleFonts.firaSans).bodyLarge,
          bodyMedium: config.fromGoogleFont(GoogleFonts.firaSans).bodyMedium,
          bodySmall: config.fromGoogleFont(GoogleFonts.firaSans).bodySmall,
        ),
        extensions: <ThemeExtension<dynamic>>[
          config,
        ],
      ),
      home: const MyHomePage(),
    );
  }
}

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

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return const PlaygroundPage();
  }
}