基于单一基础色生成并展示全量颜色变体的Flutter实现咨询

要实现基础色的颜色变体展示，核心思路是通过**调整颜色的亮度（Luminance）**生成深浅不同的变体，再用网格布局将这些变体可视化。以下是完整的实现代码：

import 'package:flutter/material.dart';

class ColorVariant extends StatefulWidget {
  final Color baseColor;
  const ColorVariant({Key? key, required this.baseColor}) : super(key: key);

  @override
  State<ColorVariant> createState() => _ColorVariantState();
}

class _ColorVariantState extends State<ColorVariant> {
  // 存储生成的颜色变体列表
  late List<Color> colorVariants;

  @override
  void initState() {
    super.initState();
    // 初始化时生成颜色变体
    colorVariants = _generateColorVariants(widget.baseColor);
  }

  // 根据基础色生成颜色变体：调整亮度从暗到亮生成12个等级
  List<Color> _generateColorVariants(Color baseColor) {
    final hslColor = HSLColor.fromColor(baseColor);
    const variantCount = 12;
    final variants = <Color>[];

    // 亮度范围从0.1（暗）到0.9（亮），均分12份
    for (int i = 0; i < variantCount; i++) {
      final brightness = 0.1 + (i * (0.8 / (variantCount - 1)));
      final variantHsl = hslColor.withLightness(brightness.clamp(0.0, 1.0));
      variants.add(variantHsl.toColor());
    }

    return variants;
  }

  // 将Color转为十六进制字符串
  String _colorToHex(Color color) {
    return '#${color.value.toRadixString(16).padLeft(8, '0').substring(2)}'.toUpperCase();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('颜色变体展示'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        // 用GridView展示颜色变体，每行4个
        child: GridView.builder(
          shrinkWrap: true,
          gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 4,
            crossAxisSpacing: 12,
            mainAxisSpacing: 12,
          ),
          itemCount: colorVariants.length,
          itemBuilder: (context, index) {
            final color = colorVariants[index];
            return Column(
              children: [
                // 颜色块
                Expanded(
                  child: Container(
                    decoration: BoxDecoration(
                      color: color,
                      borderRadius: BorderRadius.circular(8),
                      boxShadow: [
                        BoxShadow(
                          color: Colors.black.withOpacity(0.1),
                          blurRadius: 4,
                          offset: const Offset(0, 2),
                        )
                      ],
                    ),
                  ),
                ),
                const SizedBox(height: 8),
                // 显示颜色十六进制值
                Text(
                  _colorToHex(color),
                  style: const TextStyle(fontSize: 12, fontWeight: FontWeight.w500),
                ),
              ],
            );
          },
        ),
      ),
    );
  }
}

关键实现说明 #

1. 颜色变体生成：

   • 将基础色转换为HSLColor，HSL色彩模式更直观地调整亮度（Lightness）参数
   • 通过循环生成不同亮度的颜色，亮度范围从0.1到0.9（避免纯黑或纯白的极端情况），生成12个渐变变体

2. 布局展示：

   • 使用GridView.builder实现网格布局，每行显示4个颜色变体
   • 每个颜色项包含颜色块和对应的十六进制颜色值，方便用户识别

3. 辅助工具方法：

   • _colorToHex方法将Flutter的Color对象转换为常用的十六进制字符串格式

你可以根据需求调整变体数量、亮度范围或者布局样式（比如每行显示数量、颜色块大小等），来匹配你需要的展示效果。

内容的提问来源于stack exchange，提问作者Lakshmanan Kumar