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 <[email protected]>

Author: EchoEllet

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,
-      iconUnselectedStyle: _iconTheme(context)?.iconButtonUnselectedStyle,
+      iconTheme: _iconTheme(context),
     );
   }
 

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,
-      iconUnselectedStyle: iconTheme?.iconButtonUnselectedStyle,
+      iconTheme: iconTheme,
     );
   }
 

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,
-      iconUnselectedStyle: _iconTheme(context)?.iconButtonUnselectedStyle,
+      iconTheme: _iconTheme(context),
     );
   }
 

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.iconUnselectedFillColor,
+    this.iconButtonSelectedData,
+    this.iconButtonUnselectedData,
   });
 
+  @Deprecated('Please use iconButtonUnselectedData instead')
   final ButtonStyle? iconButtonUnselectedStyle;
+  @Deprecated('Please use iconButtonSelectedData instead')
   final ButtonStyle? iconButtonSelectedStyle;
 
-  // final Color? iconSelectedFillColor;
-  // final Color? iconUnselectedFillColor;
+  final IconButtonData? iconButtonUnselectedData;
+  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
-  final EdgeInsets? padding;
+  IconButtonData copyWith({
+    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,
     );
   }
 }