feat: allow customising iconButtonFactor

doc/migration.md

@@ -79,10 +79,14 @@ All the options have parent `QuillToolbarBaseButtonOptions` which have common th
   final IconData? iconData;
 
   /// To change the icon size pass a different value, by default will be
-  /// [kDefaultIconSize]
+  /// [kDefaultIconSize].
   /// This will be used for all the buttons but you can override this
   final double globalIconSize;
 
+  /// The factor of how much larger the button is in relation to the icon,
+  /// by default it will be [kIconButtonFactor].
+  final double globalIconButtonFactor;
+
   /// To do extra logic after pressing the button
   final VoidCallback? afterButtonPressed;
 

lib/src/models/config/toolbar/buttons/base.dart

@@ -5,7 +5,7 @@ import 'package:flutter/widgets.dart' show BuildContext, IconData, Widget;
 
 import '../../../../../flutter_quill.dart' show QuillController, QuillProvider;
 import '../../../themes/quill_icon_theme.dart' show QuillIconTheme;
-import '../../quill_configurations.dart' show kDefaultIconSize;
+import '../../quill_configurations.dart' show kDefaultIconSize, kIconButtonFactor;
 
 @immutable
 class QuillToolbarBaseButtonExtraOptions extends Equatable {
@@ -38,6 +38,7 @@ class QuillToolbarBaseButtonOptions<T, I> extends Equatable {
   const QuillToolbarBaseButtonOptions({
     this.iconData,
     this.globalIconSize = kDefaultIconSize,
+    this.globalIconButtonFactor = kIconButtonFactor,
     this.afterButtonPressed,
     this.tooltip,
     this.iconTheme,
@@ -51,10 +52,14 @@ class QuillToolbarBaseButtonOptions<T, I> extends Equatable {
   final IconData? iconData;
 
   /// To change the the icon size pass a different value, by default will be
-  /// [kDefaultIconSize]
+  /// [kDefaultIconSize].
   /// this will be used for all the buttons but you can override this
   final double globalIconSize;
 
+  /// The factor of how much larger the button is in relation to the icon,
+  /// by default it will be [kIconButtonFactor].
+  final double globalIconButtonFactor;
+
   /// To do extra logic after pressing the button
   final VoidCallback? afterButtonPressed;
 

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

@@ -27,6 +27,12 @@ class QuillToolbarClearFormatButton extends StatelessWidget {
     return iconSize ?? baseFontSize;
   }
 
+  double _iconButtonFactor(BuildContext context) {
+    final baseIconFactor = baseButtonExtraOptions(context).iconButtonFactor;
+    final iconButtonFactor = options.iconButtonFactor;
+    return iconButtonFactor ?? baseIconFactor;
+  }
+
   VoidCallback? _afterButtonPressed(BuildContext context) {
     return options.afterButtonPressed ??
         baseButtonExtraOptions(context).afterButtonPressed;
@@ -69,6 +75,7 @@ class QuillToolbarClearFormatButton extends StatelessWidget {
     final iconTheme = _iconTheme(context);
     final tooltip = _tooltip(context);
     final iconSize = _iconSize(context);
+    final iconButtonFactor = _iconButtonFactor(context);
     final iconData = _iconData(context);
 
     final childBuilder =
@@ -105,7 +112,7 @@ class QuillToolbarClearFormatButton extends StatelessWidget {
       tooltip: tooltip,
       highlightElevation: 0,
       hoverElevation: 0,
-      size: iconSize * kIconButtonFactor,
+      size: iconSize * iconButtonFactor,
       icon: Icon(iconData, size: iconSize, color: iconColor),
       fillColor: fillColor,
       borderRadius: iconTheme?.borderRadius ?? 2,

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

@@ -108,6 +108,12 @@ class QuillToolbarColorButtonState extends State<QuillToolbarColorButton> {
     return iconSize ?? baseFontSize;
   }
 
+  double get iconButtonFactor {
+    final baseIconFactor = baseButtonExtraOptions.iconButtonFactor;
+    final iconButtonFactor = options.iconButtonFactor;
+    return iconButtonFactor ?? baseIconFactor;
+  }
+
   VoidCallback? get afterButtonPressed {
     return options.afterButtonPressed ??
         baseButtonExtraOptions.afterButtonPressed;
@@ -179,7 +185,7 @@ class QuillToolbarColorButtonState extends State<QuillToolbarColorButton> {
       tooltip: tooltip,
       highlightElevation: 0,
       hoverElevation: 0,
-      size: iconSize * kIconButtonFactor,
+      size: iconSize * iconButtonFactor,
       icon: Icon(iconData,
           size: iconSize,
           color: widget.isBackground ? iconColorBackground : iconColor),

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

@@ -1,5 +1,6 @@
 import 'package:flutter/material.dart';
 
+import '../../../models/config/toolbar/configurations.dart';
 import '../../../models/themes/quill_icon_theme.dart';
 import '../base_toolbar.dart';
 
@@ -9,6 +10,7 @@ class CustomButton extends StatelessWidget {
     required this.icon,
     this.iconColor,
     this.iconSize = kDefaultIconSize,
+    this.iconButtonFactor = kIconButtonFactor,
     this.iconTheme,
     this.afterButtonPressed,
     this.tooltip,
@@ -19,6 +21,7 @@ class CustomButton extends StatelessWidget {
   final IconData? icon;
   final Color? iconColor;
   final double iconSize;
+  final double iconButtonFactor;
   final QuillIconTheme? iconTheme;
   final VoidCallback? afterButtonPressed;
   final String? tooltip;
@@ -31,7 +34,7 @@ class CustomButton extends StatelessWidget {
     return QuillToolbarIconButton(
       highlightElevation: 0,
       hoverElevation: 0,
-      size: iconSize * kIconButtonFactor,
+      size: iconSize * iconButtonFactor,
       icon: Icon(icon, size: iconSize, color: iconColor),
       tooltip: tooltip,
       borderRadius: iconTheme?.borderRadius ?? 2,

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

@@ -60,7 +60,9 @@ class QuillToolbarHistoryButtonState extends State<QuillToolbarHistoryButton> {
     final childBuilder =
         options.childBuilder ?? baseButtonConfigurations.childBuilder;
     final iconSize = options.iconSize ??
-        context.requireQuillToolbarBaseButtonOptions.globalIconSize;
+        baseButtonConfigurations.globalIconSize;
+    final iconButtonFactor = options.iconButtonFactor ??
+        baseButtonConfigurations.iconButtonFactor;
     final iconTheme = options.iconTheme ?? baseButtonConfigurations.iconTheme;
 
     final afterButtonPressed = options.afterButtonPressed ??
@@ -96,7 +98,7 @@ class QuillToolbarHistoryButtonState extends State<QuillToolbarHistoryButton> {
       tooltip: tooltip,
       highlightElevation: 0,
       hoverElevation: 0,
-      size: iconSize * kIconButtonFactor,
+      size: iconSize * iconButtonFactor,
       icon: Icon(
         iconData,
         size: iconSize,

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

@@ -8,8 +8,7 @@ import '../../controller.dart';
 import '../base_toolbar.dart'
     show
         QuillToolbarBaseButtonOptions,
-        QuillToolbarIconButton,
-        kIconButtonFactor;
+        QuillToolbarIconButton;
 
 class QuillToolbarIndentButton extends StatefulWidget {
   const QuillToolbarIndentButton({
@@ -43,6 +42,12 @@ class QuillToolbarIndentButtonState extends State<QuillToolbarIndentButton> {
     return iconSize ?? baseFontSize;
   }
 
+  double get iconButtonFactor {
+    final baseIconFactor = baseButtonExtraOptions.iconButtonFactor;
+    final iconButtonFactor = options.iconButtonFactor;
+    return iconButtonFactor ?? baseIconFactor;
+  }
+
   VoidCallback? get afterButtonPressed {
     return options.afterButtonPressed ??
         baseButtonExtraOptions.afterButtonPressed;
@@ -107,7 +112,7 @@ class QuillToolbarIndentButtonState extends State<QuillToolbarIndentButton> {
       tooltip: tooltip,
       highlightElevation: 0,
       hoverElevation: 0,
-      size: iconSize * kIconButtonFactor,
+      size: iconSize * iconButtonFactor,
       icon: Icon(iconData, size: iconSize, color: iconColor),
       fillColor: iconFillColor,
       borderRadius: iconTheme?.borderRadius ?? 2,

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

@@ -67,6 +67,12 @@ class QuillToolbarLinkStyleButtonState
     return iconSize ?? baseFontSize;
   }
 
+  double get iconButtonFactor {
+    final baseIconFactor = baseButtonExtraOptions.iconButtonFactor;
+    final iconButtonFactor = options.iconButtonFactor;
+    return iconButtonFactor ?? baseIconFactor;
+  }
+
   VoidCallback? get afterButtonPressed {
     return options.afterButtonPressed ??
         baseButtonExtraOptions.afterButtonPressed;
@@ -134,7 +140,7 @@ class QuillToolbarLinkStyleButtonState
       tooltip: tooltip,
       highlightElevation: 0,
       hoverElevation: 0,
-      size: iconSize * kIconButtonFactor,
+      size: iconSize * iconButtonFactor,
       icon: Icon(
         iconData,
         size: iconSize,

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

@@ -75,6 +75,12 @@ class _QuillToolbarLinkStyleButton2State
     return iconSize ?? baseFontSize;
   }
 
+  double get iconButtonFactor {
+    final baseIconFactor = baseButtonExtraOptions.iconButtonFactor;
+    final iconButtonFactor = options.iconButtonFactor;
+    return iconButtonFactor ?? baseIconFactor;
+  }
+
   VoidCallback? get afterButtonPressed {
     return options.afterButtonPressed ??
         baseButtonExtraOptions.afterButtonPressed;
@@ -142,7 +148,7 @@ class _QuillToolbarLinkStyleButton2State
       tooltip: tooltip,
       highlightElevation: 0,
       hoverElevation: 0,
-      size: iconSize * kIconButtonFactor,
+      size: iconSize * iconButtonFactor,
       icon: Icon(
         iconData,
         size: iconSize,

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

@@ -27,6 +27,12 @@ class QuillToolbarSearchButton extends StatelessWidget {
     return iconSize ?? baseFontSize;
   }
 
+  double _iconButtonFactor(BuildContext context) {
+    final baseIconFactor = baseButtonExtraOptions(context).iconButtonFactor;
+    final iconButtonFactor = options.iconButtonFactor;
+    return iconButtonFactor ?? baseIconFactor;
+  }
+
   VoidCallback? _afterButtonPressed(BuildContext context) {
     return options.afterButtonPressed ??
         baseButtonExtraOptions(context).afterButtonPressed;
@@ -68,6 +74,7 @@ class QuillToolbarSearchButton extends StatelessWidget {
     final tooltip = _tooltip(context);
     final iconData = _iconData(context);
     final iconSize = _iconSize(context);
+    final iconButtonFactor = _iconButtonFactor(context);
     final afterButtonPressed = _afterButtonPressed(context);
 
     final childBuilder =
@@ -112,7 +119,7 @@ class QuillToolbarSearchButton extends StatelessWidget {
       ),
       highlightElevation: 0,
       hoverElevation: 0,
-      size: iconSize * kIconButtonFactor,
+      size: iconSize * iconButtonFactor,
       fillColor: iconFillColor,
       borderRadius: iconTheme?.borderRadius ?? 2,
       onPressed: () => _sharedOnPressed(context),

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

@@ -66,6 +66,12 @@ class QuillToolbarSelectAlignmentButtonState
     return iconSize ?? baseFontSize;
   }
 
+  double get _iconButtonFactor {
+    final baseIconFactor = baseButtonExtraOptions.iconButtonFactor;
+    final iconButtonFactor = options.iconButtonFactor;
+    return iconButtonFactor ?? baseIconFactor;
+  }
+
   VoidCallback? get _afterButtonPressed {
     return options.afterButtonPressed ??
         baseButtonExtraOptions.afterButtonPressed;
@@ -225,8 +231,8 @@ class QuillToolbarSelectAlignmentButtonState
               const EdgeInsets.symmetric(horizontal: !kIsWeb ? 1.0 : 5.0),
           child: ConstrainedBox(
             constraints: BoxConstraints.tightFor(
-              width: _iconSize * kIconButtonFactor,
-              height: _iconSize * kIconButtonFactor,
+              width: _iconSize * _iconButtonFactor,
+              height: _iconSize * _iconButtonFactor,
             ),
             child: UtilityWidgets.maybeTooltip(
               message: valueString[index] == Attribute.leftAlignment.value

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

@@ -61,6 +61,12 @@ class QuillToolbarSelectHeaderStyleButtonsState
     return iconSize ?? baseFontSize;
   }
 
+  double get iconButtonFactor {
+    final baseIconFactor = baseButtonExtraOptions.iconButtonFactor;
+    final iconButtonFactor = options.iconButtonFactor;
+    return iconButtonFactor ?? baseIconFactor;
+  }
+
   VoidCallback? get afterButtonPressed {
     return options.afterButtonPressed ??
         baseButtonExtraOptions.afterButtonPressed;
@@ -142,8 +148,8 @@ class QuillToolbarSelectHeaderStyleButtonsState
         padding: const EdgeInsets.symmetric(horizontal: !kIsWeb ? 1.0 : 5.0),
         child: ConstrainedBox(
           constraints: BoxConstraints.tightFor(
-            width: iconSize * kIconButtonFactor,
-            height: iconSize * kIconButtonFactor,
+            width: iconSize * iconButtonFactor,
+            height: iconSize * iconButtonFactor,
           ),
           child: UtilityWidgets.maybeTooltip(
             message: tooltip,

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

@@ -212,6 +212,7 @@ Widget defaultToggleStyleButtonBuilder(
   VoidCallback? onPressed,
   VoidCallback? afterPressed, [
   double iconSize = kDefaultIconSize,
+  double iconButtonFactor = kIconButtonFactor,
   QuillIconTheme? iconTheme,
 ]) {
   final theme = Theme.of(context);
@@ -234,7 +235,7 @@ Widget defaultToggleStyleButtonBuilder(
   return QuillToolbarIconButton(
     highlightElevation: 0,
     hoverElevation: 0,
-    size: iconSize * kIconButtonFactor,
+    size: iconSize * iconButtonFactor,
     icon: Icon(icon, size: iconSize, color: iconColor),
     fillColor: fill,
     onPressed: onPressed,