Feature/change icon button data (#1634)

* Add a way to change almost properties of IconButton in QuillIconTheme for both selected and unselected state

---------

Co-authored-by: Ellet <ellet@freshplatform.net>

CHANGELOG.md

@@ -2,6 +2,9 @@
 
 All notable changes to this project will be documented in this file.
 
+## 9.1.0
+* Fix the simple toolbar by add properties of `IconButton` and fix some buttons
+
 ## 9.1.0-dev.2
 * Fix the history buttons
 

example/lib/presentation/quill/my_quill_toolbar.dart

@@ -202,6 +202,24 @@ class MyQuillToolbar extends StatelessWidget {
             controller: controller,
             showAlignmentButtons: true,
             multiRowsDisplay: true,
+            buttonOptions: QuillSimpleToolbarButtonOptions(
+              base: QuillToolbarBaseButtonOptions(
+                  afterButtonPressed: focusNode.requestFocus
+                  // globalIconSize: 20,
+                  // iconTheme: QuillIconTheme(
+                  //   iconButtonSelectedData: IconButtonData(
+                  //     style: IconButton.styleFrom(
+                  //       foregroundColor: Colors.amberAccent,
+                  //     ),
+                  //   ),
+                  //   iconButtonUnselectedData: IconButtonData(
+                  //     style: IconButton.styleFrom(
+                  //       foregroundColor: Colors.amberAccent,
+                  //     ),
+                  //   ),
+                  // ),
+                  ),
+            ),
             customButtons: [
               QuillToolbarCustomButtonOptions(
                 icon: const Icon(Icons.add_alarm_rounded),

flutter_quill_extensions/lib/embeds/formula/toolbar/formula_button.dart

@@ -94,6 +94,7 @@ class QuillToolbarFormulaButton extends StatelessWidget {
       tooltip: tooltip,
       onPressed: () => _sharedOnPressed(context),
       isSelected: false,
+      iconTheme: iconTheme,
     );
   }
 

flutter_quill_extensions/lib/embeds/image/toolbar/image_button.dart

@@ -104,8 +104,7 @@ class QuillToolbarImageButton extends StatelessWidget {
       tooltip: tooltip,
       isSelected: false,
       onPressed: () => _sharedOnPressed(context),
-      iconSelectedStyle: _iconTheme(context)?.iconButtonSelectedStyle,
+      iconTheme: _iconTheme(context),
-      iconUnselectedStyle: _iconTheme(context)?.iconButtonUnselectedStyle,
     );
   }
 

flutter_quill_extensions/lib/embeds/others/camera_button/camera_button.dart

@@ -112,8 +112,7 @@ class QuillToolbarCameraButton extends StatelessWidget {
       isSelected: false,
       // isDesktop(supportWeb: false) ? null :
       onPressed: () => _sharedOnPressed(context),
-      iconSelectedStyle: iconTheme?.iconButtonSelectedStyle,
+      iconTheme: iconTheme,
-      iconUnselectedStyle: iconTheme?.iconButtonUnselectedStyle,
     );
   }
 

flutter_quill_extensions/lib/embeds/video/toolbar/video_button.dart

@@ -109,8 +109,7 @@ class QuillToolbarVideoButton extends StatelessWidget {
       tooltip: tooltip,
       isSelected: false,
       onPressed: () => _sharedOnPressed(context),
-      iconSelectedStyle: _iconTheme(context)?.iconButtonSelectedStyle,
+      iconTheme: _iconTheme(context),
-      iconUnselectedStyle: _iconTheme(context)?.iconButtonUnselectedStyle,
     );
   }
 

lib/src/models/themes/quill_icon_theme.dart

@@ -1,21 +1,121 @@
+// ignore_for_file: public_member_api_docs, sort_constructors_first
 import 'package:flutter/material.dart';
 
 @immutable
 class QuillIconTheme {
   const QuillIconTheme({
-    this.padding,
     this.iconButtonSelectedStyle,
     this.iconButtonUnselectedStyle,
-    // this.iconSelectedFillColor,
+    this.iconButtonSelectedData,
-    // this.iconUnselectedFillColor,
+    this.iconButtonUnselectedData,
   });
 
+  @Deprecated('Please use iconButtonUnselectedData instead')
   final ButtonStyle? iconButtonUnselectedStyle;
+  @Deprecated('Please use iconButtonSelectedData instead')
   final ButtonStyle? iconButtonSelectedStyle;
 
-  // final Color? iconSelectedFillColor;
+  final IconButtonData? iconButtonUnselectedData;
-  // final Color? iconUnselectedFillColor;
+  final IconButtonData? iconButtonSelectedData;
+
+  QuillIconTheme copyWith({
+    IconButtonData? iconButtonUnselectedData,
+    IconButtonData? iconButtonSelectedData,
+  }) {
+    return QuillIconTheme(
+      iconButtonUnselectedData:
+          iconButtonUnselectedData ?? this.iconButtonUnselectedData,
+      iconButtonSelectedData:
+          iconButtonSelectedData ?? this.iconButtonSelectedData,
+    );
+  }
+}
+
+@immutable
+class IconButtonData {
+  const IconButtonData({
+    this.iconSize,
+    this.visualDensity,
+    this.padding,
+    this.alignment,
+    this.splashRadius,
+    this.color,
+    this.focusColor,
+    this.hoverColor,
+    this.highlightColor,
+    this.splashColor,
+    this.disabledColor,
+    this.mouseCursor,
+    this.autofocus = false,
+    this.tooltip,
+    this.enableFeedback,
+    this.constraints,
+    this.style,
+    this.isSelected,
+    this.selectedIcon,
+  });
+
+  final double? iconSize;
+  final VisualDensity? visualDensity;
+  final EdgeInsetsGeometry? padding;
+  final AlignmentGeometry? alignment;
+  final double? splashRadius;
+  final Color? color;
+  final Color? focusColor;
+  final Color? hoverColor;
+  final Color? highlightColor;
+  final Color? splashColor;
+  final Color? disabledColor;
+  final MouseCursor? mouseCursor;
+  final bool autofocus;
+  final String? tooltip;
+  final bool? enableFeedback;
+  final BoxConstraints? constraints;
+  final ButtonStyle? style;
+  final bool? isSelected;
+  final Widget? selectedIcon;
 
-  ///The padding for icons
+  IconButtonData copyWith({
-  final EdgeInsets? padding;
+    double? iconSize,
+    VisualDensity? visualDensity,
+    EdgeInsetsGeometry? padding,
+    AlignmentGeometry? alignment,
+    double? splashRadius,
+    Color? color,
+    Color? focusColor,
+    Color? hoverColor,
+    Color? highlightColor,
+    Color? splashColor,
+    Color? disabledColor,
+    MouseCursor? mouseCursor,
+    bool? autofocus,
+    String? tooltip,
+    bool? enableFeedback,
+    BoxConstraints? constraints,
+    ButtonStyle? style,
+    bool? isSelected,
+    Widget? selectedIcon,
+  }) {
+    return IconButtonData(
+      iconSize: iconSize ?? this.iconSize,
+      visualDensity: visualDensity ?? this.visualDensity,
+      padding: padding ?? this.padding,
+      alignment: alignment ?? this.alignment,
+      splashRadius: splashRadius ?? this.splashRadius,
+      color: color ?? this.color,
+      focusColor: focusColor ?? this.focusColor,
+      hoverColor: hoverColor ?? this.hoverColor,
+      highlightColor: highlightColor ?? this.highlightColor,
+      splashColor: splashColor ?? this.splashColor,
+      disabledColor: disabledColor ?? this.disabledColor,
+      mouseCursor: mouseCursor ?? this.mouseCursor,
+      autofocus: autofocus ?? this.autofocus,
+      tooltip: tooltip ?? this.tooltip,
+      enableFeedback: enableFeedback ?? this.enableFeedback,
+      constraints: constraints ?? this.constraints,
+      style: style ?? this.style,
+      isSelected: isSelected ?? this.isSelected,
+      selectedIcon: selectedIcon ?? this.selectedIcon,
+    );
+  }
 }

lib/src/widgets/toolbar/buttons/clear_format_button.dart

@@ -114,7 +114,7 @@ class QuillToolbarClearFormatButton extends StatelessWidget {
       isSelected: false,
       onPressed: _sharedOnPressed,
       afterPressed: afterButtonPressed,
-      iconUnselectedStyle: iconTheme?.iconButtonUnselectedStyle,
+      iconTheme: iconTheme,
     );
   }
 }

lib/src/widgets/toolbar/buttons/color/color_button.dart

@@ -193,12 +193,14 @@ class QuillToolbarColorButtonState extends State<QuillToolbarColorButton> {
       );
     }
 
-    return IconButton(
+    return QuillToolbarIconButton(
       tooltip: tooltip,
-      iconSize: iconSize * iconButtonFactor,
+      isSelected: false,
+      iconTheme: iconTheme,
       icon: Icon(
         iconData,
         color: widget.isBackground ? iconColorBackground : iconColor,
+        size: iconSize * iconButtonFactor,
       ),
       onPressed: _showColorPicker,
     );

lib/src/widgets/toolbar/buttons/custom_button_button.dart

@@ -85,6 +85,7 @@ class QuillToolbarCustomButton extends StatelessWidget {
       tooltip: tooltip,
       onPressed: () => _onPressed(context),
       afterPressed: afterButtonPressed,
+      iconTheme: iconTheme,
     );
   }
 }

lib/src/widgets/toolbar/buttons/font_family_button.dart

@@ -190,10 +190,16 @@ class QuillToolbarFontFamilyButtonState
                 child: _buildContent(context),
               );
             }
-            return IconButton(
+            return QuillToolbarIconButton(
-              // tooltip: , // TODO: Use this here
+              isSelected: false,
-              visualDensity: VisualDensity.compact,
+              iconTheme: iconTheme?.copyWith(
-              style: iconTheme?.iconButtonUnselectedStyle,
+                iconButtonSelectedData: const IconButtonData(
+                  visualDensity: VisualDensity.compact,
+                ),
+                iconButtonUnselectedData: const IconButtonData(
+                  visualDensity: VisualDensity.compact,
+                ),
+              ),
               onPressed: _onPressed,
               icon: _buildContent(context),
             );

lib/src/widgets/toolbar/buttons/font_size_button.dart

@@ -1,13 +1,14 @@
 import 'package:flutter/material.dart';
 
 import '../../../../extensions.dart';
+
 import '../../../extensions/quill_configurations_ext.dart';
 import '../../../l10n/extensions/localizations.dart';
-import '../../../models/config/quill_configurations.dart';
 import '../../../models/documents/attribute.dart';
 import '../../../models/themes/quill_icon_theme.dart';
 import '../../../utils/font.dart';
 import '../../quill/quill_controller.dart';
+import '../base_toolbar.dart';
 
 class QuillToolbarFontSizeButton extends StatefulWidget {
   QuillToolbarFontSizeButton({
@@ -150,10 +151,17 @@ class QuillToolbarFontSizeButtonState
               child: _buildContent(context),
             );
           }
-          return IconButton(
+          return QuillToolbarIconButton(
             tooltip: tooltip,
-            visualDensity: VisualDensity.compact,
+            isSelected: false,
-            style: iconTheme?.iconButtonUnselectedStyle,
+            iconTheme: iconTheme?.copyWith(
+              iconButtonSelectedData: const IconButtonData(
+                visualDensity: VisualDensity.compact,
+              ),
+              iconButtonUnselectedData: const IconButtonData(
+                visualDensity: VisualDensity.compact,
+              ),
+            ),
             onPressed: _onPressed,
             icon: _buildContent(context),
           );

lib/src/widgets/toolbar/buttons/hearder_style/select_header_style_buttons.dart

@@ -155,12 +155,17 @@ class QuillToolbarSelectHeaderStyleButtonsState
             width: iconSize * iconButtonFactor,
             height: iconSize * iconButtonFactor,
           ),
-          child: IconButton(
+          child: QuillToolbarIconButton(
             tooltip: tooltip,
-            visualDensity: VisualDensity.compact,
+            iconTheme: iconTheme?.copyWith(
-            style: isSelected
+              iconButtonSelectedData: const IconButtonData(
-                ? iconTheme?.iconButtonSelectedStyle
+                visualDensity: VisualDensity.compact,
-                : iconTheme?.iconButtonUnselectedStyle,
+              ),
+              iconButtonUnselectedData: const IconButtonData(
+                visualDensity: VisualDensity.compact,
+              ),
+            ),
+            isSelected: isSelected,
             onPressed: () => _sharedOnPressed(attribute),
             icon: Text(
               _valueToText[attribute] ??

lib/src/widgets/toolbar/buttons/history_button.dart

@@ -104,8 +104,7 @@ class QuillToolbarHistoryButtonState extends State<QuillToolbarHistoryButton> {
         size: iconSize * iconButtonFactor,
       ),
       isSelected: false,
-      iconSelectedStyle: iconTheme?.iconButtonSelectedStyle,
+      iconTheme: iconTheme,
-      iconUnselectedStyle: iconTheme?.iconButtonUnselectedStyle,
       onPressed: _canPressed ? _updateHistory : null,
       afterPressed: afterButtonPressed,
     );

lib/src/widgets/toolbar/buttons/indent_button.dart

@@ -116,8 +116,7 @@ class QuillToolbarIndentButtonState extends State<QuillToolbarIndentButton> {
       isSelected: false,
       onPressed: _sharedOnPressed,
       afterPressed: afterButtonPressed,
-      iconSelectedStyle: iconTheme?.iconButtonSelectedStyle,
+      iconTheme: iconTheme,
-      iconUnselectedStyle: iconTheme?.iconButtonUnselectedStyle,
     );
   }
 }

lib/src/widgets/toolbar/buttons/link_style2_button.dart

@@ -156,6 +156,7 @@ class _QuillToolbarLinkStyleButton2State
       ),
       isSelected: isToggled,
       onPressed: _openLinkDialog,
+      iconTheme: iconTheme,
       afterPressed: afterButtonPressed,
     );
   }

lib/src/widgets/toolbar/buttons/link_style_button.dart

@@ -149,6 +149,7 @@ class QuillToolbarLinkStyleButtonState
       isSelected: isToggled,
       onPressed: () => _openLinkDialog(context),
       afterPressed: afterButtonPressed,
+      iconTheme: iconTheme,
     );
   }
 

lib/src/widgets/toolbar/buttons/quill_icon_button.dart

@@ -1,16 +1,16 @@
 import 'package:flutter/material.dart';
 
+import '../../../models/themes/quill_icon_theme.dart';
+
 class QuillToolbarIconButton extends StatelessWidget {
   const QuillToolbarIconButton({
     required this.onPressed,
     required this.icon,
     required this.isSelected,
+    required this.iconTheme,
     this.afterPressed,
     this.tooltip,
-    this.padding,
     super.key,
-    this.iconSelectedStyle,
-    this.iconUnselectedStyle,
   });
 
   final VoidCallback? onPressed;
@@ -18,25 +18,37 @@ class QuillToolbarIconButton extends StatelessWidget {
   final Widget icon;
 
   final String? tooltip;
-  final EdgeInsets? padding;
   final bool isSelected;
 
-  final ButtonStyle? iconUnselectedStyle;
+  final QuillIconTheme? iconTheme;
-  final ButtonStyle? iconSelectedStyle;
   @override
   Widget build(BuildContext context) {
     if (isSelected) {
       return IconButton.filled(
         tooltip: tooltip,
-        padding: padding,
         onPressed: onPressed,
         icon: icon,
-        style: iconSelectedStyle,
+        style: iconTheme?.iconButtonSelectedData?.style,
+        visualDensity: iconTheme?.iconButtonSelectedData?.visualDensity,
+        iconSize: iconTheme?.iconButtonSelectedData?.iconSize,
+        padding: iconTheme?.iconButtonSelectedData?.padding,
+        alignment: iconTheme?.iconButtonSelectedData?.alignment,
+        splashRadius: iconTheme?.iconButtonSelectedData?.splashRadius,
+        color: iconTheme?.iconButtonSelectedData?.color,
+        focusColor: iconTheme?.iconButtonSelectedData?.focusColor,
+        hoverColor: iconTheme?.iconButtonSelectedData?.hoverColor,
+        highlightColor: iconTheme?.iconButtonSelectedData?.highlightColor,
+        splashColor: iconTheme?.iconButtonSelectedData?.splashColor,
+        disabledColor: iconTheme?.iconButtonSelectedData?.disabledColor,
+        mouseCursor: iconTheme?.iconButtonSelectedData?.mouseCursor,
+        autofocus: iconTheme?.iconButtonSelectedData?.autofocus ?? false,
+        enableFeedback: iconTheme?.iconButtonSelectedData?.enableFeedback,
+        constraints: iconTheme?.iconButtonSelectedData?.constraints,
+        selectedIcon: iconTheme?.iconButtonSelectedData?.selectedIcon,
       );
     }
     return IconButton(
       tooltip: tooltip,
-      padding: padding,
       onPressed: onPressed != null
           ? () {
               onPressed?.call();
@@ -44,7 +56,23 @@ class QuillToolbarIconButton extends StatelessWidget {
             }
           : null,
       icon: icon,
-      style: iconUnselectedStyle,
+      style: iconTheme?.iconButtonUnselectedData?.style,
+      visualDensity: iconTheme?.iconButtonUnselectedData?.visualDensity,
+      iconSize: iconTheme?.iconButtonUnselectedData?.iconSize,
+      padding: iconTheme?.iconButtonUnselectedData?.padding,
+      alignment: iconTheme?.iconButtonUnselectedData?.alignment,
+      splashRadius: iconTheme?.iconButtonUnselectedData?.splashRadius,
+      color: iconTheme?.iconButtonUnselectedData?.color,
+      focusColor: iconTheme?.iconButtonUnselectedData?.focusColor,
+      hoverColor: iconTheme?.iconButtonUnselectedData?.hoverColor,
+      highlightColor: iconTheme?.iconButtonUnselectedData?.highlightColor,
+      splashColor: iconTheme?.iconButtonUnselectedData?.splashColor,
+      disabledColor: iconTheme?.iconButtonUnselectedData?.disabledColor,
+      mouseCursor: iconTheme?.iconButtonUnselectedData?.mouseCursor,
+      autofocus: iconTheme?.iconButtonUnselectedData?.autofocus ?? false,
+      enableFeedback: iconTheme?.iconButtonUnselectedData?.enableFeedback,
+      constraints: iconTheme?.iconButtonUnselectedData?.constraints,
+      selectedIcon: iconTheme?.iconButtonUnselectedData?.selectedIcon,
     );
   }
 }

lib/src/widgets/toolbar/buttons/search/search_button.dart

@@ -122,6 +122,7 @@ class QuillToolbarSearchButton extends StatelessWidget {
       isSelected: false,
       onPressed: () => _sharedOnPressed(context),
       afterPressed: afterButtonPressed,
+      iconTheme: iconTheme,
     );
   }
 

lib/src/widgets/toolbar/buttons/toggle_style_button.dart

@@ -256,8 +256,6 @@ Widget defaultToggleStyleButtonBuilder(
     isSelected: isEnabled ? isToggled == true : false,
     onPressed: onPressed,
     afterPressed: afterPressed,
-    padding: iconTheme?.padding,
+    iconTheme: iconTheme,
-    iconUnselectedStyle: iconTheme?.iconButtonUnselectedStyle,
-    iconSelectedStyle: iconTheme?.iconButtonSelectedStyle,
   );
 }