Line data Source code
1 : import 'package:flutter/material.dart';
2 : import 'package:flutter/services.dart';
3 : import 'package:flutter/widgets.dart';
4 : import 'package:flutter_colorpicker/flutter_colorpicker.dart';
5 : import 'package:pal/src/extensions/color_extension.dart';
6 : import 'package:pal/src/ui/editor/widgets/bordered_text_field.dart';
7 :
8 : typedef OnColorSelected = void Function(Color);
9 :
10 : typedef OnCancelPicker = void Function();
11 :
12 :
13 : class ColorPickerDialog extends StatefulWidget {
14 :
15 : final Color placeholderColor;
16 :
17 : final OnColorSelected onColorSelected;
18 :
19 : final OnCancelPicker onCancel;
20 :
21 3 : const ColorPickerDialog({
22 : Key key,
23 : this.placeholderColor,
24 : this.onColorSelected,
25 : this.onCancel
26 3 : }) : super(key: key);
27 :
28 3 : @override
29 3 : _ColorPickerDialogState createState() => _ColorPickerDialogState();
30 : }
31 :
32 : class _ColorPickerDialogState extends State<ColorPickerDialog> {
33 : final GlobalKey<FormState> _formKey = new GlobalKey<FormState>();
34 : final _hexColorController = TextEditingController();
35 : Color _selectedColor;
36 : bool _isFormValid = false;
37 :
38 3 : @override
39 : void initState() {
40 3 : super.initState();
41 :
42 10 : _selectedColor = widget.placeholderColor ?? Color(0xFFa1e3f1);
43 : }
44 :
45 3 : @override
46 : Widget build(BuildContext context) {
47 3 : return GestureDetector(
48 0 : onTap: () => FocusScope.of(context).unfocus(),
49 3 : child: AlertDialog(
50 3 : key: ValueKey('pal_ColorPickerAlertDialog'),
51 3 : content: SingleChildScrollView(
52 3 : child: Form(
53 3 : key: _formKey,
54 : autovalidateMode: AutovalidateMode.onUserInteraction,
55 3 : onChanged: () {
56 6 : setState(() {
57 12 : _isFormValid = _formKey?.currentState?.validate();
58 : });
59 : },
60 3 : child: Column(
61 3 : children: [
62 3 : ColorPicker(
63 3 : pickerColor: _selectedColor,
64 0 : onColorChanged: (Color selectedColor) {
65 0 : _selectedColor = selectedColor;
66 0 : _hexColorController.text =
67 0 : '#${selectedColor.toHex().toUpperCase()}';
68 : },
69 : showLabel: false,
70 : pickerAreaHeightPercent: 0.5,
71 : ),
72 3 : BorderedTextField(
73 3 : key: ValueKey('pal_ColorPickerAlertDialog_HexColorTextField'),
74 3 : controller: _hexColorController,
75 : autovalidate: true,
76 : hintText: '#FF4287F5',
77 6 : validator: (String value) => (!HexColor.isHexColor(value))
78 : ? 'Please enter valid color'
79 : : null,
80 3 : onValueChanged: (String newValue) {
81 3 : Color newColor = HexColor.fromHex(newValue);
82 :
83 : if (newColor != null) {
84 6 : setState(() {
85 3 : _selectedColor = newColor;
86 : });
87 : }
88 : },
89 : )
90 : ],
91 : ),
92 : ),
93 : ),
94 3 : actions: <Widget>[
95 3 : FlatButton(
96 3 : key: ValueKey('pal_ColorPickerAlertDialog_CancelButton'),
97 3 : child: Text('Cancel'),
98 0 : onPressed: () {
99 0 : HapticFeedback.selectionClick();
100 0 : widget.onCancel();
101 : },
102 : ),
103 3 : FlatButton(
104 3 : key: ValueKey('pal_ColorPickerAlertDialog_ValidateButton'),
105 3 : child: Text(
106 : 'Validate',
107 3 : style: TextStyle(
108 : fontWeight: FontWeight.bold,
109 : ),
110 : ),
111 3 : onPressed: _isFormValid
112 2 : ? () {
113 4 : if (widget.onColorSelected != null) {
114 2 : HapticFeedback.selectionClick();
115 8 : widget.onColorSelected(_selectedColor);
116 : }
117 : }
118 : : null,
119 : ),
120 : ],
121 : ),
122 : );
123 : }
124 : }
|