image.png] Hey people, So, I have gained a lot from this community and would like to offer something back for those, who like me, are not developers and struggle to make custom widgets. Its not much but I struggled to work this one out (because im not a dev) so hopefully someone will find it useful. I have made a ColorPickerTile widget using: Dependency: flutter_colorpicker: ^1.0.3 returning color value using localstate (because I don't know any other way, if you do let me know) you can also easily add a parameter as to set the initial color from within FF. CODE:
import 'package:flutter_colorpicker/flutter_colorpicker.dart';
class MyColorPicker extends StatefulWidget {
const MyColorPicker({
Key key,
this.width,
this.height,
}) : super(key: key);
final double width;
final double height;
@override
_MyColorPickerState createState() => _MyColorPickerState();
}
class _MyColorPickerState extends State {
Color color = Colors.red;
@override
Widget build(BuildContext context) {
return ListTile(
onTap: () => pickColor(context),
leading: Icon(
Icons.color_lens_rounded,
color: color,
),
title: Text(
'Color Tag',
style: FlutterFlowTheme.of(context).title3.override(
fontFamily: 'Lexend Deca',
color: color,
),
),
trailing: Icon(
Icons.arrow_forward_ios,
color: color,
size: 20,
),
tileColor: const Color(0x00F5F5F5),
dense: false,
);
}
Widget buildColorPicker() => ColorPicker(
pickerColor: color,
onColorChanged: (color) => {
setState(() {
this.color = color;
//change this bit below to whatever type and name of your localstate variable
FFAppState().AppointmentColor = color.value.toString();
})
},
showLabel: false,
);
void pickColor(BuildContext context) => showDialog(
context: context,
builder: (context) => AlertDialog(
title: const Text('Colors'),
content: Column(
mainAxisSize: MainAxisSize.min,
children: [
buildColorPicker(),
TextButton(
child: const Text('Select', style: TextStyle(fontSize: 20)),
onPressed: () => Navigator.of(context).pop(),
),
],
),
));
}