Major update step 3 (#1452)
Ahmed Hnewa
1 year ago
committed by
GitHub
parent
55f5101ccc
commit
9039b8cd7c
30 changed files with 1076 additions and 544 deletions
@ -1,15 +1,32 @@ |
|||||||
import 'package:flutter/foundation.dart' show immutable; |
import 'package:flutter/foundation.dart' show immutable; |
||||||
import 'package:flutter/widgets.dart' show IconData; |
import 'package:flutter/widgets.dart' show Color; |
||||||
|
|
||||||
import 'base.dart'; |
import 'base.dart'; |
||||||
|
|
||||||
|
class QuillToolbarToggleStyleButtonExtraOptions |
||||||
|
extends QuillToolbarBaseButtonExtraOptions { |
||||||
|
const QuillToolbarToggleStyleButtonExtraOptions({ |
||||||
|
required super.controller, |
||||||
|
required super.context, |
||||||
|
required super.onPressed, |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
@immutable |
@immutable |
||||||
class QuillToolbarToggleStyleButtonOptions |
class QuillToolbarToggleStyleButtonOptions |
||||||
extends QuillToolbarBaseButtonOptions { |
extends QuillToolbarBaseButtonOptions<QuillToolbarToggleStyleButtonOptions, |
||||||
|
QuillToolbarToggleStyleButtonExtraOptions> { |
||||||
const QuillToolbarToggleStyleButtonOptions({ |
const QuillToolbarToggleStyleButtonOptions({ |
||||||
required this.iconData, |
super.iconData, |
||||||
|
this.iconSize, |
||||||
|
this.fillColor, |
||||||
|
super.tooltip, |
||||||
|
super.afterButtonPressed, |
||||||
|
super.iconTheme, |
||||||
|
super.childBuilder, |
||||||
|
super.controller, |
||||||
}); |
}); |
||||||
|
|
||||||
@override |
final double? iconSize; |
||||||
final IconData iconData; |
final Color? fillColor; |
||||||
} |
} |
||||||
|
|||||||
@ -0,0 +1,282 @@ |
|||||||
|
import 'package:flutter/material.dart'; |
||||||
|
|
||||||
|
import '../../../../extensions.dart'; |
||||||
|
import '../../../../flutter_quill.dart'; |
||||||
|
import '../../../translations/toolbar.i18n.dart'; |
||||||
|
import '../../../utils/extensions/build_context.dart'; |
||||||
|
import '../../../utils/font.dart'; |
||||||
|
|
||||||
|
class QuillToolbarFontSizeButton extends StatefulWidget { |
||||||
|
QuillToolbarFontSizeButton({ |
||||||
|
required this.options, |
||||||
|
required this.controller, |
||||||
|
super.key, |
||||||
|
}) : assert(options.rawItemsMap?.isNotEmpty ?? true), |
||||||
|
assert(options.initialValue == null || |
||||||
|
(options.initialValue?.isNotEmpty ?? true)); |
||||||
|
|
||||||
|
final QuillToolbarFontSizeButtonOptions options; |
||||||
|
|
||||||
|
/// Since we can't get the state from the instace of the widget for comparing |
||||||
|
/// in [didUpdateWidget] then we will have to store reference here |
||||||
|
final QuillController controller; |
||||||
|
|
||||||
|
@override |
||||||
|
_QuillToolbarFontSizeButtonState createState() => |
||||||
|
_QuillToolbarFontSizeButtonState(); |
||||||
|
} |
||||||
|
|
||||||
|
class _QuillToolbarFontSizeButtonState |
||||||
|
extends State<QuillToolbarFontSizeButton> { |
||||||
|
String _currentValue = ''; |
||||||
|
|
||||||
|
QuillToolbarFontSizeButtonOptions get options { |
||||||
|
return widget.options; |
||||||
|
} |
||||||
|
|
||||||
|
/// Since it's not safe to call anything related to the context in dispose |
||||||
|
/// then we will save a reference to the [controller] |
||||||
|
/// and update it in [didChangeDependencies] |
||||||
|
/// and use it in dispose method |
||||||
|
late QuillController _controller; |
||||||
|
|
||||||
|
Map<String, String> get rawItemsMap { |
||||||
|
final fontSizes = options.rawItemsMap ?? |
||||||
|
context.requireQuillToolbarConfigurations.fontSizesValues ?? |
||||||
|
{ |
||||||
|
'Small'.i18n: 'small', |
||||||
|
'Large'.i18n: 'large', |
||||||
|
'Huge'.i18n: 'huge', |
||||||
|
'Clear'.i18n: '0' |
||||||
|
}; |
||||||
|
return fontSizes; |
||||||
|
} |
||||||
|
|
||||||
|
String get _defaultDisplayText { |
||||||
|
return options.initialValue ?? 'Size'.i18n; |
||||||
|
} |
||||||
|
|
||||||
|
Style get _selectionStyle => controller.getSelectionStyle(); |
||||||
|
|
||||||
|
@override |
||||||
|
void initState() { |
||||||
|
super.initState(); |
||||||
|
|
||||||
|
_initState(); |
||||||
|
} |
||||||
|
|
||||||
|
Future<void> _initState() async { |
||||||
|
if (isFlutterTest()) { |
||||||
|
return; |
||||||
|
} |
||||||
|
await Future.delayed(Duration.zero); |
||||||
|
setState(() { |
||||||
|
_currentValue = _defaultDisplayText; |
||||||
|
}); |
||||||
|
controller.addListener(_didChangeEditingValue); |
||||||
|
} |
||||||
|
|
||||||
|
@override |
||||||
|
void didChangeDependencies() { |
||||||
|
super.didChangeDependencies(); |
||||||
|
_controller = controller; |
||||||
|
} |
||||||
|
|
||||||
|
@override |
||||||
|
void dispose() { |
||||||
|
_controller.removeListener(_didChangeEditingValue); |
||||||
|
super.dispose(); |
||||||
|
} |
||||||
|
|
||||||
|
@override |
||||||
|
void didUpdateWidget(covariant QuillToolbarFontSizeButton oldWidget) { |
||||||
|
super.didUpdateWidget(oldWidget); |
||||||
|
if (widget.controller == controller) { |
||||||
|
return; |
||||||
|
} |
||||||
|
controller |
||||||
|
..removeListener(_didChangeEditingValue) |
||||||
|
..addListener(_didChangeEditingValue); |
||||||
|
} |
||||||
|
|
||||||
|
void _didChangeEditingValue() { |
||||||
|
final attribute = _selectionStyle.attributes[options.attribute.key]; |
||||||
|
if (attribute == null) { |
||||||
|
setState(() => _currentValue = _defaultDisplayText); |
||||||
|
return; |
||||||
|
} |
||||||
|
final keyName = _getKeyName(attribute.value); |
||||||
|
setState(() => _currentValue = keyName ?? _defaultDisplayText); |
||||||
|
} |
||||||
|
|
||||||
|
String? _getKeyName(dynamic value) { |
||||||
|
for (final entry in rawItemsMap.entries) { |
||||||
|
if (getFontSize(entry.value) == getFontSize(value)) { |
||||||
|
return entry.key; |
||||||
|
} |
||||||
|
} |
||||||
|
return null; |
||||||
|
} |
||||||
|
|
||||||
|
QuillController get controller { |
||||||
|
return options.controller ?? widget.controller; |
||||||
|
} |
||||||
|
|
||||||
|
double get iconSize { |
||||||
|
final baseFontSize = |
||||||
|
context.requireQuillToolbarBaseButtonOptions.globalIconSize; |
||||||
|
final iconSize = options.iconSize; |
||||||
|
return iconSize ?? baseFontSize; |
||||||
|
} |
||||||
|
|
||||||
|
VoidCallback? get afterButtonPressed { |
||||||
|
return options.afterButtonPressed ?? |
||||||
|
context.requireQuillToolbarBaseButtonOptions.afterButtonPressed; |
||||||
|
} |
||||||
|
|
||||||
|
QuillIconTheme? get iconTheme { |
||||||
|
return options.iconTheme ?? |
||||||
|
context.requireQuillToolbarBaseButtonOptions.iconTheme; |
||||||
|
} |
||||||
|
|
||||||
|
String get tooltip { |
||||||
|
return options.tooltip ?? |
||||||
|
context.requireQuillToolbarBaseButtonOptions.tooltip ?? |
||||||
|
'Font size'.i18n; |
||||||
|
} |
||||||
|
|
||||||
|
void _onPressed() { |
||||||
|
_showMenu(); |
||||||
|
afterButtonPressed?.call(); |
||||||
|
} |
||||||
|
|
||||||
|
@override |
||||||
|
Widget build(BuildContext context) { |
||||||
|
final baseButtonConfigurations = |
||||||
|
context.requireQuillToolbarBaseButtonOptions; |
||||||
|
final childBuilder = |
||||||
|
options.childBuilder ?? baseButtonConfigurations.childBuilder; |
||||||
|
if (childBuilder != null) { |
||||||
|
return childBuilder( |
||||||
|
options.copyWith( |
||||||
|
tooltip: tooltip, |
||||||
|
iconSize: iconSize, |
||||||
|
iconTheme: iconTheme, |
||||||
|
afterButtonPressed: afterButtonPressed, |
||||||
|
controller: controller, |
||||||
|
), |
||||||
|
QuillToolbarFontSizeButtonExtraOptions( |
||||||
|
controller: controller, |
||||||
|
currentValue: _currentValue, |
||||||
|
defaultDisplayText: _defaultDisplayText, |
||||||
|
context: context, |
||||||
|
onPressed: _onPressed, |
||||||
|
), |
||||||
|
); |
||||||
|
} |
||||||
|
return ConstrainedBox( |
||||||
|
constraints: BoxConstraints.tightFor( |
||||||
|
height: iconSize * 1.81, |
||||||
|
width: options.width, |
||||||
|
), |
||||||
|
child: UtilityWidgets.maybeTooltip( |
||||||
|
message: tooltip, |
||||||
|
child: RawMaterialButton( |
||||||
|
visualDensity: VisualDensity.compact, |
||||||
|
shape: RoundedRectangleBorder( |
||||||
|
borderRadius: BorderRadius.circular(iconTheme?.borderRadius ?? 2), |
||||||
|
), |
||||||
|
fillColor: options.fillColor, |
||||||
|
elevation: 0, |
||||||
|
hoverElevation: options.hoverElevation, |
||||||
|
highlightElevation: options.hoverElevation, |
||||||
|
onPressed: _onPressed, |
||||||
|
child: _buildContent(context), |
||||||
|
), |
||||||
|
), |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
Future<void> _showMenu() async { |
||||||
|
final popupMenuTheme = PopupMenuTheme.of(context); |
||||||
|
final button = context.findRenderObject() as RenderBox; |
||||||
|
final overlay = Overlay.of(context).context.findRenderObject() as RenderBox; |
||||||
|
final position = RelativeRect.fromRect( |
||||||
|
Rect.fromPoints( |
||||||
|
button.localToGlobal(Offset.zero, ancestor: overlay), |
||||||
|
button.localToGlobal(button.size.bottomLeft(Offset.zero), |
||||||
|
ancestor: overlay), |
||||||
|
), |
||||||
|
Offset.zero & overlay.size, |
||||||
|
); |
||||||
|
final newValue = await showMenu<String>( |
||||||
|
context: context, |
||||||
|
elevation: 4, |
||||||
|
items: [ |
||||||
|
for (final MapEntry<String, String> fontSize in rawItemsMap.entries) |
||||||
|
PopupMenuItem<String>( |
||||||
|
key: ValueKey(fontSize.key), |
||||||
|
value: fontSize.value, |
||||||
|
height: options.itemHeight ?? kMinInteractiveDimension, |
||||||
|
padding: options.itemPadding, |
||||||
|
child: Text( |
||||||
|
fontSize.key.toString(), |
||||||
|
style: TextStyle( |
||||||
|
color: fontSize.value == '0' ? options.defaultItemColor : null, |
||||||
|
), |
||||||
|
), |
||||||
|
), |
||||||
|
], |
||||||
|
position: position, |
||||||
|
shape: popupMenuTheme.shape, |
||||||
|
color: popupMenuTheme.color, |
||||||
|
); |
||||||
|
if (!mounted) return; |
||||||
|
if (newValue == null) { |
||||||
|
return; |
||||||
|
} |
||||||
|
final keyName = _getKeyName(newValue); |
||||||
|
setState(() { |
||||||
|
_currentValue = keyName ?? _defaultDisplayText; |
||||||
|
if (keyName != null) { |
||||||
|
controller.formatSelection(Attribute.fromKeyValue( |
||||||
|
'size', newValue == '0' ? null : getFontSize(newValue))); |
||||||
|
options.onSelected?.call(newValue); |
||||||
|
} |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
Widget _buildContent(BuildContext context) { |
||||||
|
final theme = Theme.of(context); |
||||||
|
final hasFinalWidth = options.width != null; |
||||||
|
return Padding( |
||||||
|
padding: options.padding ?? const EdgeInsets.fromLTRB(10, 0, 0, 0), |
||||||
|
child: Row( |
||||||
|
mainAxisSize: !hasFinalWidth ? MainAxisSize.min : MainAxisSize.max, |
||||||
|
mainAxisAlignment: MainAxisAlignment.spaceBetween, |
||||||
|
children: [ |
||||||
|
UtilityWidgets.maybeWidget( |
||||||
|
enabled: hasFinalWidth, |
||||||
|
wrapper: (child) => Expanded(child: child), |
||||||
|
child: Text( |
||||||
|
_currentValue, |
||||||
|
overflow: options.labelOverflow, |
||||||
|
style: options.style ?? |
||||||
|
TextStyle( |
||||||
|
fontSize: iconSize / 1.15, |
||||||
|
color: |
||||||
|
iconTheme?.iconUnselectedColor ?? theme.iconTheme.color, |
||||||
|
), |
||||||
|
), |
||||||
|
), |
||||||
|
const SizedBox(width: 3), |
||||||
|
Icon( |
||||||
|
Icons.arrow_drop_down, |
||||||
|
size: iconSize / 1.15, |
||||||
|
color: iconTheme?.iconUnselectedColor ?? theme.iconTheme.color, |
||||||
|
) |
||||||
|
], |
||||||
|
), |
||||||
|
); |
||||||
|
} |
||||||
|
} |
||||||
@ -1,225 +0,0 @@ |
|||||||
import 'package:flutter/material.dart'; |
|
||||||
|
|
||||||
import '../../../models/documents/attribute.dart'; |
|
||||||
import '../../../models/documents/style.dart'; |
|
||||||
import '../../../models/themes/quill_icon_theme.dart'; |
|
||||||
import '../../../translations/toolbar.i18n.dart'; |
|
||||||
import '../../../utils/font.dart'; |
|
||||||
import '../../../utils/widgets.dart'; |
|
||||||
import '../../controller.dart'; |
|
||||||
|
|
||||||
class QuillToolbarFontSizeButton extends StatefulWidget { |
|
||||||
const QuillToolbarFontSizeButton({ |
|
||||||
required this.rawItemsMap, |
|
||||||
required this.attribute, |
|
||||||
required this.controller, |
|
||||||
this.onSelected, |
|
||||||
@Deprecated('It is not required because of `rawItemsMap`') this.items, |
|
||||||
this.iconSize = 40, |
|
||||||
this.fillColor, |
|
||||||
this.hoverElevation = 1, |
|
||||||
this.highlightElevation = 1, |
|
||||||
this.iconTheme, |
|
||||||
this.afterButtonPressed, |
|
||||||
this.tooltip, |
|
||||||
this.padding, |
|
||||||
this.style, |
|
||||||
this.width, |
|
||||||
this.initialValue, |
|
||||||
this.labelOverflow = TextOverflow.visible, |
|
||||||
this.itemHeight, |
|
||||||
this.itemPadding, |
|
||||||
this.defaultItemColor = Colors.red, |
|
||||||
Key? key, |
|
||||||
}) : assert(rawItemsMap.length > 0), |
|
||||||
assert(initialValue == null || initialValue.length > 0), |
|
||||||
super(key: key); |
|
||||||
|
|
||||||
final double iconSize; |
|
||||||
final Color? fillColor; |
|
||||||
final double hoverElevation; |
|
||||||
final double highlightElevation; |
|
||||||
@Deprecated('It is not required because of `rawItemsMap`') |
|
||||||
final List<PopupMenuEntry<String>>? items; |
|
||||||
final Map<String, String> rawItemsMap; |
|
||||||
final ValueChanged<String>? onSelected; |
|
||||||
final QuillIconTheme? iconTheme; |
|
||||||
final Attribute attribute; |
|
||||||
final QuillController controller; |
|
||||||
final VoidCallback? afterButtonPressed; |
|
||||||
final String? tooltip; |
|
||||||
final EdgeInsetsGeometry? padding; |
|
||||||
final TextStyle? style; |
|
||||||
final double? width; |
|
||||||
final String? initialValue; |
|
||||||
final TextOverflow labelOverflow; |
|
||||||
final double? itemHeight; |
|
||||||
final EdgeInsets? itemPadding; |
|
||||||
final Color? defaultItemColor; |
|
||||||
|
|
||||||
@override |
|
||||||
_QuillToolbarFontSizeButtonState createState() => |
|
||||||
_QuillToolbarFontSizeButtonState(); |
|
||||||
} |
|
||||||
|
|
||||||
class _QuillToolbarFontSizeButtonState |
|
||||||
extends State<QuillToolbarFontSizeButton> { |
|
||||||
late String _defaultDisplayText; |
|
||||||
late String _currentValue; |
|
||||||
Style get _selectionStyle => widget.controller.getSelectionStyle(); |
|
||||||
|
|
||||||
@override |
|
||||||
void initState() { |
|
||||||
super.initState(); |
|
||||||
_currentValue = _defaultDisplayText = widget.initialValue ?? 'Size'.i18n; |
|
||||||
widget.controller.addListener(_didChangeEditingValue); |
|
||||||
} |
|
||||||
|
|
||||||
@override |
|
||||||
void dispose() { |
|
||||||
widget.controller.removeListener(_didChangeEditingValue); |
|
||||||
super.dispose(); |
|
||||||
} |
|
||||||
|
|
||||||
@override |
|
||||||
void didUpdateWidget(covariant QuillToolbarFontSizeButton oldWidget) { |
|
||||||
super.didUpdateWidget(oldWidget); |
|
||||||
if (oldWidget.controller != widget.controller) { |
|
||||||
oldWidget.controller.removeListener(_didChangeEditingValue); |
|
||||||
widget.controller.addListener(_didChangeEditingValue); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
void _didChangeEditingValue() { |
|
||||||
final attribute = _selectionStyle.attributes[widget.attribute.key]; |
|
||||||
if (attribute == null) { |
|
||||||
setState(() => _currentValue = _defaultDisplayText); |
|
||||||
return; |
|
||||||
} |
|
||||||
final keyName = _getKeyName(attribute.value); |
|
||||||
setState(() => _currentValue = keyName ?? _defaultDisplayText); |
|
||||||
} |
|
||||||
|
|
||||||
String? _getKeyName(dynamic value) { |
|
||||||
for (final entry in widget.rawItemsMap.entries) { |
|
||||||
if (getFontSize(entry.value) == getFontSize(value)) { |
|
||||||
return entry.key; |
|
||||||
} |
|
||||||
} |
|
||||||
return null; |
|
||||||
} |
|
||||||
|
|
||||||
@override |
|
||||||
Widget build(BuildContext context) { |
|
||||||
return ConstrainedBox( |
|
||||||
constraints: BoxConstraints.tightFor( |
|
||||||
height: widget.iconSize * 1.81, |
|
||||||
width: widget.width, |
|
||||||
), |
|
||||||
child: UtilityWidgets.maybeTooltip( |
|
||||||
message: widget.tooltip, |
|
||||||
child: RawMaterialButton( |
|
||||||
visualDensity: VisualDensity.compact, |
|
||||||
shape: RoundedRectangleBorder( |
|
||||||
borderRadius: |
|
||||||
BorderRadius.circular(widget.iconTheme?.borderRadius ?? 2), |
|
||||||
), |
|
||||||
fillColor: widget.fillColor, |
|
||||||
elevation: 0, |
|
||||||
hoverElevation: widget.hoverElevation, |
|
||||||
highlightElevation: widget.hoverElevation, |
|
||||||
onPressed: () { |
|
||||||
_showMenu(); |
|
||||||
widget.afterButtonPressed?.call(); |
|
||||||
}, |
|
||||||
child: _buildContent(context), |
|
||||||
), |
|
||||||
), |
|
||||||
); |
|
||||||
} |
|
||||||
|
|
||||||
Future<void> _showMenu() async { |
|
||||||
final popupMenuTheme = PopupMenuTheme.of(context); |
|
||||||
final button = context.findRenderObject() as RenderBox; |
|
||||||
final overlay = Overlay.of(context).context.findRenderObject() as RenderBox; |
|
||||||
final position = RelativeRect.fromRect( |
|
||||||
Rect.fromPoints( |
|
||||||
button.localToGlobal(Offset.zero, ancestor: overlay), |
|
||||||
button.localToGlobal(button.size.bottomLeft(Offset.zero), |
|
||||||
ancestor: overlay), |
|
||||||
), |
|
||||||
Offset.zero & overlay.size, |
|
||||||
); |
|
||||||
final newValue = await showMenu<String>( |
|
||||||
context: context, |
|
||||||
elevation: 4, |
|
||||||
items: [ |
|
||||||
for (final MapEntry<String, String> fontSize |
|
||||||
in widget.rawItemsMap.entries) |
|
||||||
PopupMenuItem<String>( |
|
||||||
key: ValueKey(fontSize.key), |
|
||||||
value: fontSize.value, |
|
||||||
height: widget.itemHeight ?? kMinInteractiveDimension, |
|
||||||
padding: widget.itemPadding, |
|
||||||
child: Text( |
|
||||||
fontSize.key.toString(), |
|
||||||
style: TextStyle( |
|
||||||
color: fontSize.value == '0' ? widget.defaultItemColor : null, |
|
||||||
), |
|
||||||
), |
|
||||||
), |
|
||||||
], |
|
||||||
position: position, |
|
||||||
shape: popupMenuTheme.shape, |
|
||||||
color: popupMenuTheme.color, |
|
||||||
); |
|
||||||
if (!mounted) return; |
|
||||||
if (newValue == null) { |
|
||||||
return; |
|
||||||
} |
|
||||||
final keyName = _getKeyName(newValue); |
|
||||||
setState(() { |
|
||||||
_currentValue = keyName ?? _defaultDisplayText; |
|
||||||
if (keyName != null) { |
|
||||||
widget.controller.formatSelection(Attribute.fromKeyValue( |
|
||||||
'size', newValue == '0' ? null : getFontSize(newValue))); |
|
||||||
widget.onSelected?.call(newValue); |
|
||||||
} |
|
||||||
}); |
|
||||||
} |
|
||||||
|
|
||||||
Widget _buildContent(BuildContext context) { |
|
||||||
final theme = Theme.of(context); |
|
||||||
final hasFinalWidth = widget.width != null; |
|
||||||
return Padding( |
|
||||||
padding: widget.padding ?? const EdgeInsets.fromLTRB(10, 0, 0, 0), |
|
||||||
child: Row( |
|
||||||
mainAxisSize: !hasFinalWidth ? MainAxisSize.min : MainAxisSize.max, |
|
||||||
mainAxisAlignment: MainAxisAlignment.spaceBetween, |
|
||||||
children: [ |
|
||||||
UtilityWidgets.maybeWidget( |
|
||||||
enabled: hasFinalWidth, |
|
||||||
wrapper: (child) => Expanded(child: child), |
|
||||||
child: Text( |
|
||||||
_currentValue, |
|
||||||
overflow: widget.labelOverflow, |
|
||||||
style: widget.style ?? |
|
||||||
TextStyle( |
|
||||||
fontSize: widget.iconSize / 1.15, |
|
||||||
color: widget.iconTheme?.iconUnselectedColor ?? |
|
||||||
theme.iconTheme.color, |
|
||||||
), |
|
||||||
), |
|
||||||
), |
|
||||||
const SizedBox(width: 3), |
|
||||||
Icon( |
|
||||||
Icons.arrow_drop_down, |
|
||||||
size: widget.iconSize / 1.15, |
|
||||||
color: |
|
||||||
widget.iconTheme?.iconUnselectedColor ?? theme.iconTheme.color, |
|
||||||
) |
|
||||||
], |
|
||||||
), |
|
||||||
); |
|
||||||
} |
|
||||||
} |
|
||||||
Loading…
Reference in new issue