Dropdown tweaks (#1182)

lib/src/utils/widgets.dart

@@ -1,5 +1,7 @@
 import 'package:flutter/material.dart';
 
+typedef WidgetWrapper = Widget Function(Widget child);
+
 /// Provides utiulity widgets.
 abstract class UtilityWidgets {
   /// Conditionally wraps the [child] with [Tooltip] widget if [message]
@@ -8,4 +10,12 @@ abstract class UtilityWidgets {
       (message ?? '').isNotEmpty
           ? Tooltip(message: message!, child: child)
           : child;
+
+  /// Conditionally wraps the [child] with [wrapper] widget if [enabled]
+  /// is true.
+  static Widget maybeWidget(
+          {required WidgetWrapper wrapper,
+          required Widget child,
+          bool enabled = false}) =>
+      enabled ? wrapper(child) : child;
 }

lib/src/widgets/toolbar/quill_font_family_button.dart

@@ -25,9 +25,16 @@ class QuillFontFamilyButton extends StatefulWidget {
     this.style,
     this.width,
     this.renderFontFamilies = true,
-    this.alignment,
+    this.initialValue,
+    this.labelOverflow = TextOverflow.visible,
+    this.overrideTooltipByFontFamily = false,
+    this.itemHeight,
+    this.itemPadding,
+    this.defaultItemColor = Colors.red,
     Key? key,
-  }) : super(key: key);
+  })  : assert(rawItemsMap.length > 0),
+        assert(initialValue == null || initialValue.length > 0),
+        super(key: key);
 
   final double iconSize;
   final Color? fillColor;
@@ -46,7 +53,12 @@ class QuillFontFamilyButton extends StatefulWidget {
   final TextStyle? style;
   final double? width;
   final bool renderFontFamilies;
-  final AlignmentGeometry? alignment;
+  final String? initialValue;
+  final TextOverflow labelOverflow;
+  final bool overrideTooltipByFontFamily;
+  final double? itemHeight;
+  final EdgeInsets? itemPadding;
+  final Color? defaultItemColor;
 
   @override
   _QuillFontFamilyButtonState createState() => _QuillFontFamilyButtonState();
@@ -60,7 +72,7 @@ class _QuillFontFamilyButtonState extends State<QuillFontFamilyButton> {
   @override
   void initState() {
     super.initState();
-    _currentValue = _defaultDisplayText = 'Font'.i18n;
+    _currentValue = _defaultDisplayText = widget.initialValue ?? 'Font'.i18n;
     widget.controller.addListener(_didChangeEditingValue);
   }
 
@@ -105,8 +117,18 @@ class _QuillFontFamilyButtonState extends State<QuillFontFamilyButton> {
         height: widget.iconSize * 1.81,
         width: widget.width,
       ),
-      child: UtilityWidgets.maybeTooltip(
+      child: UtilityWidgets.maybeWidget(
-        message: widget.tooltip,
+        enabled: (widget.tooltip ?? '').isNotEmpty ||
+            widget.overrideTooltipByFontFamily,
+        wrapper: (child) {
+          var effectiveTooltip = widget.tooltip ?? '';
+          if (widget.overrideTooltipByFontFamily) {
+            effectiveTooltip = effectiveTooltip.isNotEmpty
+                ? '$effectiveTooltip: $_currentValue'
+                : '${'Font'.i18n}: $_currentValue';
+          }
+          return Tooltip(message: effectiveTooltip, child: child);
+        },
         child: RawMaterialButton(
           visualDensity: VisualDensity.compact,
           shape: RoundedRectangleBorder(
@@ -146,12 +168,16 @@ class _QuillFontFamilyButtonState extends State<QuillFontFamilyButton> {
           PopupMenuItem<String>(
             key: ValueKey(fontFamily.key),
             value: fontFamily.value,
+            height: widget.itemHeight ?? kMinInteractiveDimension,
+            padding: widget.itemPadding,
             child: Text(
               fontFamily.key.toString(),
               style: TextStyle(
-                  fontFamily:
+                fontFamily: widget.renderFontFamilies ? fontFamily.value : null,
-                      widget.renderFontFamilies ? fontFamily.value : null,
+                color: fontFamily.value == 'Clear'
-                  color: fontFamily.value == 'Clear' ? Colors.red : null),
+                    ? widget.defaultItemColor
+                    : null,
+              ),
             ),
           ),
       ],
@@ -177,18 +203,27 @@ class _QuillFontFamilyButtonState extends State<QuillFontFamilyButton> {
 
   Widget _buildContent(BuildContext context) {
     final theme = Theme.of(context);
-    return Container(
+    final hasFinalWidth = widget.width != null;
-      alignment: widget.alignment ?? Alignment.center,
+    return Padding(
       padding: widget.padding ?? const EdgeInsets.fromLTRB(10, 0, 0, 0),
       child: Row(
-        mainAxisSize: MainAxisSize.min,
+        mainAxisSize: !hasFinalWidth ? MainAxisSize.min : MainAxisSize.max,
+        mainAxisAlignment: MainAxisAlignment.spaceBetween,
         children: [
-          Text(_currentValue,
+          UtilityWidgets.maybeWidget(
+            enabled: hasFinalWidth,
+            wrapper: (child) => Expanded(child: child),
+            child: Text(
+              _currentValue,
+              maxLines: 1,
+              overflow: widget.labelOverflow,
               style: widget.style ??
                   TextStyle(
                       fontSize: widget.iconSize / 1.15,
                       color: widget.iconTheme?.iconUnselectedColor ??
-                          theme.iconTheme.color)),
+                          theme.iconTheme.color),
+            ),
+          ),
           const SizedBox(width: 3),
           Icon(Icons.arrow_drop_down,
               size: widget.iconSize / 1.15,

lib/src/widgets/toolbar/quill_font_size_button.dart

@@ -26,9 +26,13 @@ class QuillFontSizeButton extends StatefulWidget {
     this.style,
     this.width,
     this.initialValue,
-    this.alignment,
+    this.labelOverflow = TextOverflow.visible,
+    this.itemHeight,
+    this.itemPadding,
+    this.defaultItemColor = Colors.red,
     Key? key,
   })  : assert(rawItemsMap.length > 0),
+        assert(initialValue == null || initialValue.length > 0),
         super(key: key);
 
   final double iconSize;
@@ -48,7 +52,10 @@ class QuillFontSizeButton extends StatefulWidget {
   final TextStyle? style;
   final double? width;
   final String? initialValue;
-  final AlignmentGeometry? alignment;
+  final TextOverflow labelOverflow;
+  final double? itemHeight;
+  final EdgeInsets? itemPadding;
+  final Color? defaultItemColor;
 
   @override
   _QuillFontSizeButtonState createState() => _QuillFontSizeButtonState();
@@ -148,10 +155,13 @@ class _QuillFontSizeButtonState extends State<QuillFontSizeButton> {
           PopupMenuItem<String>(
             key: ValueKey(fontSize.key),
             value: fontSize.value,
+            height: widget.itemHeight ?? kMinInteractiveDimension,
+            padding: widget.itemPadding,
             child: Text(
               fontSize.key.toString(),
-              style:
+              style: TextStyle(
-                  TextStyle(color: fontSize.value == '0' ? Colors.red : null),
+                color: fontSize.value == '0' ? widget.defaultItemColor : null,
+              ),
             ),
           ),
       ],
@@ -177,18 +187,24 @@ class _QuillFontSizeButtonState extends State<QuillFontSizeButton> {
 
   Widget _buildContent(BuildContext context) {
     final theme = Theme.of(context);
-    return Container(
+    final hasFinalWidth = widget.width != null;
-      alignment: widget.alignment ?? Alignment.center,
+    return Padding(
       padding: widget.padding ?? const EdgeInsets.fromLTRB(10, 0, 0, 0),
       child: Row(
-        mainAxisSize: MainAxisSize.min,
+        mainAxisSize: !hasFinalWidth ? MainAxisSize.min : MainAxisSize.max,
+        mainAxisAlignment: MainAxisAlignment.spaceBetween,
         children: [
-          Text(_currentValue,
+          UtilityWidgets.maybeWidget(
-              style: widget.style ??
+            enabled: hasFinalWidth,
-                  TextStyle(
+            wrapper: (child) => Expanded(child: child),
-                      fontSize: widget.iconSize / 1.15,
+            child: Text(_currentValue,
-                      color: widget.iconTheme?.iconUnselectedColor ??
+                overflow: widget.labelOverflow,
-                          theme.iconTheme.color)),
+                style: widget.style ??
+                    TextStyle(
+                        fontSize: widget.iconSize / 1.15,
+                        color: widget.iconTheme?.iconUnselectedColor ??
+                            theme.iconTheme.color)),
+          ),
           const SizedBox(width: 3),
           Icon(Icons.arrow_drop_down,
               size: widget.iconSize / 1.15,