Flutter颜色管理插件radix_colors的使用

Flutter颜色管理插件radix_colors的使用

1. 插件简介

radix_colors 是一个用于Flutter的颜色系统插件，提供了一套精心设计的颜色方案，适用于创建美观且易于访问的应用程序和网站。该插件提供了15种颜色调色板，每个调色板包含12个不同的色调步骤（shades），旨在满足各种UI设计需求。

2. 安装

首先，在 pubspec.yaml 文件中添加 radix_colors 依赖：

dependencies:
  radix_colors: ^1.0.3

然后，在Dart文件中导入插件：

import 'package:radix_colors/radix_colors.dart';

3. 使用方法

3.1 轻量级颜色变体

使用轻量级颜色变体时，可以直接访问颜色属性：

RadixColors.amber;

3.2 深色模式颜色变体

对于深色模式，可以使用 dark 属性来获取相应的颜色：

RadixColors.dark.amber;

3.3 动态颜色（自动适应浅色/深色主题）

为了实现根据当前主题自动切换颜色，可以使用 RadixColorsDynamic 类：

RadixColorsDynamic(context).amber;

3.4 12个色调步骤

每个颜色调色板都提供了12个不同的色调步骤，可以根据具体的设计需求选择合适的步骤：

RadixColors.amber.step1;
RadixColors.amber.step2;
// ...
RadixColors.amber.step12;

4. 色调步骤的具体用途

5. 示例代码

以下是一个完整的示例代码，展示了如何在Flutter应用中使用 radix_colors 插件。该示例包括了一个简单的UI界面，允许用户在浅色和深色模式之间切换，并展示了不同颜色调色板的各个色调步骤。

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

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

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

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  Brightness brightness = Brightness.light;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Radix Colors Demo',
      theme: ThemeData(
        brightness: brightness,
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        backgroundColor: RadixColorsDynamic(context).gray.step1,
        appBar: AppBar(
          elevation: 0,
          backgroundColor: RadixColorsDynamic(context).gray.step1,
          foregroundColor: RadixColorsDynamic(context).gray.step12,
          systemOverlayStyle: SystemUiOverlayStyle.dark,
          title: const Text(
            'Flutter Radix Colors',
            style: TextStyle(fontSize: 16),
          ),
          leading: IconButton(
            onPressed: () {
              setState(() {
                brightness = brightness == Brightness.dark ? Brightness.light : Brightness.dark;
              });
            },
            icon: Icon(
              brightness == Brightness.dark ? Icons.sunny : Icons.nightlight_outlined,
            ),
          ),
        ),
        body: SingleChildScrollView(
          padding: const EdgeInsets.symmetric(vertical: 50, horizontal: 14),
          child: ConstrainedBox(
            constraints: const BoxConstraints(maxWidth: 840),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                // 标题
                Text(
                  "A gorgeous, accessible color system",
                  textAlign: TextAlign.center,
                  style: TextStyle(
                    fontSize: 28,
                    letterSpacing: -1,
                    fontWeight: FontWeight.w600,
                    color: RadixColorsDynamic(context).gray.step12,
                  ),
                ),
                const SizedBox(height: 12),
                Text(
                  "An open-source color system for designing beautiful, accessible websites and apps.",
                  textAlign: TextAlign.center,
                  style: TextStyle(
                    fontSize: 16,
                    fontWeight: FontWeight.w300,
                    color: RadixColorsDynamic(context).gray.step11,
                  ),
                ),
                const SizedBox(height: 40),

                // 按钮
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    OutlinedButton(
                      onPressed: () {},
                      child: const Text("API Documentation"),
                    ),
                    const SizedBox(width: 16),
                    OutlinedButton(
                      onPressed: () {},
                      child: const Text("Radix Documentation"),
                    ),
                  ],
                ),
                const SizedBox(height: 80),

                // 显示颜色调色板
                ...colorMap().map((color) {
                  return Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text(
                        color.name,
                        style: const TextStyle(
                          fontSize: 18,
                          fontWeight: FontWeight.w600,
                        ),
                      ),
                      const SizedBox(height: 16),
                      colorSteps(),
                      colorBlock(color.name.toLowerCase(), color.primary),
                      colorBlock("${color.name.toLowerCase()}A", color.accent),
                      colorBlock("${color.name.toLowerCase()}Dark", color.primaryDark),
                      colorBlock("${color.name.toLowerCase()}DarkA", color.accentDark, bg: color.primaryDark.step1),
                      const SizedBox(height: 56),
                    ],
                  );
                }).toList(),
              ],
            ),
          ),
        ),
      ),
    );
  }

  Widget colorBlock(String name, RadixColor color, {Color? bg}) {
    return SizedBox(
      height: 36,
      child: Row(
        children: [
          Container(
            width: 100,
            alignment: Alignment.centerLeft,
            child: Text(
              name,
              style: TextStyle(
                fontSize: 12,
                fontWeight: FontWeight.w300,
                color: RadixColors.gray.step10,
              ),
            ),
          ),
          ...List.generate(12, (index) {
            return colorBox(color.step(index + 1), bg);
          }),
        ],
      ),
    );
  }

  Widget colorBox(Color color, Color? bg) {
    return Expanded(
      child: Container(
        color: bg,
        margin: const EdgeInsets.only(right: 2, bottom: 2),
        child: Container(
          color: color,
          width: double.infinity,
          height: double.infinity,
        ),
      ),
    );
  }

  Widget colorSteps() {
    return Row(
      children: [
        const SizedBox(width: 70),
        ...List.generate(12, (index) {
          return Expanded(
            child: Container(
              alignment: Alignment.center,
              padding: const EdgeInsets.only(bottom: 4),
              child: Text(
                "${index + 1}",
                style: const TextStyle(
                  fontSize: 12,
                  fontWeight: FontWeight.w300,
                  color: RadixColors.gray,
                ),
              ),
            ),
          );
        }),
      ],
    );
  }
}

List<_ColorsDemo> colorMap() {
  return [
    _ColorsDemo(name: "Tomato", primary: RadixColors.tomato, accent: RadixColors.tomatoA, primaryDark: RadixColors.dark.tomato, accentDark: RadixColors.dark.tomatoA),
    _ColorsDemo(name: "Red", primary: RadixColors.red, accent: RadixColors.redA, primaryDark: RadixColors.dark.red, accentDark: RadixColors.dark.redA),
    // 其他颜色调色板...
  ];
}

class _ColorsDemo {
  final String name;
  final RadixColor primary;
  final RadixColor accent;
  final RadixColor primaryDark;
  final RadixColor accentDark;

  _ColorsDemo({
    required this.name,
    required this.primary,
    required this.accent,
    required this.primaryDark,
    required this.accentDark,
  });
}