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, editorState,
selection, 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,
),
),
],
), ),
); );
} }

View File

@ -2,6 +2,7 @@ import 'package:appflowy/generated/locale_keys.g.dart';
import 'package:appflowy_editor/appflowy_editor.dart'; import 'package:appflowy_editor/appflowy_editor.dart';
import 'package:easy_localization/easy_localization.dart'; import 'package:easy_localization/easy_localization.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter_animate/flutter_animate.dart';
List<ContextMenuButtonItem> buildMobileFloatingToolbarItems( List<ContextMenuButtonItem> buildMobileFloatingToolbarItems(
EditorState editorState, EditorState editorState,
@ -82,3 +83,41 @@ extension on EditorState {
updateSelectionWithReason(selection); 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" dependency: "direct main"
description: description:
path: "." path: "."
ref: "6d12761" ref: bcaa58e8554963083931272afcfc907f15b804cb
resolved-ref: "6d127619294060999522be904a3e72a59dc270ca" resolved-ref: bcaa58e8554963083931272afcfc907f15b804cb
url: "https://github.com/AppFlowy-IO/appflowy-editor.git" url: "https://github.com/AppFlowy-IO/appflowy-editor.git"
source: git source: git
version: "2.3.3" version: "2.3.4"
appflowy_editor_plugins: appflowy_editor_plugins:
dependency: "direct main" dependency: "direct main"
description: description:
@ -561,6 +561,14 @@ packages:
description: flutter description: flutter
source: sdk source: sdk
version: "0.0.0" 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: flutter_bloc:
dependency: "direct main" dependency: "direct main"
description: description:
@ -653,6 +661,14 @@ packages:
url: "https://pub.dev" url: "https://pub.dev"
source: hosted source: hosted
version: "2.0.17" 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: flutter_slidable:
dependency: "direct main" dependency: "direct main"
description: description:

View File

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