Flutter: Make a simple Color Picker from scratch

Last updated on March 17, 2021 A Goodman Loading... Post a comment

This article will guide you to making a color picker from scratch in Flutter without using any third-party plugins.

Introduction

Color picker is a thing that frequently appears in many kinds of apps like notes, todos, social networks, reading apps, etc. It lets the user change the background and text colors or something like that.

In general, a mobile app rarely needs a complex color picker like the ones in powerful design software like Photoshop or Procreate. Below is a color picker used in Keep (a note app from Google):

An this is some kind of color picker that you can see in Kindle (a reading app from Amazon):

There are many color picker packages out there but sometimes, none of them 100% fits your need. There are a number of reasons such as:

  • A package is too complicated to use and the document isn’t clear enough. Learning its API takes much time.
  • A package is good and has many useful features but the feature you need.
  • You play around with a package for hours and finally find out that there is no way to make it fit your app’s UI unless modifying the package’s source code.

Creating your own color picker will allow you to customize it completely. Besides, you’ll understand Flutter more deeply and will be able to create a lot of useful reusable stuff in the future and publishing your own plugins to pub.dev to help others. The trade-off, however, will be that you will find it a bit difficult and time-consuming to get started if you are new to Flutter.

Preview

The color picker we will built together has the following features:

  • You can customize the list of pickable colors. This will make the colors that are most beautiful and best suited to your app appear.
  • The selected color will have a checkmark.
  • You can select color cells in the form of rectangles or circles.

Although quite simple, it is sufficient for use in most types of mobile applications. Also it is quite flexible.

The screen capture:

Let’s Write Code

Create a reusable widget named MyColorPicker

Create a new file named my_color_picker.dart in your lib directory and add the following code:

import 'package:flutter/material.dart';

class MyColorPicker extends StatefulWidget {
  final Function onSelectColor; // This function sends the selected color to outside
  final List<Color> availableColors; // List of pickable colors
  final Color initialColor; // The default picked color
  final bool circleItem; // Determnie shapes of color cells

  MyColorPicker(
      {@required this.onSelectColor,
      @required this.availableColors,
      @required this.initialColor,
      this.circleItem = true});

  @override
  _MyColorPickerState createState() => _MyColorPickerState();
}

class _MyColorPickerState extends State<MyColorPicker> {
  // This variable used to determine where the checkmark will be
  Color _pickedColor;

  @override
  void initState() {
    _pickedColor = widget.initialColor;
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      width: double.infinity,
      height: 200,
      child: GridView.builder(
        gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
            maxCrossAxisExtent: 50,
            childAspectRatio: 1 / 1,
            crossAxisSpacing: 10,
            mainAxisSpacing: 10),
        itemCount: widget.availableColors.length,
        itemBuilder: (context, index) {
          final itemColor = widget.availableColors[index];
          return InkWell(
            onTap: () {
              widget.onSelectColor(itemColor);
              setState(() {
                _pickedColor = itemColor;
              });
            },
            child: Container(
              width: 50,
              height: 50,
              decoration: BoxDecoration(
                  color: itemColor,
                  shape: widget.circleItem == true
                      ? BoxShape.circle
                      : BoxShape.rectangle,
                  border: Border.all(width: 1, color: Colors.grey[300])),
              child: itemColor == _pickedColor
                  ? Center(
                      child: Icon(
                        Icons.check,
                        color: Colors.white,
                      ),
                    )
                  : Container(),
            ),
          );
        },
      ),
    );
  }
}

Usage

Now you can use the color picker by using the constructor shown below:

MyColorPicker({
  Function onSelectColor, 
  List<Color> availableColors, 
  Color initialColor, 
  bool circleItem = true
})

Full example

// main.dart
import 'package:flutter/material.dart';
import './my_color_picker.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // Remove the debug banner
      debugShowCheckedModeBanner: false,
      title: 'Kindacode.com',
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  Color _color = Colors.blue;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Kindacode.com'),
        backgroundColor: Colors.black,
      ),
      body: Column(
        children: [
          Container(
            width: double.infinity,
            height: 300,
            color: _color,
          ),
          SizedBox(height: 30),
          MyColorPicker(
              onSelectColor: (value) {
                setState(() {
                  _color = value;
                });
              },
              availableColors: [
                Colors.blue,
                Colors.green,
                Colors.greenAccent,
                Colors.yellow,
                Colors.orange,
                Colors.red,
                Colors.purple,
                Colors.grey,
                Colors.deepOrange,
                Colors.teal
              ],
              initialColor: Colors.blue)
        ],
      ),
    );
  }
}

This example is exactly what you see in the video above (in the preview section).

Conclusion

Congratulation! You’ve built a neat and useful color picker that you can reuse in your next projects. Furthermore, you now get a better understanding of how to write a package like other packages on pub.dev. To continue learning more interesting stuff about Flutter, you can take a look at the following articles: Flutter StreamBuilder examples, Flutter Autocomplete example, Displaying Math symbols in Flutter, 3 Ways to create Random Colors in Flutter, Flutter: Check Internet Connection without any plugins, Write a simple BMI Calculator with Flutter.

You can also check out our Flutter category page or Dart category page for the latest tutorials and examples.

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments

Related Articles