diff --git a/CHANGELOG.md b/CHANGELOG.md index a2a037c6..9212a62b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,7 @@ +## [8.4.0] +- **Breaking change**: Update the `QuillCustomButton` to have `QuillCustomButtonOptions`. We moved everything that is in the `QuillCustomButton` to `QuillCustomButtonOptions` but replaced the `iconData` with `icon` widget for more customizations +- Bug fixes with the new `8.0.0` update + ## [8.3.0] - Added a `iconButtonFactor` property to `QuillToolbarBaseButtonOptions` to customise how big the button is compared to its icon size (defaults to `kIconButtonFactor` which is the same as previous releases) diff --git a/lib/src/models/config/toolbar/buttons/custom_button.dart b/lib/src/models/config/toolbar/buttons/custom_button.dart new file mode 100644 index 00000000..92c5180d --- /dev/null +++ b/lib/src/models/config/toolbar/buttons/custom_button.dart @@ -0,0 +1,33 @@ +import 'package:flutter/widgets.dart' show VoidCallback, Widget; + +import 'base.dart'; + +class QuillToolbarCustomButtonExtraOptions + extends QuillToolbarBaseButtonExtraOptions { + const QuillToolbarCustomButtonExtraOptions({ + required super.controller, + required super.context, + required super.onPressed, + }); +} + +class QuillToolbarCustomButtonOptions extends QuillToolbarBaseButtonOptions< + QuillToolbarBaseButtonOptions, QuillToolbarCustomButtonExtraOptions> { + const QuillToolbarCustomButtonOptions({ + this.icon, + this.iconButtonFactor, + this.iconSize, + super.iconData, + super.afterButtonPressed, + super.tooltip, + super.iconTheme, + super.childBuilder, + super.controller, + this.onPressed, + }); + + final double? iconButtonFactor; + final double? iconSize; + final VoidCallback? onPressed; + final Widget? icon; +} diff --git a/lib/src/models/config/toolbar/configurations.dart b/lib/src/models/config/toolbar/configurations.dart index 00412042..e19ca912 100644 --- a/lib/src/models/config/toolbar/configurations.dart +++ b/lib/src/models/config/toolbar/configurations.dart @@ -11,6 +11,7 @@ import '../../themes/quill_icon_theme.dart'; import 'buttons/base.dart'; import 'buttons/clear_format.dart'; import 'buttons/color.dart'; +import 'buttons/custom_button.dart'; import 'buttons/font_family.dart'; import 'buttons/font_size.dart'; import 'buttons/history.dart'; @@ -284,6 +285,7 @@ class QuillToolbarButtonOptions extends Equatable { this.selectHeaderStyleButtons = const QuillToolbarSelectHeaderStyleButtonsOptions(), this.linkStyle = const QuillToolbarLinkStyleButtonOptions(), + this.customButtons = const QuillToolbarCustomButtonOptions(), }); /// The base configurations for all the buttons which will apply to all @@ -329,6 +331,8 @@ class QuillToolbarButtonOptions extends Equatable { final QuillToolbarLinkStyleButtonOptions linkStyle; + final QuillToolbarCustomButtonOptions customButtons; + @override List get props => [ base, diff --git a/lib/src/models/themes/quill_custom_button.dart b/lib/src/models/themes/quill_custom_button.dart index da1eb06d..8e7dace1 100644 --- a/lib/src/models/themes/quill_custom_button.dart +++ b/lib/src/models/themes/quill_custom_button.dart @@ -4,23 +4,19 @@ import '../../widgets/toolbar/base_toolbar.dart'; class QuillCustomButton extends QuillToolbarBaseButtonOptions { const QuillCustomButton({ - super.iconData, - this.iconColor, + this.icon, this.onTap, super.tooltip, - this.iconSize, this.child, super.iconTheme, }); - ///The icon color; - final Color? iconColor; + /// The icon widget + final Widget? icon; - ///The function when the icon is tapped + /// The function when the icon is tapped final VoidCallback? onTap; - ///The customButton placeholder + /// The customButton placeholder final Widget? child; - - final double? iconSize; } diff --git a/lib/src/widgets/toolbar/buttons/custom_button.dart b/lib/src/widgets/toolbar/buttons/custom_button.dart index 741a6e7e..c3e81077 100644 --- a/lib/src/widgets/toolbar/buttons/custom_button.dart +++ b/lib/src/widgets/toolbar/buttons/custom_button.dart @@ -1,43 +1,93 @@ import 'package:flutter/material.dart'; +import '../../../models/config/toolbar/buttons/custom_button.dart'; import '../../../models/themes/quill_icon_theme.dart'; +import '../../../utils/extensions/build_context.dart'; +import '../../controller.dart'; import '../base_toolbar.dart'; -class CustomButton extends StatelessWidget { - const CustomButton({ - required this.onPressed, - required this.icon, - this.iconColor, - this.iconSize = kDefaultIconSize, - this.iconButtonFactor = kIconButtonFactor, - this.iconTheme, - this.afterButtonPressed, - this.tooltip, +class QuillToolbarCustomButton extends StatelessWidget { + const QuillToolbarCustomButton({ + required this.options, + required this.controller, super.key, }); - final VoidCallback? onPressed; - final IconData? icon; - final Color? iconColor; - final double iconSize; - final double iconButtonFactor; - final QuillIconTheme? iconTheme; - final VoidCallback? afterButtonPressed; - final String? tooltip; + final QuillController controller; + final QuillToolbarCustomButtonOptions options; + + double _iconSize(BuildContext context) { + final baseFontSize = baseButtonExtraOptions(context).globalIconSize; + final iconSize = options.iconSize; + return iconSize ?? baseFontSize; + } + + double _iconButtonFactor(BuildContext context) { + final baseIconFactor = + baseButtonExtraOptions(context).globalIconButtonFactor; + final iconButtonFactor = options.iconButtonFactor; + return iconButtonFactor ?? baseIconFactor; + } + + VoidCallback? _afterButtonPressed(BuildContext context) { + return options.afterButtonPressed ?? + baseButtonExtraOptions(context).afterButtonPressed; + } + + QuillIconTheme? _iconTheme(BuildContext context) { + return options.iconTheme ?? baseButtonExtraOptions(context).iconTheme; + } + + QuillToolbarBaseButtonOptions baseButtonExtraOptions(BuildContext context) { + return context.requireQuillToolbarBaseButtonOptions; + } + + String? _tooltip(BuildContext context) { + return options.tooltip ?? baseButtonExtraOptions(context).tooltip; + } + + void _onPressed(BuildContext context) { + options.onPressed?.call(); + _afterButtonPressed(context)?.call(); + } @override Widget build(BuildContext context) { - final theme = Theme.of(context); + final iconTheme = _iconTheme(context); + final tooltip = _tooltip(context); + final iconSize = _iconSize(context); + final iconButtonFactor = _iconButtonFactor(context); + + final childBuilder = + options.childBuilder ?? baseButtonExtraOptions(context).childBuilder; + final afterButtonPressed = _afterButtonPressed(context); - final iconColor = iconTheme?.iconUnselectedColor ?? theme.iconTheme.color; + if (childBuilder != null) { + return childBuilder( + QuillToolbarCustomButtonOptions( + iconButtonFactor: iconButtonFactor, + iconSize: iconSize, + afterButtonPressed: afterButtonPressed, + controller: controller, + iconTheme: iconTheme, + tooltip: tooltip, + icon: options.icon, + ), + QuillToolbarCustomButtonExtraOptions( + context: context, + controller: controller, + onPressed: () => _onPressed(context), + ), + ); + } + + final theme = Theme.of(context); return QuillToolbarIconButton( - highlightElevation: 0, - hoverElevation: 0, size: iconSize * iconButtonFactor, - icon: Icon(icon, size: iconSize, color: iconColor), + icon: options.icon, tooltip: tooltip, borderRadius: iconTheme?.borderRadius ?? 2, - onPressed: onPressed, + onPressed: () => _onPressed(context), afterPressed: afterButtonPressed, fillColor: iconTheme?.iconUnselectedFillColor ?? theme.canvasColor, ); diff --git a/lib/src/widgets/toolbar/toolbar.dart b/lib/src/widgets/toolbar/toolbar.dart index 6749f0b5..90edfad1 100644 --- a/lib/src/widgets/toolbar/toolbar.dart +++ b/lib/src/widgets/toolbar/toolbar.dart @@ -59,8 +59,6 @@ class QuillToolbar extends StatelessWidget { sectionDividerSpace: configurations.sectionDividerSpace, toolbarSize: configurations.toolbarSize, childrenBuilder: (context) { - final controller = context.requireQuillController; - final toolbarConfigurations = context.requireQuillToolbarConfigurations; @@ -192,7 +190,9 @@ class QuillToolbar extends StatelessWidget { ], if (configurations.showColorButton) ...[ QuillToolbarColorButton( - controller: controller, + controller: + toolbarConfigurations.buttonOptions.color.controller ?? + globalController, isBackground: false, options: toolbarConfigurations.buttonOptions.color, ), @@ -201,14 +201,18 @@ class QuillToolbar extends StatelessWidget { if (configurations.showBackgroundColorButton) ...[ QuillToolbarColorButton( options: toolbarConfigurations.buttonOptions.backgroundColor, - controller: controller, + controller: + toolbarConfigurations.buttonOptions.color.controller ?? + globalController, isBackground: true, ), spacerWidget, ], if (configurations.showClearFormat) ...[ QuillToolbarClearFormatButton( - controller: controller, + controller: toolbarConfigurations + .buttonOptions.clearFormat.controller ?? + globalController, options: toolbarConfigurations.buttonOptions.clearFormat, ), spacerWidget, @@ -216,7 +220,7 @@ class QuillToolbar extends StatelessWidget { if (theEmbedButtons != null) for (final builder in theEmbedButtons) builder( - controller, + globalController, globalIconSize, context.requireQuillToolbarBaseButtonOptions.iconTheme, configurations.dialogTheme), @@ -234,7 +238,9 @@ class QuillToolbar extends StatelessWidget { ), if (configurations.showAlignmentButtons) ...[ QuillToolbarSelectAlignmentButton( - controller: controller, + controller: toolbarConfigurations + .buttonOptions.selectAlignmentButtons.controller ?? + globalController, options: toolbarConfigurations .buttonOptions.selectAlignmentButtons, // tooltips: Map.of(buttonTooltips) @@ -274,7 +280,9 @@ class QuillToolbar extends StatelessWidget { ), if (configurations.showHeaderStyle) ...[ QuillToolbarSelectHeaderStyleButtons( - controller: controller, + controller: toolbarConfigurations + .buttonOptions.selectHeaderStyleButtons.controller ?? + globalController, options: toolbarConfigurations .buttonOptions.selectHeaderStyleButtons, ), @@ -379,14 +387,18 @@ class QuillToolbar extends StatelessWidget { ), if (configurations.showLink) ...[ QuillToolbarLinkStyleButton( - controller: controller, + controller: toolbarConfigurations + .buttonOptions.linkStyle.controller ?? + globalController, options: toolbarConfigurations.buttonOptions.linkStyle, ), spacerWidget, ], if (configurations.showSearchButton) ...[ QuillToolbarSearchButton( - controller: controller, + controller: + toolbarConfigurations.buttonOptions.search.controller ?? + globalController, options: toolbarConfigurations.buttonOptions.search, ), spacerWidget, @@ -405,19 +417,12 @@ class QuillToolbar extends StatelessWidget { child: customButton.child, ), ] else ...[ - CustomButton( - onPressed: customButton.onTap, - icon: customButton.iconData ?? - context.quillToolbarBaseButtonOptions?.iconData, - iconColor: customButton.iconColor, - iconSize: customButton.iconSize ?? globalIconSize, - iconTheme: context - .requireQuillToolbarBaseButtonOptions.iconTheme, - afterButtonPressed: customButton.afterButtonPressed ?? - context.quillToolbarBaseButtonOptions - ?.afterButtonPressed, - tooltip: customButton.tooltip ?? - context.quillToolbarBaseButtonOptions?.tooltip, + QuillToolbarCustomButton( + options: + toolbarConfigurations.buttonOptions.customButtons, + controller: toolbarConfigurations + .buttonOptions.customButtons.controller ?? + globalController, ), ], spacerWidget, diff --git a/pubspec.yaml b/pubspec.yaml index 2eb967b1..8cbbdbc7 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -1,6 +1,6 @@ name: flutter_quill description: A rich text editor built for the modern Android, iOS, web and desktop platforms. It is the WYSIWYG editor and a Quill component for Flutter. -version: 8.3.0 +version: 8.4.0 homepage: https://1o24bbs.com/c/bulletjournal/108 repository: https://github.com/singerdmx/flutter-quill