Open In App

Flutter – Color Picker Application

Improve
Improve
Like Article
Like
Save
Share
Report

If the app involves a color picking system, we can do it effortlessly in Flutter using the flutter_colorpicker library. It is easy to customize which saves time and enhances the user experience. In this article, we will be creating color pickers using the flutter_colorpicker library. Follow along for a better understanding.

Install the package:

To use this library, we first need to add it in pubspec.yaml file. Choose either of the below methods to add it to the file.

Type the below command in the terminal of working IDE:

flutter pub add flutter_colorpicker

Or just add it under the dependencies section. Then run pub get.

Importing package:

After this, we need to import the library in the following manner:

Dart




import 'package:flutter_colorpicker/flutter_colorpicker.dart';


Implementation:

We create a Color variable currentColor and List<Color> currentColors. We are also creating two functions :

  1. changeColor(Color) – Takes color as parameter.
  2. changeColors(List<Color>) – Takes list of colors as parameter.

When changeColor() function is invoked, the value of currentColor is changed and when changeColors is invoked, the list currentColors is changed.

BlockPicker:

BlockPicker() widget requires two features –  pickerColor (Color) and onColorChanged (Function). We can customize it but here we are creating a simple color picker using only these two properties. Since we have set the appBar background color as currentColor, whenever we select any color using BlockPicker() widget, the pickerColor value gets assigned to appBar background color.

Dart




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('GeeksForGeeks'),
            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:

We can also change the layout of the color picker if we want to change its structure. For example, in the below code, we are using ListView.builder() to show colors in the list structure.

Dart




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:

Material Picker:

MaterialPicker() widget also requires two properties – pickerColor (Color) and onColorChanged (Function). The function changeColor and changeColors remains same.

Dart




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('GeeksForGeeks'),
            backgroundColor: currentColor,
            centerTitle: true,
          ),
          body: Container(
            height: 600,
            child: Expanded(
              child: MaterialPicker(
                      pickerColor: currentColor, onColorChanged: changeColor)
               ),
          ),
        ));
  }
}


Output:

MultipleChoiceBlockPicker:

If we want to choose multiple colors at a time, this could be done using MultipleChoiceBlockPicker() widget.  

Dart




MultipleChoiceBlockPicker(
                pickerColors: currentColors,
                onColorsChanged: changeColors
              ),


Output:

Full Source Code:

Dart




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('GeeksForGeeks'),
            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,
                    ),
                  ),
                ],
              ),
            ),
          ),
        ));
  }
}


Output:



Last Updated : 31 Jan, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads