How to Make Color Picker in Flutter

In this article, we are going to show you how to make color pickers on the Flutter app. You will learn to make different kinds of color pickers such as drag and drop color picker, RGB color picker, HSV color picker, HSL color picker, block color picker along multiple-color picker. See the example below:

First, you need to add flutter_colorpicker Flutter package in your project by adding the following lines in your pubspec.yaml file:

dependencies:
  flutter:
    sdk: flutter
  flutter_colorpicker: ^1.0.3

Import package on your script:

import 'package:flutter_colorpicker/flutter_colorpicker.dart';

ColorPicker(
  pickerColor: Colors.red, //default color
  onColorChanged: (Color color){ //on color picked
      print(color);
  }, 
)

You can implement this in showDialog() method and call whenever you want to show the color picker.

The output of this color picker:

MaterialPicker(
  pickerColor: Colors.red, //default color
  onColorChanged: (Color color){ //on color picked
      print(color);
  }, 
)

The output of material color picker:

BlockPicker(
  pickerColor: Colors.red, //default color
  onColorChanged: (Color color){ //on color picked
      print(color);
  }, 
)

The output of Block Color Picker:

You can also make multiple colors picker.

MultipleChoiceBlockPicker(
  pickerColors: [Colors.red, Colors.orange], //default color
  onColorsChanged: (List<Color> colors){ //on colors picked
      print(colors);
  }, 
)

The output of multiple color picker:

See the implementation of these colors picker on Button click, where the color picker popup will appear when the user clicks the button.

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

void main(){
  runApp(MyApp());
}

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Home(),
    );
  }
}

class Home extends StatefulWidget{
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {

  Color mycolor = Colors.lightBlue;
  @override
  Widget build(BuildContext context) {
    
    return  Scaffold(
          appBar: AppBar( 
             title: Text("Flutter Color Picker"),
             backgroundColor: Colors.redAccent,
          ),
          body: Container(
             color: mycolor, //background color of app from color picker
             alignment: Alignment.center,
             padding: EdgeInsets.all(20),
             child: Column(
                 children:[
                      ElevatedButton(
                        onPressed: (){
                            showDialog(
                                context: context,
                                builder: (BuildContext context){
                                  return AlertDialog(
                                      title: Text('Pick a color!'),
                                      content: SingleChildScrollView(
                                        child: ColorPicker(
                                          pickerColor: mycolor, //default color
                                          onColorChanged: (Color color){ //on color picked
                                              setState(() {
                                                mycolor = color;
                                              });
                                          }, 
                                        ),
                                      ),
                                      actions: <Widget>[
                                        ElevatedButton(
                                          child: const Text('DONE'),
                                          onPressed: () {
                                            Navigator.of(context).pop(); //dismiss the color picker
                                          },
                                        ),
                                      ],
                                  );
                              }
                            ); 
                              
                        },
                        child: Text("Default Color Picker"),
                    ),


                    ElevatedButton(
                        onPressed: (){
                          showDialog(
                              context: context,
                              builder: (BuildContext context){
                                return AlertDialog(
                                    title: Text('Pick a color!'),
                                    content: SingleChildScrollView(
                                      child: MaterialPicker(
                                        pickerColor: mycolor, //default color
                                        onColorChanged: (Color color){ //on color picked
                                           setState(() {
                                              mycolor = color;
                                           });
                                        }, 
                                      ),
                                    ),
                                    actions: <Widget>[
                                      ElevatedButton(
                                        child: const Text('DONE'),
                                        onPressed: () {
                                          Navigator.of(context).pop(); //dismiss the color picker
                                        },
                                      ),
                                    ],
                                );
                            }
                          ); 
                              
                        },
                        child: Text("Material Color Picker"),
                    ),


                    ElevatedButton(
                        onPressed: (){
                          showDialog(
                              context: context,
                              builder: (BuildContext context){
                                return AlertDialog(
                                    title: Text('Pick a color!'),
                                    content: SingleChildScrollView(
                                      child: BlockPicker(
                                        pickerColor: mycolor, //default color
                                        onColorChanged: (Color color){ //on color picked
                                           setState(() {
                                              mycolor = color;
                                           });
                                        }, 
                                      ),
                                    ),
                                    actions: <Widget>[
                                      ElevatedButton(
                                        child: const Text('DONE'),
                                        onPressed: () {
                                          Navigator.of(context).pop(); //dismiss the color picker
                                        },
                                      ),
                                    ],
                                );
                            }
                          ); 
                              
                        },
                        child: Text("Block Color Picker"),
                    ),


                    ElevatedButton(
                        onPressed: (){
                          showDialog(
                              context: context,
                              builder: (BuildContext context){
                                return AlertDialog(
                                    title: Text('Pick a color!'),
                                    content: SingleChildScrollView(
                                      child: MultipleChoiceBlockPicker(
                                        pickerColors: [Colors.red, Colors.orange], //default color
                                        onColorsChanged: (List<Color> colors){ //on colors picked
                                           print(colors);
                                        }, 
                                      ),
                                    ),
                                    actions: <Widget>[
                                      ElevatedButton(
                                        child: const Text('DONE'),
                                        onPressed: () {
                                          Navigator.of(context).pop(); //dismiss the color picker
                                        },
                                      ),
                                    ],
                                );
                            }
                          ); 
                              
                        },
                        child: Text("Multiple Choice Color Picker"),
                    ),

                    
                 ]
             )
          )
       );
  }
}

In this example, we have made to show different kinds of color picker, and when user picks the color, the background of app will change to the picked color: