fix: the new mobile toolbar doesn't work if resizeToAvoidBottomInset is true (#593)

* fix: toolbar issues

* fix: adjust the mobile toolbar when resizeToAvoidBottomInset is true

example/lib/home_page.dart

@@ -87,14 +87,15 @@ class _HomePageState extends State<HomePage> {
       key: _scaffoldKey,
       extendBodyBehindAppBar: PlatformExtension.isDesktopOrWeb,
       drawer: _buildDrawer(context),
-      resizeToAvoidBottomInset: false,
       appBar: AppBar(
         backgroundColor: const Color.fromARGB(255, 134, 46, 247),
         foregroundColor: Colors.white,
         surfaceTintColor: Colors.transparent,
         title: const Text('AppFlowy Editor'),
       ),
-      body: _buildBody(context),
+      body: SafeArea(
+        child: _buildBody(context),
+      ),
     );
   }
 

example/lib/pages/mobile_editor.dart

@@ -48,59 +48,58 @@ class _MobileEditorState extends State<MobileEditor> {
   @override
   Widget build(BuildContext context) {
     assert(PlatformExtension.isMobile);
-    return Column(
+    return MobileToolbarV2(
-      children: [
+      toolbarItems: [
-        // build appflowy editor
+        textDecorationMobileToolbarItemV2,
-        Expanded(
+        buildTextAndBackgroundColorMobileToolbarItem(),
-          child: MobileFloatingToolbar(
+        blocksMobileToolbarItem,
-            editorState: editorState,
+        linkMobileToolbarItem,
-            editorScrollController: editorScrollController,
+        dividerMobileToolbarItem,
-            toolbarBuilder: (context, anchor, closeToolbar) {
+      ],
-              return AdaptiveTextSelectionToolbar.editable(
+      editorState: editorState,
-                clipboardStatus: ClipboardStatus.pasteable,
+      child: Column(
-                onCopy: () {
+        children: [
-                  copyCommand.execute(editorState);
+          // build appflowy editor
-                  closeToolbar();
+          Expanded(
-                },
+            child: MobileFloatingToolbar(
-                onCut: () => cutCommand.execute(editorState),
-                onPaste: () => pasteCommand.execute(editorState),
-                onSelectAll: () => selectAllCommand.execute(editorState),
-                onLiveTextInput: null,
-                anchors: TextSelectionToolbarAnchors(
-                  primaryAnchor: anchor,
-                ),
-              );
-            },
-            child: AppFlowyEditor(
-              editorStyle: editorStyle,
               editorState: editorState,
               editorScrollController: editorScrollController,
-              blockComponentBuilders: blockComponentBuilders,
+              toolbarBuilder: (context, anchor, closeToolbar) {
-              // showcase 3: customize the header and footer.
+                return AdaptiveTextSelectionToolbar.editable(
-              header: Padding(
+                  clipboardStatus: ClipboardStatus.pasteable,
-                padding: const EdgeInsets.only(bottom: 10.0),
+                  onCopy: () {
-                child: Image.asset(
+                    copyCommand.execute(editorState);
-                  'assets/images/header.png',
+                    closeToolbar();
+                  },
+                  onCut: () => cutCommand.execute(editorState),
+                  onPaste: () => pasteCommand.execute(editorState),
+                  onSelectAll: () => selectAllCommand.execute(editorState),
+                  onLiveTextInput: null,
+                  anchors: TextSelectionToolbarAnchors(
+                    primaryAnchor: anchor,
+                  ),
+                );
+              },
+              child: AppFlowyEditor(
+                editorStyle: editorStyle,
+                editorState: editorState,
+                editorScrollController: editorScrollController,
+                blockComponentBuilders: blockComponentBuilders,
+                // showcase 3: customize the header and footer.
+                header: Padding(
+                  padding: const EdgeInsets.only(bottom: 10.0),
+                  child: Image.asset(
+                    'assets/images/header.png',
+                  ),
+                ),
+                footer: const SizedBox(
+                  height: 100,
                 ),
-              ),
-              footer: const SizedBox(
-                height: 100,
               ),
             ),
           ),
-        ),
+        ],
-        // build mobile toolbar
+      ),
-        MobileToolbarV2(
-          editorState: editorState,
-          toolbarItems: [
-            textDecorationMobileToolbarItemV2,
-            buildTextAndBackgroundColorMobileToolbarItem(),
-            blocksMobileToolbarItem,
-            linkMobileToolbarItem,
-            dividerMobileToolbarItem,
-          ],
-        ),
-      ],
     );
   }
 

lib/src/editor/toolbar/mobile/mobile_toolbar.dart

@@ -216,10 +216,12 @@ class MobileToolbarWidgetState extends State<MobileToolbarWidget>
                 ),
                 child: MobileToolbarItemMenu(
                   editorState: widget.editorState,
-                  itemMenuBuilder: () => widget
+                  itemMenuBuilder: () =>
-                      .toolbarItems[_selectedToolbarItemIndex!]
+                      widget
-                      // pass current [MobileToolbarWidgetState] to be used to closeItemMenu
+                          .toolbarItems[_selectedToolbarItemIndex!]
-                      .itemMenuBuilder!(context, widget.editorState, this),
+                          // pass current [MobileToolbarWidgetState] to be used to closeItemMenu
+                          .itemMenuBuilder!(context, widget.editorState, this) ??
+                      const SizedBox.shrink(),
                 ),
               )
             : SizedBox(

lib/src/editor/toolbar/mobile/mobile_toolbar_item.dart

@@ -1,7 +1,8 @@
 import 'package:appflowy_editor/appflowy_editor.dart';
 import 'package:flutter/material.dart';
 
-typedef MobileToolbarItemIconBuilder = Widget Function(
+// if the result is null, the item will be hidden
+typedef MobileToolbarItemIconBuilder = Widget? Function(
   BuildContext context,
   EditorState editorState,
   // To access to the state of MobileToolbarWidget

lib/src/editor/toolbar/mobile/mobile_toolbar_v2.dart

@@ -1,20 +1,58 @@
 import 'package:appflowy_editor/appflowy_editor.dart';
 import 'package:flutter/material.dart';
+import 'package:keyboard_height_plugin/keyboard_height_plugin.dart';
 
-class MobileToolbarV2 extends StatelessWidget {
+class MobileToolbarV2 extends StatefulWidget {
   const MobileToolbarV2({
     super.key,
     required this.editorState,
     required this.toolbarItems,
+    this.bottomOffset = 0.0,
+    required this.child,
   });
 
   final EditorState editorState;
   final List<MobileToolbarItem> toolbarItems;
+  final double bottomOffset;
+  final Widget child;
+
+  @override
+  State<MobileToolbarV2> createState() => _MobileToolbarV2State();
+}
+
+class _MobileToolbarV2State extends State<MobileToolbarV2> {
+  OverlayEntry? toolbarOverlay;
+
+  @override
+  void initState() {
+    super.initState();
+
+    _insertKeyboardToolbar();
+  }
+
+  @override
+  void dispose() {
+    _removeKeyboardToolbar();
+
+    super.dispose();
+  }
 
   @override
   Widget build(BuildContext context) {
-    return ValueListenableBuilder<Selection?>(
+    return widget.child;
-      valueListenable: editorState.selectionNotifier,
+  }
+
+  void _removeKeyboardToolbar() {
+    toolbarOverlay?.remove();
+    toolbarOverlay?.dispose();
+    toolbarOverlay = null;
+  }
+
+  void _insertKeyboardToolbar() {
+    _removeKeyboardToolbar();
+
+    Widget child = ValueListenableBuilder<Selection?>(
+      valueListenable: widget.editorState.selectionNotifier,
       builder: (_, Selection? selection, child) {
         // if the selection is null, hide the toolbar
         if (selection == null) {
@@ -33,10 +71,34 @@ class MobileToolbarV2 extends StatelessWidget {
         );
       },
       child: _MobileToolbar(
-        editorState: editorState,
+        editorState: widget.editorState,
-        toolbarItems: toolbarItems,
+        toolbarItems: widget.toolbarItems,
+        bottomOffset: widget.bottomOffset,
       ),
     );
+
+    child = Stack(
+      children: [
+        Positioned(
+          left: 0,
+          right: 0,
+          bottom: 0,
+          child: Material(
+            child: child,
+          ),
+        ),
+      ],
+    );
+
+    toolbarOverlay = OverlayEntry(
+      builder: (context) {
+        return child;
+      },
+    );
+
+    WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
+      Overlay.of(context, rootOverlay: true).insert(toolbarOverlay!);
+    });
   }
 }
 
@@ -44,10 +106,12 @@ class _MobileToolbar extends StatefulWidget {
   const _MobileToolbar({
     required this.editorState,
     required this.toolbarItems,
+    required this.bottomOffset,
   });
 
   final EditorState editorState;
   final List<MobileToolbarItem> toolbarItems;
+  final double bottomOffset;
 
   @override
   State<_MobileToolbar> createState() => _MobileToolbarState();
@@ -64,6 +128,9 @@ class _MobileToolbarState extends State<_MobileToolbar>
   bool canUpdateCachedKeyboardHeight = true;
   ValueNotifier<double> cachedKeyboardHeight = ValueNotifier(0.0);
   double get keyboardHeight => MediaQuery.of(context).viewInsets.bottom;
+  double get safeAreaBottomPadding => MediaQuery.of(context).viewPadding.bottom;
+
+  final keyboardHeightPlugin = KeyboardHeightPlugin();
 
   // used to check if click the same item again
   int? selectedMenuIndex;
@@ -75,6 +142,11 @@ class _MobileToolbarState extends State<_MobileToolbar>
     super.initState();
 
     currentSelection = widget.editorState.selection;
+    keyboardHeightPlugin.onKeyboardHeightChanged((height) {
+      if (canUpdateCachedKeyboardHeight) {
+        cachedKeyboardHeight.value = height;
+      }
+    });
   }
 
   @override
@@ -91,6 +163,7 @@ class _MobileToolbarState extends State<_MobileToolbar>
   void dispose() {
     showMenuNotifier.dispose();
     cachedKeyboardHeight.dispose();
+    keyboardHeightPlugin.dispose();
 
     super.dispose();
   }
@@ -109,7 +182,11 @@ class _MobileToolbarState extends State<_MobileToolbar>
     // update the keyboard height here.
     // try to get the height in `didChangeMetrics`, but it's not accurate.
     if (canUpdateCachedKeyboardHeight) {
-      cachedKeyboardHeight.value = keyboardHeight;
+      // cachedKeyboardHeight.value = max(
+      //   0,
+      //   keyboardHeight - safeAreaBottomPadding - widget.bottomOffset,
+      // );
+      // print('cachedKeyboardHeight: ${cachedKeyboardHeight.value}');
     }
     // toolbar
     //  - if the menu is shown, the toolbar will be pushed up by the height of the menu
@@ -233,18 +310,20 @@ class _MobileToolbarState extends State<_MobileToolbar>
         return ValueListenableBuilder(
           valueListenable: showMenuNotifier,
           builder: (_, showingMenu, __) {
-            return ConstrainedBox(
+            return SizedBox(
-              constraints: BoxConstraints(minHeight: height),
+              height: height,
               child: (showingMenu && selectedMenuIndex != null)
                   ? MobileToolbarItemMenu(
                       editorState: widget.editorState,
-                      itemMenuBuilder: () => widget
+                      itemMenuBuilder: () =>
-                          .toolbarItems[selectedMenuIndex!].itemMenuBuilder!
+                          widget
-                          .call(
+                              .toolbarItems[selectedMenuIndex!].itemMenuBuilder!
-                        context,
+                              .call(
-                        widget.editorState,
+                            context,
-                        this,
+                            widget.editorState,
-                      ),
+                            this,
+                          ) ??
+                          const SizedBox.shrink(),
                     )
                   : const SizedBox.shrink(),
             );

lib/src/editor/toolbar/mobile/toolbar_items/blocks_mobile_toolbar_item.dart

@@ -73,6 +73,8 @@ class _BlocksMenuState extends State<_BlocksMenu> {
 
   @override
   Widget build(BuildContext context) {
+    final style = MobileToolbarTheme.of(context);
+
     final children = lists.map((list) {
       // Check if current node is list and its type
       final node = widget.editorState.getNodeAtPath(
@@ -111,11 +113,10 @@ class _BlocksMenuState extends State<_BlocksMenu> {
 
     return GridView(
       shrinkWrap: true,
-      gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
+      padding: EdgeInsets.zero,
+      gridDelegate: buildMobileToolbarMenuGridDelegate(
+        mobileToolbarStyle: style,
         crossAxisCount: 2,
-        mainAxisSpacing: 8,
-        crossAxisSpacing: 8,
-        childAspectRatio: 5,
       ),
       children: children,
     );

lib/src/editor/toolbar/mobile/toolbar_items/text_decoration_mobile_toolbar_item_v2.dart

@@ -96,6 +96,7 @@ class _TextDecorationMenuState extends State<_TextDecorationMenu> {
 
     return GridView(
       shrinkWrap: true,
+      padding: EdgeInsets.zero,
       gridDelegate: buildMobileToolbarMenuGridDelegate(
         mobileToolbarStyle: style,
         crossAxisCount: 2,

pubspec.yaml

@@ -46,6 +46,7 @@ dependencies:
   diff_match_patch: ^0.4.1
   string_validator: ^1.0.0
   universal_html: ^2.2.4
+  keyboard_height_plugin: ^0.0.4
 
 dev_dependencies:
   flutter_test: