Flutter：圆形颜色选择器（包：flutter_colorpicker）

Posted 2023-02-23

【中文标题】Flutter：圆形颜色选择器（包：flutter_colorpicker）

【英文标题】：Flutter: Circular Color Picker (Package: flutter_colorpicker)

【发布时间】：2022-01-21 06:06:53

【问题描述】：

我使用thisflutter 包在我的应用程序中实现了一个颜色选择器。我的Widget 看起来像这样：

     ColorPicker(
              pickerColor: model.color,
              onColorChanged: (color) 
               ...
              ,
              showLabel: false,
              pickerAreaHeightPercent: 0.4,
            )

这很好用，在 UI 中看起来像这样：

现在我想知道如何实现经典的圆形颜色选择器。我在官方文档中没有找到示例，但包描述中有一个屏幕截图显示如下：

有谁知道如何使用相同的包来实现这一点，或者可以提示我一个例子。

【参考方案1】：

请查看此内容，您需要将调色板类型设置为paletteType: PaletteType.hueWheel,。使用与使用相同的包。

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


void main() => runApp(const MaterialApp(home: MyApp()));

class MyApp extends StatefulWidget 
  const MyApp(Key key) : super(key: key);

  @override
  State<StatefulWidget> createState() => _MyAppState();


class _MyAppState extends State<MyApp> 
  bool lightTheme = true;
  Color currentColor = Colors.amber;
  List<Color> currentColors = [Colors.yellow, Colors.green];
  List<Color> colorHistory = [];

  void changeColor(Color color) => setState(() => currentColor = color);
  void changeColors(List<Color> colors) => setState(() => currentColors = colors);

  @override
  Widget build(BuildContext context) 
    final foregroundColor = useWhiteForeground(currentColor) ? Colors.white : Colors.black;
    return AnimatedTheme(
      data: lightTheme ? ThemeData.light() : ThemeData.dark(),
      child: Builder(builder: (context) 
        return Scaffold(
          appBar: AppBar(
            title: const Text('Flutter Color Picker Example'),
            backgroundColor: currentColor,
            foregroundColor: foregroundColor,

          ),
          body: Container(
            child: InkWell(
              onTap: ()
                showColorPicker();
              ,
              child: Center(child: Text("Color Picker")),
            ),
          ),
        );
      ),
    );
  

  void showColorPicker() 
    showDialog(context: context, builder: (BuildContext context)
      return AlertDialog(
        title: Text("Pick a color"),
        content: SingleChildScrollView(
          child: ColorPicker(
            pickerColor: Color(0xff443a49),
            paletteType: PaletteType.hueWheel,
          ),
      ),
      );
    );
  

输出

【讨论】：

原来我还需要更新我的包版本。谢谢。