Flutter自适应材质设计插件adaptive_material的使用

Flutter自适应材质设计插件adaptive_material的使用

简介

再也不用手动定义文本或图标的颜色了！

Adaptive Material 是一个替代 Material 和材料小部件套件（如 Scaffold、AppBar 等）的解决方案。它使用 ColorScheme 和继承小部件来自动设置前景元素（如 Text、Icon 等）的颜色，使其与背景颜色相匹配。

入门

在你通常使用 Material 或 Scaffold 等地方，改用相应的 Adaptive* 小部件。AdaptiveMaterial 系统将使用 DefaultTextStyle 和 IconTheme 来根据 colorScheme 设置所有子小部件的正确前景元素颜色。

class MyWidget extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return AdaptiveMaterial.surface(
      child: Text(
        '这段文字会绘制在 `ColorScheme.surface` 上，并且会自动使用 `ColorScheme.onSurface` 作为其文本颜色。',
      ),
    );
  }
}

对于更详细的使用方法，请参见包含的完整示例。

完整示例

以下是一个完整的示例，展示了如何使用 adaptive_material 插件。

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSwatch(
          primarySwatch: Colors.blue,
        ).copyWith(
          secondary: Colors.green,
          // 我们需要手动设置 `onBackground`，因为 `fromSwatch` 默认值对比度太低。Flutter 请修复。
          onBackground: Colors.black,
          // 覆盖 `onSurface` 仅为了展示更多样式的文本颜色。
          onSurface: Colors.indigo.shade800,
        ),
      ),
      home: const MyHomePage(title: 'Adaptive Material Demo'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return AdaptiveScaffold(
      backgroundMaterial: _getMaterial(
        initialMaterial: AdaptiveMaterialType.primary,
      ),
      appBar: AdaptiveAppBar(
        material: _getMaterial(initialMaterial: AdaptiveMaterialType.secondary),
        leading: const Icon(Icons.color_lens),
        title: Text(widget.title),
      ),
      // 使用构建器以确保我们获取到 `BuildContext` 在 `AdaptiveScaffold` 下面。
      body: Builder(builder: (context) {
        // 我们可以直接获取包含的材料类型。
        final AdaptiveMaterialType material = AdaptiveMaterial.of(context)!;
        return Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            Text(
              '背景颜色：\n${material.toString().split('.').last}',
              style: Theme.of(context).textTheme.headline4!.copyWith(
                    // 我们可以获取当前上下文的 `onColor`。
                    color: AdaptiveMaterial.onColorOf(context),
                  ),
              textAlign: TextAlign.center,
            ),
            const Text(
              '观察所有文本和图标更新以反映它们绘制在其上的颜色。',
              textAlign: TextAlign.center,
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: const [
                Icon(Icons.add),
                Icon(Icons.access_time),
                Icon(Icons.play_circle),
              ],
            ),
            const Text(
              '\n\n当我们使用 `AdaptiveMaterial.<material>` 小部件时，它们之下的子小部件会自动使用适当的 `on<material>` 颜色：',
              textAlign: TextAlign.center,
            ),
            const AdaptiveMaterial.primary(
              child: Text(
                '这段文字是 `onPrimary` 的颜色。',
                textAlign: TextAlign.center,
              ),
            ),
            const AdaptiveMaterial.secondary(
              child: Text(
                '这段文字是 `onSecondary` 的颜色。',
                textAlign: TextAlign.center,
              ),
            ),
            const AdaptiveMaterial.error(
              child: Text(
                '这段文字是 `onError` 的颜色。',
                textAlign: TextAlign.center,
              ),
            ),
            const AdaptiveMaterial.background(
              child: Text(
                '这段文字是 `onBackground` 的颜色。',
                textAlign: TextAlign.center,
              ),
            ),
            const AdaptiveMaterial.surface(
              child: Text(
                '这段文字是 `onSurface` 的颜色。',
                textAlign: TextAlign.center,
              ),
            ),
          ],
        );
      }),
      floatingActionButton: AdaptiveFloatingActionButton(
        material: _getMaterial(initialMaterial: AdaptiveMaterialType.error),
        onPressed: _incrementCounter,
        tooltip: '增加',
        child: const Icon(Icons.navigate_next),
      ),
    );
  }

  AdaptiveMaterialType _getMaterial({
    required AdaptiveMaterialType initialMaterial,
  }) {
    const List<AdaptiveMaterialType> values = AdaptiveMaterialType.values;
    return values[(values.indexOf(initialMaterial) + _counter) % values.length];
  }
}