Flutter Color Picker - Flutter Material Color Picker Example
Last updated Apr 23, 2021In this post we are going to learn how to show color picker in Flutter, To select colors in flutter application we are going to use flutter_colorPicker plugin which will give us option to choose a color from the color pallette. In this flutter color picker example we are going to show 3 types of color picker dialogs. HSV, Material Color Picker and Block Color picker.
Let's Get Started
Step 1: Create Flutter Application
Step 2: Add required Dependencies
Add flutter_colorpicker dependencies in pubspec.yaml file
dev_dependencies:
flutter_test:
sdk: flutter
flutter_colorpicker: ^0.3.2
|
Step 3: Create Dart file and update below code
class ColorPickerWidget extends StatefulWidget {
@override
State createState() => ColorPickerWidgetState();
}
class ColorPickerWidgetState 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(
pickerColor: currentColor,
onColorChanged: changeColor,
colorPickerWidth: 300.0,
pickerAreaHeightPercent: 0.7,
enableAlpha: true,
displayThumbColor: true,
showLabel: true,
paletteType: PaletteType.hsv,
pickerAreaBorderRadius: const BorderRadius.only(
topLeft: const Radius.circular(2.0),
topRight: const Radius.circular(2.0),
),
),
));
},
);
},
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),
),
),
],
),
),
);
}
}
|
on button press alert dialog will open and show the colors
showDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(
titlePadding: const EdgeInsets.all(0.0),
contentPadding: const EdgeInsets.all(0.0),
content: SingleChildScrollView(
child: ColorPicker(
pickerColor: currentColor,
onColorChanged: changeColor,
colorPickerWidth: 300.0,
pickerAreaHeightPercent: 0.7,
enableAlpha: true,
displayThumbColor: true,
showLabel: true,
paletteType: PaletteType.hsv,
pickerAreaBorderRadius: const BorderRadius.only(
topLeft: const Radius.circular(2.0),
topRight: const Radius.circular(2.0),
),
),
));
},
)
|
Step 4: Update main dart file with below code
void main() {
runApp(
MaterialApp(
title: 'Flutter Example',
theme: ThemeData(primaryColor: Colors.pink),
home: ColorPickerWidget(),
),
);
}
|
Step 5: Run Application
Article Contributed By :
|
|
|
|
5165 Views |