feat: mobile floating toolbar animation (#5170)

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_page.dart

@@ -330,28 +330,17 @@ class _AppFlowyEditorPageState extends State<AppFlowyEditorPage> {
           editorState,
           selection,
         ),
-        child: Column(
+        child: MobileFloatingToolbar(
-          children: [
+          editorState: editorState,
-            Expanded(
+          editorScrollController: editorScrollController,
-              child: MobileFloatingToolbar(
+          toolbarBuilder: (context, anchor, closeToolbar) {
-                editorState: editorState,
+            return CustomMobileFloatingToolbar(
-                editorScrollController: editorScrollController,
+              editorState: editorState,
-                toolbarBuilder: (context, anchor, closeToolbar) {
+              anchor: anchor,
-                  return AdaptiveTextSelectionToolbar.buttonItems(
+              closeToolbar: closeToolbar,
-                    buttonItems: buildMobileFloatingToolbarItems(
+            );
-                      editorState,
+          },
-                      anchor,
+          child: editor,
-                      closeToolbar,
-                    ),
-                    anchors: TextSelectionToolbarAnchors(
-                      primaryAnchor: anchor,
-                    ),
-                  );
-                },
-                child: editor,
-              ),
-            ),
-          ],
         ),
       );
     }

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_floating_toolbar/custom_mobile_floating_toolbar.dart

@@ -2,6 +2,7 @@ import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy_editor/appflowy_editor.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter_animate/flutter_animate.dart';
 
 List<ContextMenuButtonItem> buildMobileFloatingToolbarItems(
   EditorState editorState,
@@ -82,3 +83,41 @@ extension on EditorState {
     updateSelectionWithReason(selection);
   }
 }
+
+class CustomMobileFloatingToolbar extends StatelessWidget {
+  const CustomMobileFloatingToolbar({
+    super.key,
+    required this.editorState,
+    required this.anchor,
+    required this.closeToolbar,
+  });
+
+  final EditorState editorState;
+  final Offset anchor;
+  final VoidCallback closeToolbar;
+
+  @override
+  Widget build(BuildContext context) {
+    return Animate(
+      autoPlay: true,
+      effects: [
+        const FadeEffect(duration: SelectionOverlay.fadeDuration),
+        MoveEffect(
+          curve: Curves.easeOutCubic,
+          begin: const Offset(0, 16),
+          duration: 100.milliseconds,
+        ),
+      ],
+      child: AdaptiveTextSelectionToolbar.buttonItems(
+        buttonItems: buildMobileFloatingToolbarItems(
+          editorState,
+          anchor,
+          closeToolbar,
+        ),
+        anchors: TextSelectionToolbarAnchors(
+          primaryAnchor: anchor,
+        ),
+      ),
+    );
+  }
+}

frontend/appflowy_flutter/pubspec.lock

@@ -53,11 +53,11 @@ packages:
     dependency: "direct main"
     description:
       path: "."
-      ref: "6d12761"
+      ref: bcaa58e8554963083931272afcfc907f15b804cb
-      resolved-ref: "6d127619294060999522be904a3e72a59dc270ca"
+      resolved-ref: bcaa58e8554963083931272afcfc907f15b804cb
       url: "https://github.com/AppFlowy-IO/appflowy-editor.git"
     source: git
-    version: "2.3.3"
+    version: "2.3.4"
   appflowy_editor_plugins:
     dependency: "direct main"
     description:
@@ -561,6 +561,14 @@ packages:
     description: flutter
     source: sdk
     version: "0.0.0"
+  flutter_animate:
+    dependency: "direct main"
+    description:
+      name: flutter_animate
+      sha256: "7c8a6594a9252dad30cc2ef16e33270b6248c4dedc3b3d06c86c4f3f4dc05ae5"
+      url: "https://pub.dev"
+    source: hosted
+    version: "4.5.0"
   flutter_bloc:
     dependency: "direct main"
     description:
@@ -653,6 +661,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "2.0.17"
+  flutter_shaders:
+    dependency: transitive
+    description:
+      name: flutter_shaders
+      sha256: "02750b545c01ff4d8e9bbe8f27a7731aa3778402506c67daa1de7f5fc3f4befe"
+      url: "https://pub.dev"
+    source: hosted
+    version: "0.1.2"
   flutter_slidable:
     dependency: "direct main"
     description:

frontend/appflowy_flutter/pubspec.yaml

@@ -131,6 +131,7 @@ dependencies:
   sheet:
   file: ^7.0.0
   avatar_stack: ^1.2.0
+  flutter_animate: ^4.5.0
 
 dev_dependencies:
   flutter_lints: ^3.0.1
@@ -167,7 +168,7 @@ dependency_overrides:
   appflowy_editor:
     git:
       url: https://github.com/AppFlowy-IO/appflowy-editor.git
-      ref: "6d12761"
+      ref: "bcaa58e8554963083931272afcfc907f15b804cb"
 
   sheet:
     git: