Style custom toolbar buttons like builtins (singerdmx#1267)

Author: richardmarshall

lib/src/widgets/toolbar.dart

@@ -11,13 +11,13 @@ import 'embeds.dart';
 import 'toolbar/arrow_indicated_button_list.dart';
 import 'toolbar/clear_format_button.dart';
 import 'toolbar/color_button.dart';
+import 'toolbar/custom_button.dart';
 import 'toolbar/enum.dart';
 import 'toolbar/history_button.dart';
 import 'toolbar/indent_button.dart';
 import 'toolbar/link_style_button.dart';
 import 'toolbar/quill_font_family_button.dart';
 import 'toolbar/quill_font_size_button.dart';
-import 'toolbar/quill_icon_button.dart';
 import 'toolbar/search_button.dart';
 import 'toolbar/select_alignment_button.dart';
 import 'toolbar/select_header_style_button.dart';
@@ -26,6 +26,7 @@ import 'toolbar/toggle_style_button.dart';
 
 export 'toolbar/clear_format_button.dart';
 export 'toolbar/color_button.dart';
+export 'toolbar/custom_button.dart';
 export 'toolbar/history_button.dart';
 export 'toolbar/indent_button.dart';
 export 'toolbar/link_style_button.dart';
@@ -566,19 +567,14 @@ class QuillToolbar extends StatelessWidget implements PreferredSizeWidget {
             QuillDivider(axis,
                 color: sectionDividerColor, space: sectionDividerSpace),
         for (var customButton in customButtons)
-          QuillIconButton(
-            highlightElevation: 0,
-            hoverElevation: 0,
-            size: toolbarIconSize * kIconButtonFactor,
-            icon: Icon(
-              customButton.icon,
-              size: toolbarIconSize,
-              color: customButton.iconColor,
-            ),
-            tooltip: customButton.tooltip,
-            borderRadius: iconTheme?.borderRadius ?? 2,
+          CustomButton(
             onPressed: customButton.onTap,
-            afterPressed: afterButtonPressed,
+            icon: customButton.icon,
+            iconColor: customButton.iconColor,
+            iconSize: toolbarIconSize,
+            iconTheme: iconTheme,
+            afterButtonPressed: afterButtonPressed,
+            tooltip: customButton.tooltip,
           ),
       ],
     );
@@ -650,7 +646,7 @@ class QuillToolbar extends StatelessWidget implements PreferredSizeWidget {
 /// The divider which is used for separation of buttons in the toolbar.
 ///
 /// It can be used outside of this package, for example when user does not use
-/// [QuillToolbar.basic] and compose toolbat's children on its own.
+/// [QuillToolbar.basic] and compose toolbar's children on its own.
 class QuillDivider extends StatelessWidget {
   const QuillDivider(
     this.axis, {
@@ -659,11 +655,11 @@ class QuillDivider extends StatelessWidget {
     this.space,
   }) : super(key: key);
 
-  /// Provides a horizonal divider for vertical toolbar.
+  /// Provides a horizontal divider for vertical toolbar.
   const QuillDivider.horizontal({Color? color, double? space})
       : this(Axis.horizontal, color: color, space: space);
 
-  /// Provides a horizonal divider for horizontal toolbar.
+  /// Provides a horizontal divider for horizontal toolbar.
   const QuillDivider.vertical({Color? color, double? space})
       : this(Axis.vertical, color: color, space: space);
 

lib/src/widgets/toolbar/custom_button.dart

@@ -0,0 +1,43 @@
+import 'package:flutter/material.dart';
+
+import '../../models/themes/quill_icon_theme.dart';
+import '../toolbar.dart';
+
+class CustomButton extends StatelessWidget {
+  const CustomButton({
+    required this.onPressed,
+    required this.icon,
+    this.iconColor,
+    this.iconSize = kDefaultIconSize,
+    this.iconTheme,
+    this.afterButtonPressed,
+    this.tooltip,
+    Key? key,
+  }) : super(key: key);
+
+  final VoidCallback? onPressed;
+  final IconData? icon;
+  final Color? iconColor;
+  final double iconSize;
+  final QuillIconTheme? iconTheme;
+  final VoidCallback? afterButtonPressed;
+  final String? tooltip;
+
+  @override
+  Widget build(BuildContext context) {
+    final theme = Theme.of(context);
+
+    final iconColor = iconTheme?.iconUnselectedColor ?? theme.iconTheme.color;
+    return QuillIconButton(
+      highlightElevation: 0,
+      hoverElevation: 0,
+      size: iconSize * kIconButtonFactor,
+      icon: Icon(icon, size: iconSize, color: iconColor),
+      tooltip: tooltip,
+      borderRadius: iconTheme?.borderRadius ?? 2,
+      onPressed: onPressed,
+      afterPressed: afterButtonPressed,
+      fillColor: iconTheme?.iconUnselectedFillColor ?? theme.canvasColor,
+    );
+  }
+}

lib/src/widgets/toolbar/history_button.dart

@@ -46,7 +46,7 @@ class _HistoryButtonState extends State<HistoryButton> {
       tooltip: widget.tooltip,
       highlightElevation: 0,
       hoverElevation: 0,
-      size: widget.iconSize * 1.77,
+      size: widget.iconSize * kIconButtonFactor,
       icon: Icon(widget.icon, size: widget.iconSize, color: _iconColor),
       fillColor: fillColor,
       borderRadius: widget.iconTheme?.borderRadius ?? 2,

lib/src/widgets/toolbar/indent_button.dart

@@ -42,7 +42,7 @@ class _IndentButtonState extends State<IndentButton> {
       tooltip: widget.tooltip,
       highlightElevation: 0,
       hoverElevation: 0,
-      size: widget.iconSize * 1.77,
+      size: widget.iconSize * kIconButtonFactor,
       icon: Icon(widget.icon, size: widget.iconSize, color: iconColor),
       fillColor: iconFillColor,
       borderRadius: widget.iconTheme?.borderRadius ?? 2,

lib/src/widgets/toolbar/search_button.dart

@@ -43,7 +43,7 @@ class SearchButton extends StatelessWidget {
       icon: Icon(icon, size: iconSize, color: iconColor),
       highlightElevation: 0,
       hoverElevation: 0,
-      size: iconSize * 1.77,
+      size: iconSize * kIconButtonFactor,
       fillColor: iconFillColor,
       borderRadius: iconTheme?.borderRadius ?? 2,
       onPressed: () => _onPressedHandler(context),

test/bug_fix_test.dart

@@ -5,6 +5,41 @@ import 'package:flutter_test/flutter_test.dart';
 
 void main() {
   group('Bug fix', () {
+    group(
+        '1266 - QuillToolbar.basic() custom buttons do not have correct fill'
+        'color set', () {
+      testWidgets('fillColor of custom buttons and builtin buttons match',
+          (tester) async {
+        const tooltip = 'custom button';
+
+        await tester.pumpWidget(MaterialApp(
+            home: QuillToolbar.basic(
+          showRedo: false,
+          controller: QuillController.basic(),
+          customButtons: [const QuillCustomButton(tooltip: tooltip)],
+        )));
+
+        final builtinFinder = find.descendant(
+            of: find.byType(HistoryButton),
+            matching: find.byType(QuillIconButton),
+            matchRoot: true);
+        expect(builtinFinder, findsOneWidget);
+        final builtinButton =
+            builtinFinder.evaluate().first.widget as QuillIconButton;
+
+        final customFinder = find.descendant(
+            of: find.byType(QuillToolbar),
+            matching: find.byWidgetPredicate((widget) =>
+                widget is QuillIconButton && widget.tooltip == tooltip),
+            matchRoot: true);
+        expect(customFinder, findsOneWidget);
+        final customButton =
+            customFinder.evaluate().first.widget as QuillIconButton;
+
+        expect(customButton.fillColor, equals(builtinButton.fillColor));
+      });
+    });
+
     group('1189 - The provided text position is not in the current node', () {
       late QuillController controller;
       late QuillEditor editor;