Flutter：圆形拾色器（包：flutter_colorpicker）

Question

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

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

这很好用，在 UI:

中看起来像这样

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

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

Answer 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,
          ),
      ),
      );
    });
  }
}

输出

Flutter：圆形拾色器（包：flutter_colorpicker）

Flutter: Circular Color Picker (Package: flutter_colorpicker)

mobile

android

color-picker

dart

flutter