Flutter Color picker:

An HSV color picker inspired by chrome developer tools and a material color picker for your flutter app. Hue, Saturation, and Value (HSV) is a color model that is often used in place of the RGB color model in graphics and paint programs. In with this color model, a color is specified and then white or black is added easily make color adjustments.

Using Flutter Colorpicker:

To use this Colorpicker Functionality we have to add its dependency package into the pubspec.yaml file:

use below code to add dependency package in pubspec.yaml file.

 

dependencies:

flutter_colorpicker: ^0.1.0

Install Colorpicker dependency package from terminal Editor:

You can install packages from the command line with Flutter by using below command:

$ flutter packages get

Bydefault, your Flutter terminal editor might support flutter packages get.

Importing Colorpicker in flutter:

 

To use Colorpicker in Flutter Dart code we have to import into the dart code for coding. without importing Colorpicker if we use it in coding then it shows error or exception that is package not found error.

To import dependency package into dart code use below code.

import 'package:flutter_colorpicker/flutter_colorpicker.dart';

 

Below is the Example of  Flutter Colorpicker :

Create a new Flutter project and then copy and paste below code into example/lib/main.dart file:

 

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

main() => runApp(
MaterialApp(
title: 'Flutter Example',
theme: ThemeData(primaryColor: Colors.blue),
home: MyApp(),
),
);

class MyApp extends StatefulWidget {
@override
State<StatefulWidget> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
Color currentColor = Color(0xff443a49);

ValueChanged<Color> onColorChanged;

changeSimpleColor(Color color) => setState(() => currentColor = color);
changeMaterialColor(Color color) => setState(() {
currentColor = color;
Navigator.of(context).pop();
});

@override
Widget build(BuildContext context) {
return DefaultTabController(
length: 2,
child: Scaffold(
appBar: AppBar(
title: Text('Flutter Color Picker Example'),
bottom: TabBar(
tabs: <Widget>[
Tab(text: 'Simple picker'),
Tab(text: 'Material picker'),
],
),
),
body: TabBarView(
children: <Widget>[
Center(
child: RaisedButton(
elevation: 3.0,
onPressed: () {
showDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(
titlePadding: EdgeInsets.all(0.0),
contentPadding: EdgeInsets.all(0.0),
content: SingleChildScrollView(
child: ColorPicker(
pickerColor: currentColor,
onColorChanged: changeSimpleColor,
colorPickerWidth: 1000.0,
pickerAreaHeightPercent: 0.7,
enableAlpha: true,
),
),
);
},
);
},
child: Text('Change me'),
color: currentColor,
textColor: useWhiteForeground(currentColor)
? const Color(0xffffffff)
: const Color(0xff000000),
),
),
Center(
child: RaisedButton(
elevation: 3.0,
onPressed: () {
showDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(
titlePadding: EdgeInsets.all(0.0),
contentPadding: EdgeInsets.all(0.0),
content: SingleChildScrollView(
child: MaterialPicker(
pickerColor: currentColor,
onColorChanged: changeMaterialColor,
enableLabel: true,
),
),
);
},
);
},
child: Text('Change me'),
color: currentColor,
textColor: useWhiteForeground(currentColor)
? const Color(0xffffffff)
: const Color(0xff000000),
),
),
],
),
),
);
}
}