huypanha
/
flutter-quill
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Move color picker dialog

Browse Source
pull/1530/head
Ellet 1 year ago
parent cb92202d00
commit 7c2e3d6ac6
No known key found for this signature in database
GPG Key ID: C488CC70BBCEF0D1
3 changed files with 184 additions and 146 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      lib/src/widgets/toolbar/base_toolbar.dart
  2. 145
      lib/src/widgets/toolbar/buttons/color/color.dart
  3. 149
      lib/src/widgets/toolbar/buttons/color/dialog.dart

2
lib/src/widgets/toolbar/base_toolbar.dart
Unescape View File

@ -9,7 +9,7 @@ import 'buttons/arrow_indicated_list.dart';
export '../../models/config/toolbar/buttons/base.dart'; export '../../models/config/toolbar/buttons/base.dart';
export '../../models/config/toolbar/configurations.dart'; export '../../models/config/toolbar/configurations.dart';
export 'buttons/clear_format.dart'; export 'buttons/clear_format.dart';
export 'buttons/color.dart'; export 'buttons/color/color.dart';
export 'buttons/custom_button.dart'; export 'buttons/custom_button.dart';
export 'buttons/font_family.dart'; export 'buttons/font_family.dart';
export 'buttons/font_size.dart'; export 'buttons/font_size.dart';

145
lib/src/widgets/toolbar/buttons/color.dart → lib/src/widgets/toolbar/buttons/color/color.dart
Unescape View File

@ -1,14 +1,14 @@
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter_colorpicker/flutter_colorpicker.dart';
import '../../../extensions/quill_provider.dart'; import '../../../../extensions/quill_provider.dart';
import '../../../l10n/extensions/localizations.dart'; import '../../../../l10n/extensions/localizations.dart';
import '../../../models/documents/attribute.dart'; import '../../../../models/documents/attribute.dart';
import '../../../models/documents/style.dart'; import '../../../../models/documents/style.dart';
import '../../../models/themes/quill_icon_theme.dart'; import '../../../../models/themes/quill_icon_theme.dart';
import '../../../utils/color.dart'; import '../../../../utils/color.dart';
import '../../controller.dart'; import '../../../controller.dart';
import '../base_toolbar.dart'; import '../../base_toolbar.dart';
import 'dialog.dart';
/// Controls color styles. /// Controls color styles.
/// ///
@ -202,134 +202,24 @@ class QuillToolbarColorButtonState extends State<QuillToolbarColorButton> {
var hex = colorToHex(color); var hex = colorToHex(color);
hex = '#$hex'; hex = '#$hex';
widget.controller.formatSelection( widget.controller.formatSelection(
widget.isBackground ? BackgroundAttribute(hex) : ColorAttribute(hex)); widget.isBackground ? BackgroundAttribute(hex) : ColorAttribute(hex),
);
} }
void _showColorPicker() { void _showColorPicker() {
var pickerType = 'material';
var selectedColor = Colors.black;
if (_isToggledColor) {
selectedColor = widget.isBackground
? hexToColor(_selectionStyle.attributes['background']?.value)
: hexToColor(_selectionStyle.attributes['color']?.value);
}
final hexController =
TextEditingController(text: colorToHex(selectedColor));
late void Function(void Function()) colorBoxSetState;
// TODO: Please make this dialog only responsible for picking the color
// so in the future we will add an option for showing custom method
// defined by the developer for picking dialog, and it will return
// color hex
// I won't for now to save some time for the refactoring
showDialog<String>( showDialog<String>(
context: context, context: context,
barrierColor: options.dialogBarrierColor ?? barrierColor: options.dialogBarrierColor ??
context.requireQuillSharedConfigurations.dialogBarrierColor, context.requireQuillSharedConfigurations.dialogBarrierColor,
builder: (context) => StatefulBuilder(builder: (context, dlgSetState) { builder: (context) => ColorPickerDialog(
return AlertDialog( isBackground: widget.isBackground,
title: Text(context.loc.selectColor), onRequestChangeColor: _changeColor,
actions: [ isToggledColor: _isToggledColor,
TextButton( selectionStyle: _selectionStyle,
onPressed: () {
Navigator.of(context).pop();
},
child: Text(context.loc.ok)),
],
backgroundColor: Theme.of(context).canvasColor,
content: SingleChildScrollView(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Row(
children: [
TextButton(
onPressed: () {
dlgSetState(() {
pickerType = 'material';
});
},
child: Text(context.loc.material)),
TextButton(
onPressed: () {
dlgSetState(() {
pickerType = 'color';
});
},
child: Text(context.loc.color)),
],
),
Column(children: [
if (pickerType == 'material')
MaterialPicker(
pickerColor: selectedColor,
onColorChanged: (color) {
_changeColor(context, color);
Navigator.of(context).pop();
},
),
if (pickerType == 'color')
ColorPicker(
pickerColor: selectedColor,
onColorChanged: (color) {
_changeColor(context, color);
hexController.text = colorToHex(color);
selectedColor = color;
colorBoxSetState(() {});
},
),
const SizedBox(
height: 10,
),
Row(
children: [
SizedBox(
width: 100,
height: 60,
child: TextFormField(
controller: hexController,
onChanged: (value) {
selectedColor = hexToColor(value);
_changeColor(context, selectedColor);
colorBoxSetState(() {});
},
decoration: InputDecoration(
labelText: context.loc.hex,
border: const OutlineInputBorder(),
),
),
), ),
const SizedBox(
width: 10,
),
StatefulBuilder(builder: (context, mcolorBoxSetState) {
colorBoxSetState = mcolorBoxSetState;
return Container(
width: 25,
height: 25,
decoration: BoxDecoration(
border: Border.all(
color: Colors.black45,
),
color: selectedColor,
borderRadius: BorderRadius.circular(5),
),
);
}),
],
),
])
],
),
));
}),
); );
} }
}
Color hexToColor(String? hexString) { Color hexToColor(String? hexString) {
if (hexString == null) { if (hexString == null) {
@ -351,4 +241,3 @@ class QuillToolbarColorButtonState extends State<QuillToolbarColorButton> {
String colorToHex(Color color) { String colorToHex(Color color) {
return color.value.toRadixString(16).padLeft(8, '0').toUpperCase(); return color.value.toRadixString(16).padLeft(8, '0').toUpperCase();
} }
}

149
lib/src/widgets/toolbar/buttons/color/dialog.dart
Unescape View File

@ -0,0 +1,149 @@
import 'package:flutter/material.dart';
import 'package:flutter_colorpicker/flutter_colorpicker.dart'
show ColorPicker, MaterialPicker, colorToHex;
import '../../../../../translations.dart';
import '../../../../models/documents/style.dart';
import 'color.dart' show hexToColor;
class ColorPickerDialog extends StatefulWidget {
const ColorPickerDialog({
required this.isBackground,
required this.onRequestChangeColor,
required this.isToggledColor,
required this.selectionStyle,
super.key,
});
final bool isBackground;
final bool isToggledColor;
final Function(BuildContext context, Color color) onRequestChangeColor;
final Style selectionStyle;
@override
State<ColorPickerDialog> createState() => ColorPickerDialogState();
}
class ColorPickerDialogState extends State<ColorPickerDialog> {
var pickerType = 'material';
var selectedColor = Colors.black;
late final TextEditingController hexController;
late void Function(void Function()) colorBoxSetState;
@override
void initState() {
super.initState();
hexController = TextEditingController(text: colorToHex(selectedColor));
if (widget.isToggledColor) {
selectedColor = widget.isBackground
? hexToColor(widget.selectionStyle.attributes['background']?.value)
: hexToColor(widget.selectionStyle.attributes['color']?.value);
}
}
@override
Widget build(BuildContext context) {
return AlertDialog(
title: Text(context.loc.selectColor),
actions: [
TextButton(
onPressed: () {
Navigator.of(context).pop();
},
child: Text(context.loc.ok)),
],
backgroundColor: Theme.of(context).canvasColor,
content: SingleChildScrollView(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Row(
children: [
TextButton(
onPressed: () {
setState(() {
pickerType = 'material';
});
},
child: Text(context.loc.material)),
TextButton(
onPressed: () {
setState(() {
pickerType = 'color';
});
},
child: Text(context.loc.color)),
],
),
Column(
children: [
if (pickerType == 'material')
MaterialPicker(
pickerColor: selectedColor,
onColorChanged: (color) {
widget.onRequestChangeColor(context, color);
Navigator.of(context).pop();
},
),
if (pickerType == 'color')
ColorPicker(
pickerColor: selectedColor,
onColorChanged: (color) {
widget.onRequestChangeColor(context, color);
hexController.text = colorToHex(color);
selectedColor = color;
colorBoxSetState(() {});
},
),
const SizedBox(
height: 10,
),
Row(
children: [
SizedBox(
width: 100,
height: 60,
child: TextFormField(
controller: hexController,
onChanged: (value) {
selectedColor = hexToColor(value);
widget.onRequestChangeColor(context, selectedColor);
colorBoxSetState(() {});
},
decoration: InputDecoration(
labelText: context.loc.hex,
border: const OutlineInputBorder(),
),
),
),
const SizedBox(
width: 10,
),
StatefulBuilder(
builder: (context, mcolorBoxSetState) {
colorBoxSetState = mcolorBoxSetState;
return Container(
width: 25,
height: 25,
decoration: BoxDecoration(
border: Border.all(
color: Colors.black45,
),
color: selectedColor,
borderRadius: BorderRadius.circular(5),
),
);
},
),
],
),
],
)
],
),
),
);
}
}
Write Preview
Loading…
Cancel
Save