Flutter – HSVColor Picker
Last Updated :
14 Dec, 2023
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,
),
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> {
final _colorNotifier = ValueNotifier<Color>(Colors.green);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Color Picker App'),
centerTitle: true,
),
backgroundColor: Colors.grey[200],
body: Center(
child: Padding(
padding: const EdgeInsets.all(20),
child: SingleChildScrollView(
child: Card(
elevation: 5,
child: Padding(
padding: const EdgeInsets.all(20),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Text(
'Choose a Color',
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
),
),
SizedBox(height: 20),
ValueListenableBuilder<Color>(
valueListenable: _colorNotifier,
builder: (_, color, __) {
return ColorPicker(
color: color,
onChanged: (value) {
_colorNotifier.value = value;
},
);
},
),
SizedBox(height: 20),
Text(
'Selected Color:',
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
),
),
SizedBox(height: 10),
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(
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> {
final _colorNotifier = ValueNotifier<Color>(Colors.green);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Color Picker App'),
centerTitle: true,
),
backgroundColor: Colors.grey[200],
body: Center(
child: Padding(
padding: const EdgeInsets.all(20),
child: SingleChildScrollView(
child: Card(
elevation: 5,
child: Padding(
padding: const EdgeInsets.all(20),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Text(
'Choose a Color',
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
),
),
SizedBox(height: 20),
ValueListenableBuilder<Color>(
valueListenable: _colorNotifier,
builder: (_, color, __) {
return ColorPicker(
color: color,
onChanged: (value) {
_colorNotifier.value = value;
},
);
},
),
SizedBox(height: 20),
Text(
'Selected Color:',
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
),
),
SizedBox(height: 10),
ValueListenableBuilder<Color>(
valueListenable: _colorNotifier,
builder: (_, color, __) {
return Container(
height: 50,
width: 50,
decoration: BoxDecoration(
color: color,
borderRadius: BorderRadius.circular(8),
),
);
},
),
],
),
),
),
),
),
),
);
}
}
|
Output:
Share your thoughts in the comments
Please Login to comment...