feat: mobile floating toolbar animation (#5170)

This commit is contained in:
Richard Shiue 2024-04-29 10:33:57 +08:00 committed by GitHub
parent 0b94e2b25d
commit 119fb03342
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 71 additions and 26 deletions

View File

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

View File

@ -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,
),
),
);
}
}

View File

@ -53,11 +53,11 @@ packages:
dependency: "direct main"
description:
path: "."
ref: "6d12761"
resolved-ref: "6d127619294060999522be904a3e72a59dc270ca"
ref: bcaa58e8554963083931272afcfc907f15b804cb
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:

View File

@ -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: