Flutter主题颜色调色板插件themed_color_palette的使用

Flutter主题颜色调色板插件themed_color_palette的使用

创建主题YAML文件

创建一个扩展名为.theme.dart的YAML文件。

在该文件中填充你的主题值：

.themes: # 这些是应用程序的不同主题。
  - light
  - dark
.name: themedColorPalette
.description: The Themed Color Palette
.shared: # 共享值是独立于主题的常量。
  radius:
    .description: 默认半径。
    .type: double
    .value: 4
  padding:
    .description: 默认内边距。
    .type: double
    .value: 8
.themed: # 主题值是在不同主题之间变化的值。
  primaryColor:
    .description: 主要颜色
    .type: color
    light: ff00296b
    dark: ffb1cff5
  secondaryColor:
    .description: 次要颜色
    .type: color
    light: ffd26900
    dark: ffffd270

可以在示例文件夹中找到一个示例。

YAML文件说明

每个对象具有多个属性：

• .name: 对象的名称。应为驼峰命名法： 驼峰命名法

• .description: 对象的简短描述，以便我们知道它用于什么。此描述将在代码中作为注释出现，开发人员在编码或使用时会看到。

值类型

有不同类型的值：

• int: 无小数的数字（例如：0, 1, 2, 3, 4, 5…）。
• double: 带小数的数字（例如：0.5, 1.0 …）。
• color: 应为 aarrggbb 格式。导入颜色时，可以添加 withOpacity 参数并指定一个 [0, 1] 范围内的双精度值。你还可以导入 withOpacity 参数中使用的不透明度。
• fontWeight: 不同的值为：
  • w100, thin
  • w200, extraLight
  • w300, light
  • w400, medium
  • w500, normal, regular, plain
  • w600, semiBold
  • w700, bold
  • w800, extraBold
  • w900, black
• bool: 布尔值，不同的值为：
  • true
  • false
• brightness: 亮度值为：
  • light
  • dark

.flutter: .flutter 属性用于当一个值用于设置 Flutter Material 主题时（例如：cardColor）。指定它在 Flutter Material 主题中指定的值（例如：theme.cardColor）。这将指示用户使用 Flutter Material 主题的 cardColor。

导入

只能导入先前定义的值（即在文件中更高的位置）。

在VSCode中编辑

你可以安装此VSCode扩展以提供更好的编辑体验，包括高亮和装饰。

构建配置

在你的项目根目录下创建一个 build.yaml 文件：

targets:
  $default:
    builders:
      themed_color_palette:themedColorPaletteGeneratorBuilder:
        enabled: true
        generate_for:
          - lib/*

生成代码

运行以下命令：

flutter pub run build_runner build --delete-conflicting-outputs

完整示例代码

这是一个完整的示例代码，展示了如何使用 themed_color_palette 插件来管理主题颜色。

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primaryColor: ThemedColorPalette.of(context).primaryColor,
        accentColor: ThemedColorPalette.of(context).secondaryColor,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool isDarkMode = false;

  void toggleTheme() {
    setState(() {
      isDarkMode = !isDarkMode;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Theme Demo'),
        backgroundColor: ThemedColorPalette.of(context).primaryColor,
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Container(
              width: 100,
              height: 100,
              color: ThemedColorPalette.of(context).primaryColor,
            ),
            SizedBox(height: 20),
            Container(
              width: 100,
              height: 100,
              color: ThemedColorPalette.of(context).secondaryColor,
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: toggleTheme,
              child: Text('Toggle Theme'),
            )
          ],
        ),
      ),
    );
  }
}