fix: the content is blocked by the keyboard sometimes (#594)

* fix: the content is blocked by the keyboard sometimes

* chore: use flutter 3.13.9 in CI

.github/workflows/test.yml

@@ -33,6 +33,7 @@ jobs:
       - uses: subosito/flutter-action@v2
         with:
           channel: "stable"
+          flutter-version: "3.13.9"
           cache: true
 
       - name: Run tests

example/lib/pages/mobile_editor.dart

@@ -49,6 +49,7 @@ class _MobileEditorState extends State<MobileEditor> {
   Widget build(BuildContext context) {
     assert(PlatformExtension.isMobile);
     return MobileToolbarV2(
+      toolbarHeight: 48.0,
       toolbarItems: [
         textDecorationMobileToolbarItemV2,
         buildTextAndBackgroundColorMobileToolbarItem(),

lib/src/editor/editor_component/service/scroll_service_widget.dart

@@ -109,7 +109,7 @@ class _ScrollServiceWidgetState extends State<ScrollServiceWidget>
         return Future.delayed(const Duration(milliseconds: 300), () {
           startAutoScroll(
             endTouchPoint,
-            edgeOffset: 50,
+            edgeOffset: 100,
             duration: Duration.zero,
           );
         });

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

@@ -20,7 +20,7 @@ class MobileToolbarTheme extends InheritedWidget {
     this.primaryColor = const Color(0xff1F71AC),
     this.onPrimaryColor = Colors.white,
     this.outlineColor = const Color(0xFFE3E3E3),
-    this.toolbarHeight = 50.0,
+    this.toolbarHeight = 48.0,
     this.borderRadius = 6.0,
     this.buttonHeight = 40.0,
     this.buttonSpacing = 8.0,

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

@@ -7,13 +7,13 @@ class MobileToolbarV2 extends StatefulWidget {
     super.key,
     required this.editorState,
     required this.toolbarItems,
-    this.bottomOffset = 0.0,
+    required this.toolbarHeight,
     required this.child,
   });
 
   final EditorState editorState;
   final List<MobileToolbarItem> toolbarItems;
-  final double bottomOffset;
+  final double toolbarHeight;
   final Widget child;
 
   @override
@@ -22,24 +22,45 @@ class MobileToolbarV2 extends StatefulWidget {
 
 class _MobileToolbarV2State extends State<MobileToolbarV2> {
   OverlayEntry? toolbarOverlay;
+  final keyboardHeightPlugin = KeyboardHeightPlugin();
+  final isKeyboardShow = ValueNotifier(false);
 
   @override
   void initState() {
     super.initState();
 
     _insertKeyboardToolbar();
+    keyboardHeightPlugin.onKeyboardHeightChanged((height) {
+      isKeyboardShow.value = height > 0;
+    });
   }
 
   @override
   void dispose() {
     _removeKeyboardToolbar();
+    keyboardHeightPlugin.dispose();
 
     super.dispose();
   }
 
   @override
   Widget build(BuildContext context) {
-    return widget.child;
+    return Column(
+      children: [
+        Expanded(
+          child: widget.child,
+        ),
+        // add a bottom offset to make sure the toolbar is above the keyboard
+        ValueListenableBuilder(
+          valueListenable: isKeyboardShow,
+          builder: (context, isKeyboardShow, __) {
+            return SizedBox(
+              height: isKeyboardShow ? widget.toolbarHeight : 0,
+            );
+          },
+        ),
+      ],
+    );
   }
 
   void _removeKeyboardToolbar() {
@@ -53,16 +74,21 @@ class _MobileToolbarV2State extends State<MobileToolbarV2> {
 
     Widget child = ValueListenableBuilder<Selection?>(
       valueListenable: widget.editorState.selectionNotifier,
-      builder: (_, Selection? selection, child) {
+      builder: (_, Selection? selection, __) {
         // if the selection is null, hide the toolbar
         if (selection == null) {
           return const SizedBox.shrink();
         }
 
+        Widget child = _MobileToolbar(
+          editorState: widget.editorState,
+          toolbarItems: widget.toolbarItems,
+        );
+
         // if the MobileToolbarTheme is not provided, provide it
         if (MobileToolbarTheme.maybeOf(context) == null) {
           child = MobileToolbarTheme(
-            child: child!,
+            child: child,
           );
         }
 
@@ -70,11 +96,6 @@ class _MobileToolbarV2State extends State<MobileToolbarV2> {
           child: child,
         );
       },
-      child: _MobileToolbar(
-        editorState: widget.editorState,
-        toolbarItems: widget.toolbarItems,
-        bottomOffset: widget.bottomOffset,
-      ),
     );
 
     child = Stack(
@@ -106,12 +127,10 @@ 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();
@@ -127,9 +146,6 @@ class _MobileToolbarState extends State<_MobileToolbar>
   // This is because we want to keep the same height when the menu is shown.
   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
@@ -179,15 +195,6 @@ class _MobileToolbarState extends State<_MobileToolbar>
 
   @override
   Widget build(BuildContext context) {
-    // update the keyboard height here.
-    // try to get the height in `didChangeMetrics`, but it's not accurate.
-    if (canUpdateCachedKeyboardHeight) {
-      // 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
     //  - otherwise, add a spacer to push the toolbar up when the keyboard is shown