Skip to content

Commit

Permalink
Flyout reverse transition duration is properly set (Fixes #893)
Browse files Browse the repository at this point in the history 
Also, improved the Flyouts documentation
  • Loading branch information
@bdlukaa
bdlukaa committed Jul 27, 2023
1 parent cd1a1ee commit 912a441
Show file tree
Hide file tree
Showing 3 changed files with 163 additions and 61 deletions.
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
- Added `Expander.contentPadding` and `Expander.contentShape` ([#891](https://github.com/bdlukaa/fluent_ui/issues/891))
- Tooltips are dismissed as soon as the mouse leaves ([#898](https://github.com/bdlukaa/fluent_ui/issues/898))
- Added `FluentThemeData.selectionColor`, which defaults to the accent color normal shade ([#897](https://github.com/bdlukaa/fluent_ui/issues/897))
- Flyout reverse transition duration is properly set ([#893](https://github.com/bdlukaa/fluent_ui/issues/893))

## 4.7.0

Expand Down
219 changes: 158 additions & 61 deletions example/lib/screens/popups/flyout.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -105,7 +105,36 @@ class _Flyout2ScreenState extends State<Flyout2Screen> with PageMixin {
controller: controller,
child: Button(
child: const Text('Clear cart'),
onPressed: () {},
onPressed: () {
controller.showFlyout(
autoModeConfiguration: FlyoutAutoConfiguration(
preferredMode: $placementMode,
),
barrierDismissible: $barrierDismissible,
dismissOnPointerMoveAway: $dismissOnPointerMoveAway,
dismissWithEsc: $dismissWithEsc,
navigatorKey: rootNavigatorKey.currentState,
builder: (context) {
return FlyoutContent(
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text(
'All items will be removed. Do you want to continue?',
style: TextStyle(fontWeight: FontWeight.bold),
),
const SizedBox(height: 12.0),
Button(
onPressed: Flyout.of(context).close,
child: const Text('Yes, empty my cart'),
),
],
),
);
},
);
},
)
)''',
child: Row(children: [
Expand Down Expand Up @@ -162,11 +191,82 @@ class _Flyout2ScreenState extends State<Flyout2Screen> with PageMixin {
),
),
CardHighlight(
codeSnippet: '''FlyoutTarget(
controller: controller,
codeSnippet: '''final menuController = FlyoutController();
FlyoutTarget(
controller: menuController,
child: Button(
child: const Text('Options'),
onPressed: () {},
onPressed: () {
menuController.showFlyout(
autoModeConfiguration: FlyoutAutoConfiguration(
preferredMode: $placementMode,
),
barrierDismissible: $barrierDismissible,
dismissOnPointerMoveAway: $dismissOnPointerMoveAway,
dismissWithEsc: $dismissWithEsc,
navigatorKey: rootNavigatorKey.currentState,
builder: (context) {
return MenuFlyout(items: [
MenuFlyoutItem(
leading: const Icon(FluentIcons.share),
text: const Text('Share'),
onPressed: Flyout.of(context).close,
),
MenuFlyoutItem(
leading: const Icon(FluentIcons.copy),
text: const Text('Copy'),
onPressed: Flyout.of(context).close,
),
MenuFlyoutItem(
leading: const Icon(FluentIcons.delete),
text: const Text('Delete'),
onPressed: Flyout.of(context).close,
),
const MenuFlyoutSeparator(),
MenuFlyoutItem(
text: const Text('Rename'),
onPressed: Flyout.of(context).close,
),
MenuFlyoutItem(
text: const Text('Select'),
onPressed: Flyout.of(context).close,
),
const MenuFlyoutSeparator(),
MenuFlyoutSubItem(
text: const Text('Send to'),
items: (_) => [
MenuFlyoutItem(
text: const Text('Bluetooth'),
onPressed: Flyout.of(context).close,
),
MenuFlyoutItem(
text: const Text('Desktop (shortcut)'),
onPressed: Flyout.of(context).close,
),
MenuFlyoutSubItem(
text: const Text('Compressed file'),
items: (context) => [
MenuFlyoutItem(
text: const Text('Compress and email'),
onPressed: Flyout.of(context).close,
),
MenuFlyoutItem(
text: const Text('Compress to .7z'),
onPressed: Flyout.of(context).close,
),
MenuFlyoutItem(
text: const Text('Compress to .zip'),
onPressed: Flyout.of(context).close,
),
],
),
],
),
]);
},
);
},
)
)''',
child: Row(children: [
Expand All @@ -175,7 +275,7 @@ class _Flyout2ScreenState extends State<Flyout2Screen> with PageMixin {
controller: menuController,
child: Button(
child: const Text('Options'),
onPressed: () async {
onPressed: () {
menuController.showFlyout(
autoModeConfiguration: FlyoutAutoConfiguration(
preferredMode: placementMode,
Expand All @@ -185,67 +285,63 @@ class _Flyout2ScreenState extends State<Flyout2Screen> with PageMixin {
dismissWithEsc: dismissWithEsc,
navigatorKey: rootNavigatorKey.currentState,
builder: (context) {
return MenuFlyout(
items: [
MenuFlyoutItem(
leading: const Icon(FluentIcons.share),
text: const Text('Share'),
onPressed: Flyout.of(context).close,
),
MenuFlyoutItem(
leading: const Icon(FluentIcons.copy),
text: const Text('Copy'),
onPressed: Flyout.of(context).close,
),
MenuFlyoutItem(
leading: const Icon(FluentIcons.delete),
text: const Text('Delete'),
onPressed: Flyout.of(context).close,
),
const MenuFlyoutSeparator(),
MenuFlyoutItem(
text: const Text('Rename'),
onPressed: Flyout.of(context).close,
),
MenuFlyoutItem(
text: const Text('Select'),
onPressed: Flyout.of(context).close,
),
const MenuFlyoutSeparator(),
MenuFlyoutSubItem(
text: const Text('Send to'),
items: (context) {
return [
return MenuFlyout(items: [
MenuFlyoutItem(
leading: const Icon(FluentIcons.share),
text: const Text('Share'),
onPressed: Flyout.of(context).close,
),
MenuFlyoutItem(
leading: const Icon(FluentIcons.copy),
text: const Text('Copy'),
onPressed: Flyout.of(context).close,
),
MenuFlyoutItem(
leading: const Icon(FluentIcons.delete),
text: const Text('Delete'),
onPressed: Flyout.of(context).close,
),
const MenuFlyoutSeparator(),
MenuFlyoutItem(
text: const Text('Rename'),
onPressed: Flyout.of(context).close,
),
MenuFlyoutItem(
text: const Text('Select'),
onPressed: Flyout.of(context).close,
),
const MenuFlyoutSeparator(),
MenuFlyoutSubItem(
text: const Text('Send to'),
items: (_) => [
MenuFlyoutItem(
text: const Text('Bluetooth'),
onPressed: Flyout.of(context).close,
),
MenuFlyoutItem(
text: const Text('Desktop (shortcut)'),
onPressed: Flyout.of(context).close,
),
MenuFlyoutSubItem(
text: const Text('Compressed file'),
items: (context) => [
MenuFlyoutItem(
text: const Text('Bluetooth'),
text: const Text('Compress and email'),
onPressed: Flyout.of(context).close,
),
MenuFlyoutItem(
text: const Text('Desktop (shortcut)'),
text: const Text('Compress to .7z'),
onPressed: Flyout.of(context).close,
),
MenuFlyoutSubItem(
text: const Text('Compressed file'),
items: (context) => [
MenuFlyoutItem(
text: const Text('Compress and email'),
onPressed: Flyout.of(context).close,
),
MenuFlyoutItem(
text: const Text('Compress to .7z'),
onPressed: Flyout.of(context).close,
),
MenuFlyoutItem(
text: const Text('Compress to .zip'),
onPressed: Flyout.of(context).close,
),
],
MenuFlyoutItem(
text: const Text('Compress to .zip'),
onPressed: Flyout.of(context).close,
),
];
},
),
],
);
],
),
],
),
]);
},
);
},
Expand All @@ -259,8 +355,9 @@ class _Flyout2ScreenState extends State<Flyout2Screen> with PageMixin {
description(
content: const Text(
'The command bar flyout lets you provide users with easy access '
'to common tasks by showing commands in a floating toolbar related'
' to an element on your UI canvas.',
'to common tasks by showing commands in a floating toolbar related '
'to an element on your UI canvas. Use your right mouse button to '
'open the context menu.',
),
),
CardHighlight(
Expand Down
4 changes: 4 additions & 0 deletions lib/src/controls/flyouts/flyout.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -550,6 +550,7 @@ class FlyoutController with ChangeNotifier {
FlyoutTransitionBuilder? transitionBuilder,
Duration? transitionDuration,
Offset? position,
RouteSettings? settings,
}) async {
_ensureAttached();
assert(_attachState!.mounted);
Expand Down Expand Up @@ -595,6 +596,9 @@ class FlyoutController with ChangeNotifier {
final result = await navigator.push<T>(PageRouteBuilder<T>(
opaque: false,
transitionDuration: transitionDuration,
reverseTransitionDuration: transitionDuration,
settings: settings,
fullscreenDialog: true,
pageBuilder: (context, animation, secondary) {
transitionBuilder ??= (context, animation, placementMode, flyout) {
switch (placementMode) {
Expand Down

0 comments on commit 912a441

Please sign in to comment.