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.

Solution

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

Comments

[Josip Domazet]

Turns out I also needed to update my package version. Thank you.