flutter如何实现颜色选择器

在Flutter中如何实现一个颜色选择器？希望能支持用户从调色板选取颜色或输入RGB/HEX值，最好能提供代码示例或推荐好用的第三方插件。

2 回复

Flutter中实现颜色选择器可使用第三方库，如flutter_colorpicker。安装后，通过ColorPicker组件即可快速集成，支持多种颜色选择模式，如调色板、滑块等。

更多关于flutter如何实现颜色选择器的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中实现颜色选择器有多种方式，以下是几种常用方法：

1. 使用第三方库（推荐）

flutter_colorpicker

dependencies:
  flutter_colorpicker: ^1.0.3

import 'package:flutter_colorpicker/flutter_colorpicker.dart';

Color pickerColor = Color(0xff443a49);
Color currentColor = Color(0xff443a49);

void changeColor(Color color) {
  setState(() => pickerColor = color);
}

// 显示颜色选择器
showDialog(
  context: context,
  builder: (BuildContext context) {
    return AlertDialog(
      title: Text('选择颜色'),
      content: SingleChildScrollView(
        child: ColorPicker(
          pickerColor: pickerColor,
          onColorChanged: changeColor,
          showLabel: true,
          pickerAreaHeightPercent: 0.8,
        ),
      ),
      actions: <Widget>[
        TextButton(
          child: Text('确定'),
          onPressed: () {
            setState(() => currentColor = pickerColor);
            Navigator.of(context).pop();
          },
        ),
      ],
    );
  },
);

2. 使用Flutter内置组件

简单颜色选择

List<Color> colors = [
  Colors.red, Colors.green, Colors.blue,
  Colors.yellow, Colors.orange, Colors.purple
];

Widget buildColorPicker() {
  return Wrap(
    spacing: 8,
    runSpacing: 8,
    children: colors.map((color) {
      return GestureDetector(
        onTap: () => setState(() => selectedColor = color),
        child: Container(
          width: 40,
          height: 40,
          decoration: BoxDecoration(
            color: color,
            borderRadius: BorderRadius.circular(20),
            border: selectedColor == color 
              ? Border.all(color: Colors.black, width: 3)
              : null,
          ),
        ),
      );
    }).toList(),
  );
}

3. 自定义HSV颜色选择器

double hue = 0.0;
double saturation = 1.0;
double value = 1.0;

Widget buildHSVColorPicker() {
  return Column(
    children: [
      // 色相选择
      Slider(
        value: hue,
        min: 0,
        max: 360,
        onChanged: (val) => setState(() => hue = val),
      ),
      // 饱和度选择
      Slider(
        value: saturation,
        min: 0,
        max: 1,
        onChanged: (val) => setState(() => saturation = val),
      ),
      // 亮度选择
      Slider(
        value: value,
        min: 0,
        max: 1,
        onChanged: (val) => setState(() => value = val),
      ),
      // 预览
      Container(
        width: 100,
        height: 100,
        decoration: BoxDecoration(
          color: HSVColor.fromAHSV(1.0, hue, saturation, value).toColor(),
          borderRadius: BorderRadius.circular(10),
        ),
      ),
    ],
  );
}

推荐方案

对于大多数应用场景，推荐使用 flutter_colorpicker 库，它提供了：

  • 多种选择器类型（色块、滑块、调色板）
  • HSV、RGB颜色模式
  • 透明度支持
  • 良好的用户体验

这种方法实现简单且功能完整，能满足大部分颜色选择需求。

回到顶部