Flutter: Circular Color Picker (Package: flutter_colorpicker)

Question

I used this flutter package to implement a color picker in my app. My Widget looks something like this:

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

This works fine and looks like this in the UI:

Now I wondered how I could implement a classical circular color picker. I did not find an example in the official documentation but there is a screenshot in the package description that shows just this:

Does anyone know how to implement this using the same package or can hint me to an example.

Answer 1

please check out this and you need to palette type as paletteType: PaletteType.hueWheel,. use the same package as used.

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

output