-
Notifications
You must be signed in to change notification settings - Fork 29.7k
Add RawMenuAnchor animation callbacks #167806
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add RawMenuAnchor animation callbacks #167806
Conversation
dkwingsmt
left a comment
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Nice one! I like how this solution targets the core obstacle in a direct and simple way, i.e. how to pass the message from the menu controller to the themed menu.
This entire batch of suggestions focus on the documentation and naming, mostly because I myself was a bit lost while reading everything, especially everything related to "request". I'd like to propose a different set of terms to make the structure a bit clearer, and to also verify my understanding. Feel free to take any or no parts of my suggestion or change it whatever way you think fits.
|
Also cc @chunhtai |
I missed this comment. I think I pushed changes that do this -- let me know if it looks right. By pure method, are you referring to an abstract method in _RawMenuAnchorBaseMixin? |
chunhtai
left a comment
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Overall LGTM, I think this pr is cleaner now. Thanks for working on this!
| @override | ||
| void handleCloseRequest() { | ||
| if (widget.onCloseRequested != null) { | ||
| if (SchedulerBinding.instance.schedulerPhase != SchedulerPhase.persistentCallbacks) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Why do we need a postframe callback? would be good to have some comments on this
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Changes in MediaQuery.sizeOf(context) cause RawMenuAnchor to close during didChangeDependencies. When this happens, calling setState during the closing sequence (i.e. handleCloseRequest -> onCloseRequested -> hideOverlay) will throw an error, since we're scheduling a build during a build. I think this could be fixed if OverlayPortal is given a declarative API (see #136769). I'll add comments explaining this.
While I was investigating how to phrase the comments, I realized that we could remove the post-frame callbacks if we used didChangeMetrics instead of MediaQuery, since didChangeMetrics is called during the idle phase. The drawback of this approach is that we would be rebuilding when the screen size changes rather than when the MediaQuery size changes. As a result, if a user modified the size of an ancestor MediaQuery widget, RawMenuAnchor wouldn't close. I submitted an issue about this here: #168539
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I filed a PR regarding this issue here: #168623. For now, I'll comment in the explanation.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Done
| /// is still open. In this case, opening delays or animations should be | ||
| /// skipped, and `showOverlay` should be called with the new `position` value. | ||
| /// | ||
| /// Defaults to null, which means that the menu will be opened immediately. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Somewhere in here or other place should document the invoking order of onOpenRequested, showOverlay and onOpen same for onCloseRequest and onClose
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
So, I initially wrote out a detailed list, but I found it easier to digest when reading:
onOpenRequested:
/// When [MenuController.open] is called, the full opening sequence is:
/// 1. [onOpenRequested]
/// 2. (optional delay)
/// 3. `showOverlay`
/// 4. [onOpen]
/// 5. (optional animation)onCloseRequested:
/// When [MenuController.close] is called, the full closing sequence is:
/// 1. [onCloseRequested]
/// 2. (optional animation)
/// 3. `hideOverlay`
/// 4. [onClose]I also tried combining both steps and placing them in the widget description, but I found it more intuitive to read parameter definitions.
Let me know if I should add more detail or change anything.
dkwingsmt
left a comment
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Great so far! More discussion on comments and minor API design.
Also: Can you remove the comment here? Overriding methods should not typically have comments (unless they're doing very differently from what the base method instructs).
Roll Flutter from d733bea58c1a to 2773c0c8e15e (42 revisions) flutter/flutter@d733bea...2773c0c 2025-06-25 [email protected] Log stack traces from exceptions thrown by devicelab test tasks (flutter/flutter#171165) 2025-06-25 [email protected] Revert "Move `web_long_running_tests_{1,5}_5` to `bringup`." (flutter/flutter#171100) 2025-06-25 [email protected] Add missing M3 tests for InputDecoration.isDense (flutter/flutter#171058) 2025-06-25 [email protected] Add Android specific sub-step to validate the Android sdk path has no spaces (flutter/flutter#170829) 2025-06-24 [email protected] Update foundation library to export internal (flutter/flutter#170563) 2025-06-24 [email protected] Remove stale references to `Release-process.md` and `conductor` (flutter/flutter#171046) 2025-06-24 [email protected] License cpp jun23 (flutter/flutter#171047) 2025-06-24 [email protected] Add android-reviewers to CODEOWNERS (flutter/flutter#170157) 2025-06-24 [email protected] Update tool/README.md regarding locally-built engine (flutter/flutter#171102) 2025-06-24 [email protected] [web] Align the PR triage process with the ecosystem's triage flow (flutter/flutter#171086) 2025-06-24 [email protected] [flutter_tool] Migrate DAP off `ProcessUtils.writelnToStdinUnsafe` (flutter/flutter#171081) 2025-06-24 [email protected] [web] More granular configuration of the test environment (flutter/flutter#168767) 2025-06-24 [email protected] Clean up Devfs_Web into separate files (flutter/flutter#170769) 2025-06-24 [email protected] Add RawMenuAnchor animation callbacks (flutter/flutter#167806) 2025-06-24 [email protected] Support wide gamut colors when applying a DlColor to an SkPaint (flutter/flutter#170613) 2025-06-24 [email protected] Remove temporary workaround for web testing (flutter/flutter#170949) 2025-06-24 [email protected] Roll Packages from 02770da to d9d3191 (6 revisions) (flutter/flutter#171075) 2025-06-24 [email protected] Add LLDB warnings (flutter/flutter#170827) 2025-06-24 [email protected] Update FormField.initialValue documentation (flutter/flutter#171061) 2025-06-24 [email protected] Roll Skia from 132cb2052565 to a462e701b493 (2 revisions) (flutter/flutter#171063) 2025-06-24 [email protected] Roll Skia from f88706e3a863 to 132cb2052565 (4 revisions) (flutter/flutter#171057) 2025-06-24 [email protected] When maintainHintSize is false, hint is centered and aligned, it is different from the original one (flutter/flutter#168654) 2025-06-24 [email protected] Deprecate DropdownButtonFormField "value" parameter in favor of "initialValue" (flutter/flutter#170805) 2025-06-24 [email protected] Roll Skia from af6feb799ea6 to f88706e3a863 (2 revisions) (flutter/flutter#171056) 2025-06-24 [email protected] Roll Dart SDK from aebd78999b1a to d9edd9e7a634 (1 revision) (flutter/flutter#171053) 2025-06-24 [email protected] Roll Skia from ae517eba0170 to af6feb799ea6 (1 revision) (flutter/flutter#171052) 2025-06-24 [email protected] Roll Skia from a7735d517e6a to ae517eba0170 (9 revisions) (flutter/flutter#171049) 2025-06-24 [email protected] Enable interpretation fallback when unable to JIT on iOS. (flutter/flutter#170835) 2025-06-24 [email protected] Flutter test cleanup (flutter/flutter#170891) 2025-06-24 [email protected] Move `packages_autoroller` out of the carcass of `conductor`, delete `conductor` (flutter/flutter#171029) 2025-06-23 98614782+auto-submit[bot]@users.noreply.github.com Reverts "Don't strip symbols from `libapp.so` on android by default (#162464)" (flutter/flutter#171044) 2025-06-23 [email protected] Roll Dart SDK from a09de0d3556c to aebd78999b1a (2 revisions) (flutter/flutter#171039) 2025-06-23 [email protected] Don't strip symbols from `libapp.so` on android by default (flutter/flutter#162464) 2025-06-23 [email protected] Roll Skia from 0311837abe86 to a7735d517e6a (12 revisions) (flutter/flutter#171037) 2025-06-23 [email protected] Pass font scanner to font mgr that need it (flutter/flutter#170701) 2025-06-23 [email protected] Make service worker tests more lenient. (flutter/flutter#170939) 2025-06-23 [email protected] Remove update CHANGELOG step from stable cherry pick process (flutter/flutter#171017) 2025-06-23 [email protected] Include dev_dependencies in all builds for iOS and macOS (flutter/flutter#171015) 2025-06-23 [email protected] Move `web_long_running_tests_{1,5}_5` to `bringup`. (flutter/flutter#171026) 2025-06-23 [email protected] rename from announce to supportsAnnounce on engine (flutter/flutter#170618) 2025-06-23 [email protected] Roll pub packages (flutter/flutter#171016) 2025-06-23 [email protected] Enhance Text Contrast for WCAG AAA Compliance (flutter/flutter#170758) If this roll has caused a breakage, revert this CL and stop the roller using the controls here: https://autoroll.skia.org/r/flutter-packages ...
Alternative to flutter#163481, flutter#167537, flutter#163481 that uses callbacks. @dkwingsmt - you inspired me to simplify the menu behavior. I didn't end up using Actions, mainly because nested behavior was unwieldy and capturing BuildContext has drawbacks. This uses a basic callback mechanism to animate the menu open and closed. Check out the examples. <hr /> ### The problem RawMenuAnchor synchronously shows or hides an overlay menu in response to `MenuController.open()` and `MenuController.close`, respectively. Because animations cannot be run on a hidden overlay, there currently is no way for developers to add animations to RawMenuAnchor and its subclasses (MenuAnchor, DropdownMenuButton, etc). ### The solution This PR: - Adds two callbacks -- `onOpenRequested` and `onCloseRequested` -- to RawMenuAnchor. - onOpenRequested is called with a position and a showOverlay callback, which opens the menu when called. - onCloseRequested is called with a hideOverlay callback, which hides the menu when called. When `MenuController.open()` and `MenuController.close()` are called, onOpenRequested and onCloseRequested are invoked, respectively. Precursor for flutter#143416, flutter#135025, flutter#143712 ## Demo https://github.com/user-attachments/assets/bb14abca-af26-45fe-8d45-289b5d07dab2 ```dart // Copyright 2014 The Flutter Authors. All rights reserved. // Use of this source code is governed by a BSD-style license that can be // found in the LICENSE file. // ignore_for_file: public_member_api_docs import 'dart:ui' as ui; import 'package:flutter/material.dart' hide MenuController, RawMenuAnchor, RawMenuOverlayInfo; import 'raw_menu_anchor.dart'; /// Flutter code sample for a [RawMenuAnchor] that animates a simple menu using /// [RawMenuAnchor.onOpenRequested] and [RawMenuAnchor.onCloseRequested]. void main() { runApp(const App()); } class Menu extends StatefulWidget { const Menu({super.key}); @OverRide State<Menu> createState() => _MenuState(); } class _MenuState extends State<Menu> with SingleTickerProviderStateMixin { late final AnimationController animationController; final MenuController menuController = MenuController(); @OverRide void initState() { super.initState(); animationController = AnimationController( vsync: this, duration: const Duration(milliseconds: 300), ); } @OverRide void dispose() { animationController.dispose(); super.dispose(); } void _handleMenuOpenRequest(Offset? position, void Function({Offset? position}) showOverlay) { // Mount or reposition the menu before animating the menu open. showOverlay(position: position); if (animationController.isForwardOrCompleted) { // If the menu is already open or opening, the animation is already // running forward. return; } // Animate the menu into view. This will cancel the closing animation. animationController.forward(); } void _handleMenuCloseRequest(VoidCallback hideOverlay) { if (!animationController.isForwardOrCompleted) { // If the menu is already closed or closing, do nothing. return; } // Animate the menu out of view. // // Be sure to use `whenComplete` so that the closing animation // can be interrupted by an opening animation. animationController.reverse().whenComplete(() { if (mounted) { // Hide the menu after the menu has closed hideOverlay(); } }); } @OverRide Widget build(BuildContext context) { return RawMenuAnchor( controller: menuController, onOpenRequested: _handleMenuOpenRequest, onCloseRequested: _handleMenuCloseRequest, overlayBuilder: (BuildContext context, RawMenuOverlayInfo info) { final ui.Offset position = info.anchorRect.bottomLeft; return Positioned( top: position.dy + 5, left: position.dx, child: TapRegion( groupId: info.tapRegionGroupId, child: Material( color: ColorScheme.of(context).primaryContainer, shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)), elevation: 3, child: SizeTransition( sizeFactor: animationController, child: const SizedBox( height: 200, width: 150, child: Center(child: Text('Howdy', textAlign: TextAlign.center)), ), ), ), ), ); }, builder: (BuildContext context, MenuController menuController, Widget? child) { return FilledButton( onPressed: () { if (animationController.isForwardOrCompleted) { menuController.close(); } else { menuController.open(); } }, child: const Text('Toggle Menu'), ); }, ); } } class App extends StatelessWidget { const App({super.key}); @OverRide Widget build(BuildContext context) { return MaterialApp( theme: ThemeData(colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue)), home: const Scaffold(body: Center(child: Menu())), ); } } ``` ## Pre-launch Checklist - [x] I read the [Contributor Guide] and followed the process outlined there for submitting PRs. - [x] I read the [Tree Hygiene] wiki page, which explains my responsibilities. - [x] I read and followed the [Flutter Style Guide], including [Features we expect every widget to implement]. - [x] I signed the [CLA]. - [x] I listed at least one issue that this PR fixes in the description above. - [x] I updated/added relevant documentation (doc comments with `///`). - [x] I added new tests to check the change I am making, or this PR is [test-exempt]. - [x] I followed the [breaking change policy] and added [Data Driven Fixes] where supported. - [x] All existing and new tests are passing. If you need help, consider asking for advice on the #hackers-new channel on [Discord]. <!-- Links --> [Contributor Guide]: https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#overview [Tree Hygiene]: https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md [test-exempt]: https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#tests [Flutter Style Guide]: https://github.com/flutter/flutter/blob/main/docs/contributing/Style-guide-for-Flutter-repo.md [Features we expect every widget to implement]: https://github.com/flutter/flutter/blob/main/docs/contributing/Style-guide-for-Flutter-repo.md#features-we-expect-every-widget-to-implement [CLA]: https://cla.developers.google.com/ [flutter/tests]: https://github.com/flutter/tests [breaking change policy]: https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#handling-breaking-changes [Discord]: https://github.com/flutter/flutter/blob/main/docs/contributing/Chat.md [Data Driven Fixes]: https://github.com/flutter/flutter/blob/main/docs/contributing/Data-driven-Fixes.md --------- Co-authored-by: Tong Mu <[email protected]>
…r#9495) Roll Flutter from d733bea58c1a to 2773c0c8e15e (42 revisions) flutter/flutter@d733bea...2773c0c 2025-06-25 [email protected] Log stack traces from exceptions thrown by devicelab test tasks (flutter/flutter#171165) 2025-06-25 [email protected] Revert "Move `web_long_running_tests_{1,5}_5` to `bringup`." (flutter/flutter#171100) 2025-06-25 [email protected] Add missing M3 tests for InputDecoration.isDense (flutter/flutter#171058) 2025-06-25 [email protected] Add Android specific sub-step to validate the Android sdk path has no spaces (flutter/flutter#170829) 2025-06-24 [email protected] Update foundation library to export internal (flutter/flutter#170563) 2025-06-24 [email protected] Remove stale references to `Release-process.md` and `conductor` (flutter/flutter#171046) 2025-06-24 [email protected] License cpp jun23 (flutter/flutter#171047) 2025-06-24 [email protected] Add android-reviewers to CODEOWNERS (flutter/flutter#170157) 2025-06-24 [email protected] Update tool/README.md regarding locally-built engine (flutter/flutter#171102) 2025-06-24 [email protected] [web] Align the PR triage process with the ecosystem's triage flow (flutter/flutter#171086) 2025-06-24 [email protected] [flutter_tool] Migrate DAP off `ProcessUtils.writelnToStdinUnsafe` (flutter/flutter#171081) 2025-06-24 [email protected] [web] More granular configuration of the test environment (flutter/flutter#168767) 2025-06-24 [email protected] Clean up Devfs_Web into separate files (flutter/flutter#170769) 2025-06-24 [email protected] Add RawMenuAnchor animation callbacks (flutter/flutter#167806) 2025-06-24 [email protected] Support wide gamut colors when applying a DlColor to an SkPaint (flutter/flutter#170613) 2025-06-24 [email protected] Remove temporary workaround for web testing (flutter/flutter#170949) 2025-06-24 [email protected] Roll Packages from 02770da to d9d3191 (6 revisions) (flutter/flutter#171075) 2025-06-24 [email protected] Add LLDB warnings (flutter/flutter#170827) 2025-06-24 [email protected] Update FormField.initialValue documentation (flutter/flutter#171061) 2025-06-24 [email protected] Roll Skia from 132cb2052565 to a462e701b493 (2 revisions) (flutter/flutter#171063) 2025-06-24 [email protected] Roll Skia from f88706e3a863 to 132cb2052565 (4 revisions) (flutter/flutter#171057) 2025-06-24 [email protected] When maintainHintSize is false, hint is centered and aligned, it is different from the original one (flutter/flutter#168654) 2025-06-24 [email protected] Deprecate DropdownButtonFormField "value" parameter in favor of "initialValue" (flutter/flutter#170805) 2025-06-24 [email protected] Roll Skia from af6feb799ea6 to f88706e3a863 (2 revisions) (flutter/flutter#171056) 2025-06-24 [email protected] Roll Dart SDK from aebd78999b1a to d9edd9e7a634 (1 revision) (flutter/flutter#171053) 2025-06-24 [email protected] Roll Skia from ae517eba0170 to af6feb799ea6 (1 revision) (flutter/flutter#171052) 2025-06-24 [email protected] Roll Skia from a7735d517e6a to ae517eba0170 (9 revisions) (flutter/flutter#171049) 2025-06-24 [email protected] Enable interpretation fallback when unable to JIT on iOS. (flutter/flutter#170835) 2025-06-24 [email protected] Flutter test cleanup (flutter/flutter#170891) 2025-06-24 [email protected] Move `packages_autoroller` out of the carcass of `conductor`, delete `conductor` (flutter/flutter#171029) 2025-06-23 98614782+auto-submit[bot]@users.noreply.github.com Reverts "Don't strip symbols from `libapp.so` on android by default (#162464)" (flutter/flutter#171044) 2025-06-23 [email protected] Roll Dart SDK from a09de0d3556c to aebd78999b1a (2 revisions) (flutter/flutter#171039) 2025-06-23 [email protected] Don't strip symbols from `libapp.so` on android by default (flutter/flutter#162464) 2025-06-23 [email protected] Roll Skia from 0311837abe86 to a7735d517e6a (12 revisions) (flutter/flutter#171037) 2025-06-23 [email protected] Pass font scanner to font mgr that need it (flutter/flutter#170701) 2025-06-23 [email protected] Make service worker tests more lenient. (flutter/flutter#170939) 2025-06-23 [email protected] Remove update CHANGELOG step from stable cherry pick process (flutter/flutter#171017) 2025-06-23 [email protected] Include dev_dependencies in all builds for iOS and macOS (flutter/flutter#171015) 2025-06-23 [email protected] Move `web_long_running_tests_{1,5}_5` to `bringup`. (flutter/flutter#171026) 2025-06-23 [email protected] rename from announce to supportsAnnounce on engine (flutter/flutter#170618) 2025-06-23 [email protected] Roll pub packages (flutter/flutter#171016) 2025-06-23 [email protected] Enhance Text Contrast for WCAG AAA Compliance (flutter/flutter#170758) If this roll has caused a breakage, revert this CL and stop the roller using the controls here: https://autoroll.skia.org/r/flutter-packages ...
|
@davidhicks980 making the |
|
@Albert221 Yes.. although it would have been better if I had included the change in the original RawMenuAnchor PR. The main reason for making MenuController final is that it is now accessible via an inherited widget, MenuController.of(context), so subclasses wouldn't be typed by those using the inherited logic. There're a lot of likes on your comment though, so I'll check with the team to see if I should roll back. |
|
Is the menuControllerOf a big part of the logic? IIRC it's only a convenient getter for developers, right? |
|
@dkwingsmt Anyways, imo removing the Screen.Recording.2025-08-19.at.12.30.08.AM.mov |
|
Yeah I think removing the |
Alternative to #163481, #167537, #163481 that uses callbacks.
@dkwingsmt - you inspired me to simplify the menu behavior. I didn't end up using Actions, mainly because nested behavior was unwieldy and capturing BuildContext has drawbacks. This uses a basic callback mechanism to animate the menu open and closed. Check out the examples.
The problem
RawMenuAnchor synchronously shows or hides an overlay menu in response to
MenuController.open()andMenuController.close, respectively. Because animations cannot be run on a hidden overlay, there currently is no way for developers to add animations to RawMenuAnchor and its subclasses (MenuAnchor, DropdownMenuButton, etc).The solution
This PR:
onOpenRequestedandonCloseRequested-- to RawMenuAnchor.When
MenuController.open()andMenuController.close()are called, onOpenRequested and onCloseRequested are invoked, respectively.Precursor for #143416, #135025, #143712
Demo
Screen.Recording.2025-02-17.at.8.58.43.AM.mov
Pre-launch Checklist
///).If you need help, consider asking for advice on the #hackers-new channel on Discord.