Update QuillCustomButton

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)
 

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;
+}

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<Object?> get props => [
         base,

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
   final VoidCallback? onTap;
 
   /// The customButton placeholder
   final Widget? child;
-
-  final double? iconSize;
 }

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,
     );

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,

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