Responsive toolbar (#274)

packages/fleather/lib/src/widgets/editor_toolbar.dart

@@ -3,6 +3,7 @@ import 'dart:async';
 import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 import 'package:parchment/parchment.dart';
+import 'package:flutter/widgets.dart';
 
 import 'controller.dart';
 import 'theme.dart';
@@ -562,6 +563,50 @@ class _ColorPaletteElement extends StatelessWidget {
   }
 }
 
+/// Toolbar button which allows to display a dropdown menu with the buttons hidden because of the lack of space.
+
+class OverflowMenuButton extends StatefulWidget {
+  final List<Widget> menuChildren;
+
+  const OverflowMenuButton({super.key, required this.menuChildren});
+
+  @override
+  State<OverflowMenuButton> createState() => _OverflowMenuButtonState();
+}
+
+class _OverflowMenuButtonState extends State<OverflowMenuButton> {
+  @override
+  Widget build(BuildContext context) {
+    final theme = Theme.of(context);
+
+    return MenuAnchor(
+      builder:
+          (BuildContext context, MenuController controller, Widget? child) {
+        return FLIconButton(
+          highlightElevation: 0,
+          hoverElevation: 0,
+          size: 32,
+          icon: Icon(
+            Icons.more_vert,
+            size: 18,
+            color: theme.iconTheme.color,
+          ),
+          fillColor: theme.canvasColor,
+          onPressed: () {
+            if (controller.isOpen) {
+              controller.close();
+            } else {
+              controller.open();
+            }
+          },
+        );
+      },
+      anchorTapClosesMenu: true,
+      menuChildren: widget.menuChildren,
+    );
+  }
+}
+
 /// Toolbar button which allows to apply heading style to a line of text in
 /// Fleather editor.
 ///
@@ -1135,6 +1180,7 @@ class FleatherToolbar extends StatefulWidget implements PreferredSizeWidget {
           controller: controller,
         ),
       ),
+
       Visibility(
         visible: !hideUndoRedo,
         child: UndoRedoButton.redo(
@@ -1143,6 +1189,8 @@ class FleatherToolbar extends StatefulWidget implements PreferredSizeWidget {
       ),
 
       ...trailing,
+
+      /// ################################################################
     ]);
   }
 
@@ -1175,11 +1223,60 @@ class _FleatherToolbarState extends State<FleatherToolbar> {
           padding: widget.padding ?? const EdgeInsets.symmetric(horizontal: 8),
           constraints:
               BoxConstraints.tightFor(height: widget.preferredSize.height),
-          child: SingleChildScrollView(
-            scrollDirection: Axis.horizontal,
-            child: Row(
-              children: widget.children,
-            ),
+          child: LayoutBuilder(
+            builder: (BuildContext context, BoxConstraints constraints) {
+              double? availableWidth = constraints.maxWidth;
+              final overflowMenu = <Widget>[];
+              final reallyVisibleChildren = <Widget>[];
+              final allChildren = widget.children;
+              final visibleChildren = <Widget>[];
+              for (int i = 0; i < allChildren.length; i++) {
+                final Widget child = allChildren[i];
+                if (child is SizedBox) {
+                  continue;
+                }
+
+                if (child is Visibility) {
+                  final Visibility visibilityWidget = child;
+                  if (child.visible) {
+                    visibleChildren.add(visibilityWidget.child);
+                  }
+                  continue;
+                }
+                visibleChildren.add(child);
+              }
+
+              for (int i = 0; i < visibleChildren.length; i++) {
+                final Widget child = visibleChildren[i];
+                final double? childWidth = child is SizedBox
+                    ? child.width
+                    : child is ToggleStyleButton
+                        ? 32
+                        : child is VerticalDivider
+                            ? child.indent! + child.endIndent!
+                            : 32;
+                if (availableWidth! - childWidth! >
+                    48 /* 32 is the width of the overflow menu button*/) {
+                  reallyVisibleChildren.add(child);
+                  availableWidth -= childWidth;
+                } else {
+                  overflowMenu.add(child);
+                }
+              }
+              return Row(
+                children: [
+                  ...reallyVisibleChildren,
+                  if (overflowMenu.isNotEmpty)
+                    VerticalDivider(
+                        indent: 16, endIndent: 16, color: Colors.grey.shade400),
+                  if (overflowMenu.isNotEmpty)
+                    OverflowMenuButton(
+                      key: const Key('overflow_menu_button'),
+                      menuChildren: overflowMenu,
+                    ),
+                ],
+              );
+            },
           ),
         ),
       ),