Flutter – HSVColor Picker
In Flutter the HSVColor picker using the flutter_hsvcolor_picker package helps us to create a color picker easily which will provide RGB, HSV, Color Wheel, Palette Hue, Palette Saturation, Palette Value, Swatches Color Pickers. In this article, we are going to implement the HSVColor picker using the flutter_hsvcolor_picker package. A sample video is given below to get an idea about what we are going to do in this article.
Step By Step Implementation
Step 1: Create a New Project in Android Studio
To set up Flutter Development on Android Studio please refer to Android Studio Setup for Flutter Development, and then create a new project in Android Studio please refer to Creating a Simple Application in Flutter.
Step 2: Add the Required Dependency
Add the below dependency to your pubspec.yaml file.
dependencies:
flutter_hsvcolor_picker: ^1.5.0
Or, Simple we can run the following command in our vs code Terminal.
flutter pub add flutter_hsvcolor_picker
Step 3: Import the Package
First of all import material.dart and flutter_hsvcolor_picker package.
import 'package:flutter/material.dart';
import 'package:flutter_hsvcolor_picker/flutter_hsvcolor_picker.dart';
Step 4: Execute the main Method
Here the execution of our app starts.
Dart
void main() => runApp( const MyApp()); |
Step 5: Create MyApp Class
In this class we are going to implement the MaterialApp , here we are also set the Theme of our App.
Dart
class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return MaterialApp( theme: ThemeData( primarySwatch: Colors.green, // Set the app's primary theme color ), debugShowCheckedModeBanner: false , home: const MyHomePage(), ); } } |
Step 6: Create MyHomePage Class
In this class we are going to implement the HSVColor Picker which will provide RGB, HSV, Color Wheel, Palette Hue, Palette Saturation, Palette Value, Swatches color pickers using flutter_hsvcolor_picker package. Comments are added for better understanding.
Card(
// Card widget for a better visual structure
elevation: 5,
child: Padding(
padding: const EdgeInsets.all(20),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
// Text instructing the user to choose a color
Text(
'Choose a Color',
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
),
),
SizedBox(height: 20),
// ColorPicker widget for selecting a color
ValueListenableBuilder<Color>(
valueListenable: _colorNotifier,
builder: (_, color, __) {
return ColorPicker(
color: color,
// Callback to update the selected color
onChanged: (value) {
_colorNotifier.value = value;
},
);
},
),
SizedBox(height: 20),
// Text indicating the selected color
Text(
'Selected Color:',
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
),
),
SizedBox(height: 10),
// Display the selected color in a small container
ValueListenableBuilder<Color>(
valueListenable: _colorNotifier,
builder: (_, color, __) {
return Container(
height: 50,
width: 50,
decoration: BoxDecoration(
color: color,
borderRadius: BorderRadius.circular(8),
),
);
},
),
],
),
),
),
Dart
class MyHomePage extends StatefulWidget { const MyHomePage({Key? key}) : super(key: key); @override State<MyHomePage> createState() => _MyHomePageState(); } class _MyHomePageState extends State<MyHomePage> { // ValueNotifier to keep track of the selected color final _colorNotifier = ValueNotifier<Color>(Colors.green); @override Widget build(BuildContext context) { return Scaffold( // App bar for a simple title appBar: AppBar( title: Text( 'Color Picker App' ), centerTitle: true , ), // Background color for the entire screen backgroundColor: Colors.grey[200], body: Center( child: Padding( // Padding for better spacing padding: const EdgeInsets.all(20), child: SingleChildScrollView( child: Card( // Card widget for a better visual structure elevation: 5, child: Padding( padding: const EdgeInsets.all(20), child: Column( mainAxisSize: MainAxisSize.min, children: [ // Text instructing the user to choose a color Text( 'Choose a Color' , style: TextStyle( fontSize: 20, fontWeight: FontWeight.bold, ), ), SizedBox(height: 20), // ColorPicker widget for selecting a color ValueListenableBuilder<Color>( valueListenable: _colorNotifier, builder: (_, color, __) { return ColorPicker( color: color, // Callback to update the selected color onChanged: (value) { _colorNotifier.value = value; }, ); }, ), SizedBox(height: 20), // Text indicating the selected color Text( 'Selected Color:' , style: TextStyle( fontSize: 18, fontWeight: FontWeight.bold, ), ), SizedBox(height: 10), // Display the selected color in a small container ValueListenableBuilder<Color>( valueListenable: _colorNotifier, builder: (_, color, __) { return Container( height: 50, width: 50, decoration: BoxDecoration( color: color, borderRadius: BorderRadius.circular(8), ), ); }, ), ], ), ), ), ), ), ), ); } } |
Here is the full Code of main.dart file
Dart
import 'package:flutter/material.dart' ; import 'package:flutter_hsvcolor_picker/flutter_hsvcolor_picker.dart' ; void main() => runApp( const MyApp()); class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return MaterialApp( theme: ThemeData( // Set the app's primary theme color primarySwatch: Colors.green, ), debugShowCheckedModeBanner: false , home: const MyHomePage(), ); } } class MyHomePage extends StatefulWidget { const MyHomePage({Key? key}) : super(key: key); @override State<MyHomePage> createState() => _MyHomePageState(); } class _MyHomePageState extends State<MyHomePage> { // ValueNotifier to keep track of the selected color final _colorNotifier = ValueNotifier<Color>(Colors.green); @override Widget build(BuildContext context) { return Scaffold( // App bar for a simple title appBar: AppBar( title: Text( 'Color Picker App' ), centerTitle: true , ), // Background color for the entire screen backgroundColor: Colors.grey[200], body: Center( child: Padding( // Padding for better spacing padding: const EdgeInsets.all(20), child: SingleChildScrollView( child: Card( // Card widget for a better visual structure elevation: 5, child: Padding( padding: const EdgeInsets.all(20), child: Column( mainAxisSize: MainAxisSize.min, children: [ // Text instructing the user to choose a color Text( 'Choose a Color' , style: TextStyle( fontSize: 20, fontWeight: FontWeight.bold, ), ), SizedBox(height: 20), // ColorPicker widget for selecting a color ValueListenableBuilder<Color>( valueListenable: _colorNotifier, builder: (_, color, __) { return ColorPicker( color: color, // Callback to update the selected color onChanged: (value) { _colorNotifier.value = value; }, ); }, ), SizedBox(height: 20), // Text indicating the selected color Text( 'Selected Color:' , style: TextStyle( fontSize: 18, fontWeight: FontWeight.bold, ), ), SizedBox(height: 10), // Display the selected color in a small container ValueListenableBuilder<Color>( valueListenable: _colorNotifier, builder: (_, color, __) { return Container( height: 50, width: 50, decoration: BoxDecoration( color: color, borderRadius: BorderRadius.circular(8), ), ); }, ), ], ), ), ), ), ), ), ); } } |
Contact Us