Flutter颜色管理插件eo_color的使用

概述

EO-Color 是一个优雅、面向对象的 Material Design 颜色调色板和色调实现，以及颜色框架。它旨在作为 Flutter 内置颜色的替代品，并作为一个更具体颜色包的基础框架。

主要特点：

• 提高源代码的可读性和可维护性。
• 使用形容词（如 ultra, very, bit, light, dark 等）代替晦涩的数字索引（100, 200…800, 900）来选择颜色的阴影。

例如，获取灰色的主要色调只需声明 Grey()，而更亮或更暗的灰色可以通过 Grey.bitLighter()、Grey.lighter()、Grey.veryDark() 等方法获取。

开始使用

像其他面向对象的包一样，eo_color 使用接口来定义颜色调色板、颜色色调和颜色渐变的概念。因此，主要接口有 Palette、Swatch 和 Gradient。

Palette 接口

Palette 接口代表可以从其中选择颜色的颜色调色板。通常，Palette 的子类提供命名构造函数来选择所需的颜色，稍后通过 color 属性检索。

例如：

/// 构建一个蓝色容器。
@override
Widget build(BuildContext context) {
  return Container(color: const Blue().color);
}

所有 Material Design 颜色及其相应的强调色都已实现。更多颜色信息请参阅 color-palettes-library。

数字索引 vs 命名构造函数

下表显示了 Material Design 索引（100, 200…800, 900）与颜色类的命名构造函数之间的关系：

Swatch 接口

Swatch 接口表示相关颜色的集合，如灰色阴影、品牌的颜色渐变或用户的首选颜色。其唯一属性 colors 可以一次检索多个颜色，返回一个 Iterable<Color> 对象。

除了 White 和 Black 类外，每个颜色类都有一个对应的“复数”类实现 Swatch 接口。例如，Greys().colors 可以检索 10 种灰色阴影。

示例代码：

import 'package:eo_color/swatches.dart';
import 'package:flutter/material.dart';

/// 矩形填充由 swatch 实例提供的颜色渐变。
class RectGradient extends StatelessWidget {
  /// 使用给定的颜色调色板填充矩形。
  const RectGradient(Swatch swatch, {Key? key})
      : _swatch = swatch,
        super(key: key);

  /// 使用十种灰色阴影填充矩形。
  const RectGradient.grey({Key? key}) : this(const Greys(), key: key);

  // Material Design 颜色调色板。
  final Swatch _swatch;

  @override
  Widget build(BuildContext context) {
    return Container(
      height: kToolbarHeight / 2,
      decoration: BoxDecoration(
        gradient: LinearGradient(
          end: Alignment.bottomLeft,
          begin: Alignment.topRight,
          colors: _swatch.colors.toList(growable: false),
        ),
      ),
    );
  }
}

Gradient 接口

Gradient 接口表示位置相关的颜色范围，通常用于填充区域。Gradient 子类返回 List<Colors>，这使得它们更适合处理 Flutter 的渐变 API。

示例代码：

import 'package:eo_color/gradients.dart';
import 'package:flutter/material.dart';

/// 使用 Material Design 颜色渐变填充矩形。
class RectGradient extends StatelessWidget {
  /// 使用给定的渐变颜色填充矩形。
  const RectGradient(Gradient gradient, {Key? key})
      : _gradient = gradient,
        super(key: key);

  /// 使用红色渐变填充矩形。
  const RectGradient.reds({Key? key}) : this(const RedsGrad(), key: key);

  // Material Design 渐变颜色。
  final Gradient _gradient;

  @override
  Widget build(BuildContext context) {
    return Container(
      height: kToolbarHeight / 2,
      decoration: BoxDecoration(
        gradient: LinearGradient(
          end: Alignment.bottomLeft,
          begin: Alignment.topRight,
          colors: _gradient.colors,
        ),
      ),
    );
  }
}

完整示例 Demo

以下是一个完整的示例应用，展示了如何使用 eo_color 插件来展示三种颜色调色板：BlueGrey、Grey 和 Brown。

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

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

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'EO Color Showcase',
      home: Showcase(title: 'Material Design Color Palettes'),
    );
  }
}

/// 展示颜色调色板的小部件。
class Showcase extends StatelessWidget {
  const Showcase({required this.title});

  final String title;

  static const barBg = Grey.veryLight();
  static const barText = Grey.dark();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        elevation: 0.0,
        backgroundColor: barBg.color,
        title: Text(
          title,
          style: TextStyle(color: barText.color, fontWeight: FontWeight.bold),
        ),
      ),
      body: const SingleChildScrollView(
        padding: EdgeInsets.all(16),
        child: Center(
          child: Wrap(
            children: [
              SwatchWidget.blueGreys(),
              SwatchWidget.greys(),
              SwatchWidget.browns(),
            ],
          ),
        ),
      ),
    );
  }
}

/// 显示颜色调色板的小部件。
class SwatchWidget extends StatelessWidget {
  const SwatchWidget(
    this.swatch,
    String title, {
    super.key,
  }) : title = '$title 50';

  /// 棕色调色板。
  const SwatchWidget.browns({Key? key})
      : this(const Browns(), 'Brown', key: key);

  /// 蓝灰色调色板。
  const SwatchWidget.blueGreys({Key? key})
      : this(const BlueGreys(), 'Blue-Grey', key: key);

  /// 灰色调色板。
  const SwatchWidget.greys({Key? key})
      : this(const Greys(), 'Grey', key: key);

  final Swatch swatch;
  final String title;

  @override
  Widget build(BuildContext context) {
    final colors = swatch.colors.toList(growable: false);
    final labels = [
      title,
      ...const ['100', '200', '300', '400', '500', '600', '700', '800', '900'],
    ];
    return SizedBox(
      width: 250,
      child: Card(
        elevation: 2.0,
        child: Column(
          children: List<ColorTile>.generate(
            colors.length,
            (int i) => ColorTile(
              label: labels[i],
              bgColor: colors[i],
            ),
            growable: false,
          ),
        ),
      ),
    );
  }
}

class ColorTile extends StatelessWidget {
  const ColorTile({
    required this.bgColor,
    required this.label,
    super.key,
  });

  final Color bgColor;
  final String label;

  @override
  Widget build(BuildContext context) {
    final style = TextStyle(color: Colors.white, fontWeight: FontWeight.w500);
    return ListTile(
      tileColor: bgColor,
      leading: Text(label, style: style),
      trailing: Text(
        '#${bgColor.value.toRadixString(16).substring(2).toUpperCase()}',
        style: style,
      ),
    );
  }
}

这个示例应用展示了如何使用 eo_color 插件创建具有不同颜色调色板的 UI 元素。你可以根据需要修改和扩展此示例。