androidflutterdartmobilecolor-picker

Flutter: Circular Color Picker (Package: flutter_colorpicker)


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:

color picker

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:

circular color picker

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

    enter image description here