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/widgets.dart' show IconData; |
||||
import 'package:flutter/widgets.dart' show Color; |
||||
|
||||
import 'base.dart'; |
||||
|
||||
class QuillToolbarToggleStyleButtonExtraOptions |
||||
extends QuillToolbarBaseButtonExtraOptions { |
||||
const QuillToolbarToggleStyleButtonExtraOptions({ |
||||
required super.controller, |
||||
required super.context, |
||||
required super.onPressed, |
||||
}); |
||||
} |
||||
|
||||
@immutable |
||||
class QuillToolbarToggleStyleButtonOptions |
||||
extends QuillToolbarBaseButtonOptions { |
||||
extends QuillToolbarBaseButtonOptions<QuillToolbarToggleStyleButtonOptions, |
||||
QuillToolbarToggleStyleButtonExtraOptions> { |
||||
const QuillToolbarToggleStyleButtonOptions({ |
||||
required this.iconData, |
||||
super.iconData, |
||||
this.iconSize, |
||||
this.fillColor, |
||||
super.tooltip, |
||||
super.afterButtonPressed, |
||||
super.iconTheme, |
||||
super.childBuilder, |
||||
super.controller, |
||||
}); |
||||
|
||||
@override |
||||
final IconData iconData; |
||||
final double? iconSize; |
||||
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