Flutter颜色处理插件colorify的使用

colorify 是一个非常简单的 Flutter 包，可以将任意的 dynamic 输入确定性地转换为 Color。这个包主要用于个人项目中，避免在各个项目中重复造轮子。

使用方法

基本示例

import 'package:colorify/colorify.dart' as c;
import 'package:flutter/material.dart';

void main() {
  final input = 'example-seed';
  final color = c.colorify(input);
  print(color); // 输出从 'example-seed' 确定性生成的颜色对象。
}

自定义颜色类型

你可以通过使用 ColorType 枚举来自定义生成的颜色类型：

• ColorType.all: 从全光谱生成颜色。
• ColorType.brights: 生成明亮且鲜艳的颜色。

示例代码：

import 'package:colorify/colorify.dart' as c;
import 'package:flutter/material.dart';

void main() {
  final input = 'example-seed';

  // 从全光谱生成颜色
  final allColors = c.colorify(input, colorType: c.ColorType.all);

  // 生成明亮的颜色
  final brightColor = c.colorify(input, colorType: c.ColorType.brights);
}

完整示例

以下是一个完整的示例代码，展示了如何在 Flutter 应用程序中使用 colorify 插件。

import 'package:flutter/material.dart';
import 'package:uuid/uuid.dart';
import 'package:colorify/colorify.dart';

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Colorify Example',
      debugShowCheckedModeBanner: false,
      home: ColorifyDemo(),
    );
  }
}

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

  [@override](/user/override)
  ColorifyDemoState createState() => ColorifyDemoState();
}

class ColorifyDemoState extends State<ColorifyDemo> {
  final Uuid _uuid = const Uuid();

  /// 存储一组随机生成的种子（UUID）。
  late List<String> _seeds;

  [@override](/user/override)
  void initState() {
    super.initState();
    _generateSeeds();
  }

  /// 生成 8 个新的 UUID 字符串并更新状态。
  void _generateSeeds() {
    setState(() {
      _seeds = List.generate(8, (_) => _uuid.v4());
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
          title: const Text(
        '随机种子 -> 确定性颜色',
        style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
      )),
      body: IntrinsicHeight(
        child: Row(
          mainAxisSize: MainAxisSize.max,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Expanded(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.start,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  const SizedBox(
                    height: 100,
                    child: Text(
                      '所有颜色 (无限制范围)',
                      style:
                          TextStyle(fontSize: 14, fontWeight: FontWeight.bold),
                      textAlign: TextAlign.center,
                    ),
                  ),
                  ..._seeds.map(
                    (seed) {
                      return Text(
                        seed,
                        style: TextStyle(
                          fontSize: 18,
                          color: colorify(
                            seed,
                            colorType: ColorType.all,
                          ),
                        ),
                      );
                    },
                  ),
                ],
              ),
            ),
            Expanded(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.start,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  const SizedBox(
                    height: 100,
                    child: Text(
                      '仅亮色 (无灰、黑、白等)',
                      style:
                          TextStyle(fontSize: 14, fontWeight: FontWeight.bold),
                      textAlign: TextAlign.center,
                    ),
                  ),
                  ..._seeds.map(
                    (seed) {
                      return Text(
                        seed,
                        style: TextStyle(
                          fontSize: 18,
                          color: colorify(
                            seed,
                            colorType: ColorType.brights,
                          ),
                        ),
                      );
                    },
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _generateSeeds,
        child: const Text(
          '洗牌',
          style: TextStyle(fontSize: 12),
          textAlign: TextAlign.center,
        ),
      ),
    );
  }
}