I used this flutter package to implement a color picker in my app. My Widget
looks something like this:
ColorPicker(
pickerColor: model.color,
onColorChanged: (color) {
...
},
showLabel: false,
pickerAreaHeightPercent: 0.4,
)
This works fine and looks like this in the UI:
Now I wondered how I could implement a classical circular color picker. I did not find an example in the official documentation but there is a screenshot in the package description that shows just this:
Does anyone know how to implement this using the same package or can hint me to an example.
please check out this and you need to palette type as paletteType: PaletteType.hueWheel,
. use the same package as used.
import 'package:flutter/material.dart';
import 'package:flutter_colorpicker/flutter_colorpicker.dart';
void main() => runApp(const MaterialApp(home: MyApp()));
class MyApp extends StatefulWidget {
const MyApp({Key key}) : super(key: key);
@override
State<StatefulWidget> createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
bool lightTheme = true;
Color currentColor = Colors.amber;
List<Color> currentColors = [Colors.yellow, Colors.green];
List<Color> colorHistory = [];
void changeColor(Color color) => setState(() => currentColor = color);
void changeColors(List<Color> colors) => setState(() => currentColors = colors);
@override
Widget build(BuildContext context) {
final foregroundColor = useWhiteForeground(currentColor) ? Colors.white : Colors.black;
return AnimatedTheme(
data: lightTheme ? ThemeData.light() : ThemeData.dark(),
child: Builder(builder: (context) {
return Scaffold(
appBar: AppBar(
title: const Text('Flutter Color Picker Example'),
backgroundColor: currentColor,
foregroundColor: foregroundColor,
),
body: Container(
child: InkWell(
onTap: (){
showColorPicker();
},
child: Center(child: Text("Color Picker")),
),
),
);
}),
);
}
void showColorPicker() {
showDialog(context: context, builder: (BuildContext context){
return AlertDialog(
title: Text("Pick a color"),
content: SingleChildScrollView(
child: ColorPicker(
pickerColor: Color(0xff443a49),
paletteType: PaletteType.hueWheel,
),
),
);
});
}
}
output