Color Picker In Flutter

Suraj Chauhan

17 May 2024

In this Blog we will learn about how to Implement Color Picker In flutter

Introduction

Color Picker in flutter is use to select any specific color into multiple color and It is also helpful to check our app theme color.

Selecting the perfect color for you app can be difficult task. but with help of color picker this is easy. There are so many different color is available and you can chose any one and It is helpful to know which one will work best with your design.

You may also check our Flutter App development services.

With the help of colorpicker we can change our app color.

Implementation

First of all we need to create a new flutter project and add the following dependency in pubspec.yaml file.

 flutter_colorpicker: ^1.0.3

1	flutter_colorpicker: ^1.0.3

flutter_colorpicker:->It’s dependency to add color selecting functionality In flutter,

add latest version in your flutter project.

After that we need to create a StatefulWidget(ColorPickerPage) and call from main.dart and Import below package.

import 'package:flutter/material.dart';
import 'package:flutter_colorpicker/flutter_colorpicker.dart';
import 'package:flutter_material_color_picker/flutter_material_color_picker.dart';

import 'package:flutter/material.dart';

import 'package:flutter_colorpicker/flutter_colorpicker.dart';

import 'package:flutter_material_color_picker/flutter_material_color_picker.dart';

After Importing library and packages, we need to add following code inside ColorPickerPage class.

class ColorPickerPage extends StatefulWidget {
  const ColorPickerPage({Key? key}) : super(key: key);

  @override
  State<ColorPickerPage> createState() => _ColorPickerPageState();
}

class _ColorPickerPageState extends State<ColorPickerPage> {

  bool lightTheme = true;
  Color currentColor = Colors.greenAccent;

  @override
  Widget build(BuildContext context) {
    final foregroundColor = useWhiteForeground(currentColor) ? Colors.white : Colors.black;
    return AnimatedTheme(
      data: lightTheme ? ThemeData.light() : ThemeData.dark(),
      child: Builder(builder: (context) {
        return Scaffold(
          floatingActionButton: FloatingActionButton.extended(
            onPressed: (){
              setState(() {
                lightTheme = !lightTheme;
              });
            },
            icon: Icon(lightTheme ? Icons.dark_mode_rounded : Icons.light_mode_rounded),
            label: Text(lightTheme ? 'Night Mode' : '  Day Mode '),
            backgroundColor: currentColor,
            foregroundColor: foregroundColor,
            elevation: 15,
          ),
          appBar: AppBar(
            title: const Text('Flutter Color Picker Example'),
            backgroundColor: currentColor,
            foregroundColor: foregroundColor,
          ),
          body:MaterialColorPicker(selectedColor: currentColor, onColorChange: changeColor),
        );
      }),
    );
  }

class ColorPickerPage extends StatefulWidget {

const ColorPickerPage({Key? key}) : super(key: key);

@override

State<ColorPickerPage> createState() => _ColorPickerPageState();

}

class _ColorPickerPageState extends State<ColorPickerPage> {

bool lightTheme = true;

Color currentColor = Colors.greenAccent;

@override

Widget build(BuildContext context) {

final foregroundColor = useWhiteForeground(currentColor) ? Colors.white : Colors.black;

return AnimatedTheme(

data: lightTheme ? ThemeData.light() : ThemeData.dark(),

child: Builder(builder: (context) {

return Scaffold(

floatingActionButton: FloatingActionButton.extended(

onPressed: (){

setState(() {

lightTheme = !lightTheme;

});

icon: Icon(lightTheme ? Icons.dark_mode_rounded : Icons.light_mode_rounded),

label: Text(lightTheme ? 'Night Mode' : ' Day Mode '),

backgroundColor: currentColor,

foregroundColor: foregroundColor,

elevation: 15,

appBar: AppBar(

title: const Text('Flutter Color Picker Example'),

backgroundColor: currentColor,

foregroundColor: foregroundColor,

body:MaterialColorPicker(selectedColor: currentColor, onColorChange: changeColor),

);

}),

);

}

After adding this code in you need to add below mention the code in your ColorPickerPage class.

That’s below mention code is useful to Change current color of your app.

OutPut:->

Conclusion

In this blog we have discussed about Color Picker In Flutter and for finding more deep knowledge about color picker you can go there.

You can also check other blogs from here for more knowledge.

I hope is helpful to understand this topic.

Thanks for reading this article.