如何在Flutter中不使用任何包构建滑块式颜色选择器？

核心逻辑 #

颜色选择滑块的本质是基于渐变背景的位置插值计算颜色：通过拖动滑块在渐变条上的位置，将位置比例映射为对应的颜色值，用HSL颜色模型能轻松实现彩虹色的平滑过渡（色相从0°到360°正好覆盖所有彩虹色）。

分步实现 #

• 1. 绘制渐变背景条
  用Container配合LinearGradient绘制彩虹渐变的滑块轨道，色标包含红、橙、黄、绿、蓝、靛、紫（回到红色形成闭环），保证颜色过渡自然。

• 2. 添加可拖动滑块
  用Stack将渐变条和滑块组件叠加，通过Positioned控制滑块位置；借助GestureDetector的onPanUpdate监听拖动事件，实时更新滑块的相对位置（限制在0-1之间）。

• 3. 位置转颜色计算
  将滑块的相对位置（0-1）映射为HSL颜色的色相值（0-360°），固定饱和度和亮度（比如饱和度1.0、亮度0.5），再将HSL颜色转为RGB颜色，得到当前选中的颜色。

• 4. 响应颜色变化
  通过回调函数将选中的颜色传递给父组件，同时同步滑块的背景色为当前选中颜色，直观反馈选择结果。

完整代码示例 #

import 'package:flutter/material.dart';

class CustomColorSlider extends StatefulWidget {
  final ValueChanged<Color> onColorChanged;
  const CustomColorSlider({super.key, required this.onColorChanged});

  @override
  State<CustomColorSlider> createState() => _CustomColorSliderState();
}

class _CustomColorSliderState extends State<CustomColorSlider> {
  double _sliderPosition = 0.0; // 滑块相对位置，范围0-1
  Color _selectedColor = Colors.red;

  @override
  Widget build(BuildContext context) {
    final trackWidth = MediaQuery.of(context).size.width - 40; // 轨道宽度（左右留20边距）

    return SizedBox(
      height: 60,
      child: Stack(
        alignment: Alignment.centerLeft,
        children: [
          // 渐变轨道
          Container(
            margin: const EdgeInsets.symmetric(horizontal: 20),
            height: 8,
            width: trackWidth,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(4),
              gradient: const LinearGradient(
                colors: [
                  Colors.red,
                  Colors.orange,
                  Colors.yellow,
                  Colors.green,
                  Colors.blue,
                  Colors.indigo,
                  Colors.purple,
                  Colors.red,
                ],
              ),
            ),
          ),
          // 可拖动滑块
          Positioned(
            left: 20 + _sliderPosition * trackWidth,
            child: GestureDetector(
              onPanUpdate: (details) {
                setState(() {
                  // 计算并限制滑块位置在0-1之间
                  _sliderPosition = (details.localPosition.dx + 20) / trackWidth;
                  _sliderPosition = _sliderPosition.clamp(0.0, 1.0);
                  // 位置转HSL颜色，再转RGB
                  final hslColor = HSLColor.fromAHSL(1.0, _sliderPosition * 360, 1.0, 0.5);
                  _selectedColor = hslColor.toColor();
                  // 回调通知父组件颜色变化
                  widget.onColorChanged(_selectedColor);
                });
              },
              child: Container(
                width: 32,
                height: 32,
                decoration: BoxDecoration(
                  color: _selectedColor,
                  shape: BoxShape.circle,
                  border: Border.all(color: Colors.white, width: 2),
                  boxShadow: [
                    BoxShadow(
                      color: Colors.black.withOpacity(0.2),
                      blurRadius: 4,
                      offset: const Offset(0, 2),
                    ),
                  ],
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

// 使用示例
class ColorPickerDemo extends StatelessWidget {
  const ColorPickerDemo({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("自定义颜色滑块")),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            CustomColorSlider(
              onColorChanged: (color) {
                print("选中颜色: $color");
              },
            ),
            const SizedBox(height: 40),
            // 实时预览选中颜色
            Builder(
              builder: (context) {
                return Container(
                  width: 100,
                  height: 100,
                  decoration: BoxDecoration(
                    color: (context.findAncestorStateOfType<_CustomColorSliderState>()?._selectedColor) ?? Colors.red,
                    borderRadius: BorderRadius.circular(8),
                  ),
                );
              },
            ),
          ],
        ),
      ),
    );
  }
}

优化扩展点 #

• 给渐变轨道添加GestureDetector，支持点击轨道直接跳转滑块位置
• 允许自定义渐变色标、滑块大小/样式
• 添加亮度/饱和度调节的辅助滑块，实现完整的颜色选择器

内容的提问来源于stack exchange，提问作者Sumit Banwakade