May

Flutter ColorPicker Example

Flutter ColorPicker Example:

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.

Implementing Flutter Color Picker Functionality:

Add the dependency package:

adding the dependency package to pubspec.yaml file. use the below code to add dependency package. After adding the dependency package run the get package method to import all the required files to the app.

dependencies:
flutter_colorpicker: ^0.2.4

Install the package:

You can install the package from the command line using the below code with Flutter as shown.

$ flutter packages get

Importing the Package:

After, Adding the dependency package to the pubspec.yaml file, you can now import the package into the dart code by using the below code. without adding the dependency package to the pubspec.yaml file if you import it will show package not found an error.

import 'package:flutter_colorpicker/flutter_colorpicker.dart';

Display colors in the popup window:

Use the below example code to show colors in a popup window

// create some values
Color pickerColor = Color(0xff443a49);
Color currentColor = Color(0xff443a49);

// ValueChanged callback
void changeColor(Color color) {
setState(() => pickerColor = color);
}

// raise the [showDialog] widget
showDialog(
context: context,
child: AlertDialog(
title: const Text('Pick a color!'),
content: SingleChildScrollView(
child: ColorPicker(
pickerColor: pickerColor,
onColorChanged: changeColor,
enableLabel: true,
pickerAreaHeightPercent: 0.8,
),
// Use Material color picker:
//
// child: MaterialPicker(
// pickerColor: pickerColor,
// onColorChanged: changeColor,
// enableLabel: true, // only on portrait mode
// ),
//
// Use Block color picker:
//
// child: BlockPicker(
// pickerColor: currentColor,
// onColorChanged: changeColor,
// ),
),
actions: [
FlatButton(
child: const Text('Got it'),
onPressed: () {
setState(() => currentColor = pickerColor);
Navigator.of(context).pop();
},
),
],
),
)

The complete code for Flutter Color Picker.

Copy and Paste below code into your main.dart file

import 'package:flutter/material.dart';

import 'package:flutter_colorpicker/flutter_colorpicker.dart';
import 'package:flutter_colorpicker/material_picker.dart';
import 'package:flutter_colorpicker/block_picker.dart';
import 'package:flutter_colorpicker/utils.dart';

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

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

class _MyAppState extends State {
Color currentColor = Colors.amber;

void changeColor(Color color) => setState(() => currentColor = color);

@override
Widget build(BuildContext context) {
return DefaultTabController(
length: 3,
child: Scaffold(
appBar: AppBar(
title: Text('Flutter Color Picker Example'),
bottom: TabBar(
tabs: [
const Tab(text: 'HSV'),
const Tab(text: 'Material'),
const Tab(text: 'Block'),
],
),
),
body: TabBarView(
physics: const NeverScrollableScrollPhysics(),
children: [
Center(
child: RaisedButton(
elevation: 3.0,
onPressed: () {
showDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(
titlePadding: const EdgeInsets.all(0.0),
contentPadding: const EdgeInsets.all(0.0),
content: SingleChildScrollView(
child: ColorPicker(
currentColor,
changeColor,
colorPickerWidth: 300.0,
pickerAreaHeightPercent: 0.7,
enableAlpha: true,
displayThumbColor: true,
paletteType: PaletteType.hsv,
),
),
);
},
);
},
child: const 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: const EdgeInsets.all(0.0),
contentPadding: const EdgeInsets.all(0.0),
content: SingleChildScrollView(
child: MaterialPicker(
pickerColor: currentColor,
onColorChanged: changeColor,
enableLabel: true,
),
),
);
},
);
},
child: const 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(
title: Text('Select a color'),
content: SingleChildScrollView(
child: BlockPicker(
pickerColor: currentColor,
onColorChanged: changeColor,
),
),
);
},
);
},
child: const Text('Change me'),
color: currentColor,
textColor: useWhiteForeground(currentColor)
? const Color(0xffffffff)
: const Color(0xff000000),
),
),
],
),
),
);
}
}

Congratulations You Have Learned Picking Colors in Flutter….!!!

If It Is Helpful Share It With Your Friends….!!!

PrevNext