Flutter Color Picker

A color picker is a graphical user interface (GUI) widget or online tool used to select and adjust colors. It's commonly found in graphic design software, image editing applications, web development tools, and even operating systems.

In this tutorial, we will learn 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.

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';

How to show Drag and Drop Color Picker:

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.

Output:

How to show Material Color Picker:

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

Output:

How to show Block Color Picker:

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

Output:

How to make multiple Colors Picker:

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

Output:

In this way, you can make a beautiful color picker in Flutter app.

#flutter