Learning Mobile Development

Creating a Beautiful Color Picker in Flutter: Step-by-Step Tutorial

Making basic component for your app

Flutter Color Picker

What is FlexColorPicker?

FlexColorPicker is a Flutter package developed by Quantum Dolphin that offers a highly customizable and feature-rich color picker widget for your Flutter applications. It is designed to provide developers with a flexible and user-friendly way to choose colors within their apps, whether you’re building a drawing app, a theme customization tool, or anything in between.

Getting Started :

Before we delve into the features and customization options provided by `flex_color_picker`, let’s start by adding the package to your Flutter project. Open your project’s `pubspec.yaml` file and add the following dependency:

dependencies:
  flex_color_picker: ^3.3.0

After adding the dependency, run `flutter pub get` to fetch the package.

Importing the Package

In your Flutter Dart code, import the FlexColorPicker package:

import 'package:flex_color_picker/flex_color_picker.dart';

Basic Usage

Using `flex_color_picker` is straightforward. To create a basic color picker dialog, follow these steps:

import 'package:flex_color_picker/flex_color_picker.dart';

Color selectedColor = Colors.blue; // Set an initial color

ColorPicker(
  color: selectedColor,
  onColorChanged: (Color color) {
    setState(() {
      selectedColor = color;
    });
  },
).showPickerDialog(
  context,
);

In the code above, we import the `flex_color_picker` package and define an initial color (`selectedColor`). We then use the `ColorPicker` widget to create a color picker dialog. The `onColorChanged` callback is invoked when the user selects a color, and we update the `selectedColor` accordingly. Finally, we display the color picker dialog using the `showPickerDialog` method.

Customization Options

`flex_color_picker` offers a wide range of customization options to adapt the color picker to your specific needs. Here are some of the key customization features:

Custom Palette Colors

You can define a custom set of palette colors for the color picker:

ColorPicker(
  color: selectedColor,
  onColorChanged: (Color color) {
    setState(() {
      selectedColor = color;
    });
  },
  paletteColors: [
    Colors.red,
    Colors.green,
    Colors.blue,
    Colors.yellow,
    Colors.purple,
  ],
).showPickerDialog(
  context,
);

Color Shades

The package provides the option to choose from different color shades, including primary, accent, and an optional custom color:

ColorPicker(
  color: selectedColor,
  onColorChanged: (Color color) {
    setState(() {
      selectedColor = color;
    });
  },
  pickersEnabledFlags: const <ColorPickerType, bool>{
    ColorPickerType.both: false,
    ColorPickerType.primary: true,
    ColorPickerType.accent: true,
    ColorPickerType.bw: false,
    ColorPickerType.custom: false,
  },
).showPickerDialog(
  context,
);

Custom Color Swatches

You can create custom color swatches and display them in the color picker:

ColorPicker(
  color: selectedColor,
  onColorChanged: (Color color) {
    setState(() {
      selectedColor = color;
    });
  },
  customColorSwatchesAndNames: {
    'Swatch 1': [Colors.teal, Colors.indigo],
    'Swatch 2': [Colors.amber, Colors.deepOrange],
  },
).showPickerDialog(
  context,
);

Custom Text and Labels

You can customize the text and labels used in the color picker dialog:

ColorPicker(
  color: selectedColor,
  onColorChanged: (Color color) {
    setState(() {
      selectedColor = color;
    });
  },
  heading: Text('Select a Color'),
  subheading: Text('Choose a color for your design'),
  actionButtons: <ColorPickerActionButtons>[
    const ColorPickerActionButtons(
      okButton: 'Select',
      cancelButton: 'Cancel',
    ),
  ],
).showPickerDialog(
  context,
);

FullCode :

GitHub - arunpradhan28/color_picker_example

Photo by Nimi Diffa on Unsplash

Features of FlexColorPicker

Before we dive into using FlexColorPicker, let’s take a look at some of its key features:

1. Customizable UI

FlexColorPicker offers a wide range of customization options, allowing you to adapt the color picker’s appearance to match your app’s design. You can change the shape, size, layout, and styling of various elements within the color picker.

2. Multiple Color Selection Modes

It supports various color selection modes, including RGB, HSV, and HEX, making it suitable for different use cases. Users can pick colors in a way that feels most intuitive to them.

3. Color Wheel

The color wheel is a core component of FlexColorPicker, making it easy to choose colors with precision. You can zoom in and out, making it ideal for both broad color selections and fine-tuning.

4. Color Palette

FlexColorPicker includes a color palette that allows you to define a set of colors for users to choose from. This is handy when you want to restrict color choices to a specific set of options.

5. Alpha (Transparency) Support

You can also adjust the transparency or alpha of color using FlexColorPicker, which is essential for applications that require semi-transparent colors.

6. Accessibility

FlexColorPicker takes accessibility seriously and ensures that users with disabilities can interact with the color picker effectively.

7. Localization

It supports localization, allowing you to provide translated strings for various languages.

Conclusion

FlexColorPicker is a valuable Flutter package for adding color selection functionality to your applications. With its versatility, accessibility, and customization options, it can enhance the user experience and provide a seamless color-picking process. Whether you’re building a creative app that relies on color choices or just need to implement a color picker for customization purposes, FlexColorPicker is a powerful tool that can simplify your development process. Start integrating it into your Flutter projects today and give your users a delightful color selection experience.

❤ ❤ Thanks for reading dis article ❤❤

If I got something wrong? Let me know in the comments. I would love to improve.