Fix the font size button and migrate to

CHANGELOG.md

@@ -2,6 +2,10 @@
 
 All notable changes to this project will be documented in this file.
 
+## 9.1.2
+* Fix the font size button and migrate to `MenuAnchor`
+* The `defaultDisplayText` is no longer required in the font size and header dropdown buttons
+
 ## 9.1.1
 * Fix bug [#1636](https://github.com/singerdmx/flutter-quill/issues/1636)
 * Fix a where you paste styled content (HTML) it always insert a new line at first even if the document is empty

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

@@ -68,7 +68,9 @@ class QuillToolbarFontSizeButtonOptions extends QuillToolbarBaseButtonOptions<
   final double? width;
   final String? initialValue;
   final TextOverflow labelOverflow;
+  @Deprecated('No longer used')
   final double? itemHeight;
+  @Deprecated('No longer used')
   final EdgeInsets? itemPadding;
   final Color? defaultItemColor;
   final String? defaultDisplayText;

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

@@ -36,6 +36,7 @@ class QuillToolbarFontSizeButton extends StatefulWidget {
 
 class QuillToolbarFontSizeButtonState
     extends State<QuillToolbarFontSizeButton> {
+  final _menuController = MenuController();
   String _currentValue = '';
 
   QuillToolbarFontSizeButtonOptions get options {
@@ -73,8 +74,8 @@ class QuillToolbarFontSizeButtonState
   }
 
   @override
-  void initState() {
-    super.initState();
+  void didChangeDependencies() {
+    super.didChangeDependencies();
     _currentValue = _defaultDisplayText;
   }
 
@@ -125,8 +126,12 @@ class QuillToolbarFontSizeButtonState
         context.loc.fontSize;
   }
 
-  void _onPressed() {
-    _showMenu();
+  void _onDropdownButtonPressed() {
+    if (_menuController.isOpen) {
+      _menuController.close();
+    } else {
+      _menuController.open();
+    }
     afterButtonPressed?.call();
   }
 
@@ -148,21 +153,56 @@ class QuillToolbarFontSizeButtonState
           currentValue: _currentValue,
           defaultDisplayText: _defaultDisplayText,
           context: context,
-          onPressed: _onPressed,
+          onPressed: _onDropdownButtonPressed,
         ),
       );
     }
-    return ConstrainedBox(
-      constraints: BoxConstraints.tightFor(
-        height: iconSize * 1.81,
-        width: options.width,
-      ),
+    return MenuAnchor(
+      controller: _menuController,
+      menuChildren: rawItemsMap.entries.map((fontSize) {
+        return MenuItemButton(
+          key: ValueKey(fontSize.key),
+          onPressed: () {
+            final newValue = fontSize.value;
+
+            final keyName = _getKeyName(newValue);
+            setState(() {
+              if (keyName != context.loc.clear) {
+                _currentValue = keyName ?? _defaultDisplayText;
+              } else {
+                _currentValue = _defaultDisplayText;
+              }
+              if (keyName != null) {
+                controller.formatSelection(
+                  Attribute.fromKeyValue(
+                    Attribute.size.key,
+                    newValue == '0' ? null : getFontSize(newValue),
+                  ),
+                );
+                options.onSelected?.call(newValue);
+              }
+            });
+
+            if (fontSize.value == '0') {
+              controller.selectFontSize(null);
+              return;
+            }
+            controller.selectFontSize(fontSize.value);
+          },
+          child: Text(
+            fontSize.key.toString(),
+            style: TextStyle(
+              color: fontSize.value == '0' ? options.defaultItemColor : null,
+            ),
+          ),
+        );
+      }).toList(),
       child: Builder(
         builder: (context) {
           final isMaterial3 = Theme.of(context).useMaterial3;
           if (!isMaterial3) {
             return RawMaterialButton(
-              onPressed: _onPressed,
+              onPressed: _onDropdownButtonPressed,
               child: _buildContent(context),
             );
           }
@@ -177,7 +217,7 @@ class QuillToolbarFontSizeButtonState
                 visualDensity: VisualDensity.compact,
               ),
             ),
-            onPressed: _onPressed,
+            onPressed: _onDropdownButtonPressed,
             icon: _buildContent(context),
           );
         },
@@ -185,70 +225,6 @@ class QuillToolbarFontSizeButtonState
     );
   }
 
-  Future<void> _showMenu() async {
-    final popupMenuTheme = PopupMenuTheme.of(context);
-    final button = context.findRenderObject() as RenderBox;
-    final overlay = Overlay.of(context).context.findRenderObject() as RenderBox;
-    final position = RelativeRect.fromRect(
-      Rect.fromPoints(
-        button.localToGlobal(Offset.zero, ancestor: overlay),
-        button.localToGlobal(button.size.bottomLeft(Offset.zero),
-            ancestor: overlay),
-      ),
-      Offset.zero & overlay.size,
-    );
-    final newValue = await showMenu<String>(
-      context: context,
-      elevation: 4,
-      items: [
-        for (final MapEntry<String, String> fontSize in rawItemsMap.entries)
-          PopupMenuItem<String>(
-            key: ValueKey(fontSize.key),
-            value: fontSize.value,
-            height: options.itemHeight ?? kMinInteractiveDimension,
-            padding: options.itemPadding,
-            onTap: () {
-              if (fontSize.value == '0') {
-                controller.selectFontSize(null);
-                return;
-              }
-              controller.selectFontSize(fontSize.value);
-            },
-            child: Text(
-              fontSize.key.toString(),
-              style: TextStyle(
-                color: fontSize.value == '0' ? options.defaultItemColor : null,
-              ),
-            ),
-          ),
-      ],
-      position: position,
-      shape: popupMenuTheme.shape,
-      color: popupMenuTheme.color,
-    );
-    if (!mounted) return;
-    if (newValue == null) {
-      return;
-    }
-    final keyName = _getKeyName(newValue);
-    setState(() {
-      if (keyName != 'Clear') {
-        _currentValue = keyName ?? _defaultDisplayText;
-      } else {
-        _currentValue = _defaultDisplayText;
-      }
-      if (keyName != null) {
-        controller.formatSelection(
-          Attribute.fromKeyValue(
-            Attribute.size.key,
-            newValue == '0' ? null : getFontSize(newValue),
-          ),
-        );
-        options.onSelected?.call(newValue);
-      }
-    });
-  }
-
   Widget _buildContent(BuildContext context) {
     final hasFinalWidth = options.width != null;
     return Padding(
@@ -268,8 +244,6 @@ class QuillToolbarFontSizeButtonState
               style: options.style ??
                   TextStyle(
                     fontSize: iconSize / 1.15,
-                    // color: iconTheme?.iconUnselectedFillColor ??
-                    //     theme.iconTheme.color,
                   ),
             ),
           ),
@@ -277,7 +251,6 @@ class QuillToolbarFontSizeButtonState
           Icon(
             Icons.arrow_drop_down,
             size: iconSize / 1.15,
-            // color: iconTheme?.iconUnselectedFillColor ?? theme.iconTheme.color,
           )
         ],
       ),