How To Make Color Picker In Flutter | In Just 3 Crazy Steps in 2023

This tutorial sheds light on how to make a color picker in flutter in just 3 steps!

Using the flutter_colorpicker library, we can easily implement a color-picking system if the app needs one. Because it is simple to customize, it saves time and improves user experience. Using the flutter_colorpicker library, we will build color pickers in this article. For better comprehension, follow along.

People, who read this article also read: Flutter SDK Installation on Windows, macOS, Linux

To set up the package

First, we must include flutter_colorpicker in the pubspec.yaml file before we can use this library. Select one of the two techniques listed below to add it to the file.

In the terminal of a functioning IDE, type the following command:

flutter pub add flutter_colorpicker

Or simply include it in the dependencies section. Next, go to the pub.

Color picker in Flutter- Dependencies
Dependencies

Importing a package

Following that, we must import the library in the manner described below:

import 'package:flutter_colorpicker/flutter_colorpicker.dart';

Implementation of color picker in Flutter

We create the variables currentColor and ListColor> currentColors in the Color class. In addition, we’re developing two features:

  1. Changes a color by taking color as a parameter.
  2. Changes the colors in a list using the parameter changeColors(ListColor>).

When the changeColor() or changeColors() functions are used, the currentColor variable’s value and the currentColors list, respectively, are modified.

BlockPicker

PickerColor (Color) and onColorChanged (Function) are the two features needed by the BlockPicker() widget. However, in this case, we are only using these two properties to create a basic color picker. When a color is chosen to use the BlockPicker() widget, the pickerColor value is assigned to the appBar background color because the appBar background color has been set to be the currentColor.

class _MyAppState extends State<MyApp> {
Color currentColor = Colors.amber;
List<Color> currentColors = [Colors.yellow, Colors.green];

void changeColor(Color color) => setState(() => currentColor = color);

@override
Widget build(BuildContext context) {
	return MaterialApp(
		debugShowCheckedModeBanner: false,
		home: Scaffold(
		appBar: AppBar(
			title: const Text('FlutterService'),
			backgroundColor: currentColor,
			centerTitle: true,
		),
		body: Container(
			height: MediaQuery.of(context).size.height,
			width: MediaQuery.of(context).size.width,
			child: Expanded(
			child: BlockPicker(
					pickerColor: currentColor, onColorChanged: changeColor),
				),
		),
		));
}
}

Output:

BlockPicker
BlockPicker

If we want to alter the structure of the color picker, we can also alter the layout. For instance, ListView.builder() is used in the code below to display colors in the list structure.

BlockPicker(
			pickerColor: currentColor,
			onColorChanged: changeColor,
			layoutBuilder: (context, colors, child) {
			return ListView.builder(
				itemCount: colors.length,
				itemBuilder: (context, idx) {
					return GestureDetector(
					onTap: () {
						changeColor(colors[idx]);
					},
					child: Container(
						height: 30, width: 10, color: colors[idx]),
					);
				});
			},
		),

Output:

ListView
ListView

Material Picker

PickerColor (Color) and onColorChanged (Function) are additional properties needed by the MaterialPicker() widget. The function changeColor and changeColors remain the same.

class _MyAppState extends State<MyApp> {
Color currentColor = Colors.amber;
List<Color> currentColors = [Colors.yellow, Colors.green];

void changeColor(Color color) => setState(() => currentColor = color);
	
@override
Widget build(BuildContext context) {
	return MaterialApp(
		debugShowCheckedModeBanner: false,
		home: Scaffold(
		appBar: AppBar(
			title: const Text('FlutterService'),
			backgroundColor: currentColor,
			centerTitle: true,
		),
		body: Container(
			height: 600,
			child: Expanded(
			child: MaterialPicker(
					pickerColor: currentColor, onColorChanged: changeColor)
			),
		),
		));
}
}

Output:

MaterialPicker
MaterialPicker

MultipleChoiceBlockPicker

Using the MultipleChoiceBlockPicker() widget, we could select multiple colors simultaneously.  

MultipleChoiceBlockPicker(
				pickerColors: currentColors,
				onColorsChanged: changeColors
			),

Detailed Source Code

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> {
Color currentColor = Colors.green;
List<Color> currentColors = [Colors.yellow, Colors.red];

void changeColor(Color color) => setState(() => currentColor = color);
void changeColors(List<Color> colors) =>
	setState(() => currentColors = colors);

@override
Widget build(BuildContext context) {
	return MaterialApp(
		debugShowCheckedModeBanner: false,
		home: Scaffold(
		appBar: AppBar(
			title: const Text('FlutterService'),
			backgroundColor: currentColor,
			centerTitle: true,
		),
		body: SingleChildScrollView(
			child: Container(
			height: 1000,
			child: Column(
				children: [
				Text("Block Picker"),
				Expanded(
					child: BlockPicker(
						pickerColor: currentColor, onColorChanged: changeColor),
				),
				SizedBox(height: 10),
				Text("Material Picker"),
				Expanded(
					child: MaterialPicker(
						pickerColor: currentColor, onColorChanged: changeColor),
				),
				SizedBox(height: 10),
				Text("MaterialChoiceBlockPicker"),
				Expanded(
					child: MultipleChoiceBlockPicker(
					pickerColors: currentColors,
					onColorsChanged: changeColors,
					),
				),
				],
			),
			),
		),
		));
}
}

Conclusion

People, who read this article also read: Flutter Liquid Swipe Animation

Because of its efficiency and simplicity, the color picker in Flutter is one of the most used components, especially in mobile applications. In this tutorial, we created a straightforward color picker in Flutter using the built-in widget of the color picker in Flutter. I sincerely hope you liked this tutorial!

Related articles

Top 5 Business Listing App Template

The Top 5 Business App Template is made for...

Things To Remember For A Flutter Developer Resume | Mind-blowing

This article will enlighten you about how to write...

How to Change the Text Color in Flutter | Change Color of Text in 2023

In this article, we will explore how to change...

Top 5 Best Listing Mobile Directory Apps & Templates in 2023

What are the best Listing Mobile Directory Apps &...

How to Use Path Provide Flutter with Read Write Example in 2023

Path Provider Flutter is a Flutter package for finding...

Case Studies

Case Study: English Booster App

Flutter Service, your go-to for cutting-edge mobile applications, has once again stepped up to the challenge with the English Booster App. Our skilled team...
eDental App

Case Study: eDental Dentist App

Our team recently embarked on an exciting project to develop the eDental Dentist App, a cutting-edge mobile application designed for both Android and iOS...

App Competitor Analysis & Factors

EEE Engineers apps approached us to conduct a thorough competitor analysis, aiming to enhance their app's ranking. By utilizing our expertise, we meticulously audited...