In 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
.png)
.png)
.png)
|
Article Contributed By :
|
|
|
|
|
4804 Views |
|