Page URL
https://docs.flutter.dev/cookbook/effects/staggered-menu-animation
Page source
https://github.com/flutter/website/blob/main/sites/docs/src/content/cookbook/effects/staggered-menu-animation.md
Describe the problem
On the Staggered Menu Animation cookbook example, the closing animation doesn't mirror the opening one. The drawer slide (_drawerSlideController, 150ms) closes the panel, but the internal staggered item animation (_staggeredController inside _MenuState) only ever runs .forward() once in initState() and is never reversed.
_isDrawerClosed() checks only _drawerSlideController.value == 0.0. As soon as the 150ms slide finishes, this becomes true and _buildDrawer immediately swaps Menu() for SizedBox(), disposing the Menu widget's state entirely.
Result: opening shows a polished staggered entrance (panel slides in, then items animate in one by one with stagger + elastic button). Closing just slides the whole panel away as a solid block in 150ms — none of the menu items animate out, since their controller never reverses and the widget is torn down before anything could play.
Expected fix
Lift _staggeredController (and its Intervals) out of _MenuState and into _ExampleStaggeredAnimationsState, passing them into Menu as constructor parameters (Menu becomes a StatelessWidget). This keeps the controller alive across the drawer's full open/close lifecycle instead of being recreated/disposed with the widget.
In _toggleDrawer, sequence the close so items animate out first, then the panel slides away:
void _toggleDrawer() {
if (_isDrawerOpen() || _isDrawerOpening()) {
_staggeredController.reverse().whenCompleteOrCancel(() {
_drawerSlideController.reverse();
});
} else {
_drawerSlideController.forward();
_staggeredController.forward(from: 0.0);
}
}
Update _isDrawerClosed() to require both controllers at 0.0:
bool _isDrawerClosed() =>
_drawerSlideController.value == 0.0 && _staggeredController.value == 0.0;
This keeps Menu mounted long enough for the staggered exit animation to finish before the panel itself is removed.
Additional context
Affects the example source linked above (staggered menu animation cookbook page)
Purely an animation-sequencing issue in the sample code, not platform/browser specific
Happy to open a PR with the corrected main.dart — I have a working version that fixes the close animation while keeping the existing open animation intact
I would like to fix this problem.
Page URL
https://docs.flutter.dev/cookbook/effects/staggered-menu-animation
Page source
https://github.com/flutter/website/blob/main/sites/docs/src/content/cookbook/effects/staggered-menu-animation.md
Describe the problem
On the Staggered Menu Animation cookbook example, the closing animation doesn't mirror the opening one. The drawer slide (
_drawerSlideController, 150ms) closes the panel, but the internal staggered item animation (_staggeredControllerinside_MenuState) only ever runs.forward()once ininitState()and is never reversed._isDrawerClosed()checks only_drawerSlideController.value == 0.0. As soon as the 150ms slide finishes, this becomes true and _buildDrawer immediately swapsMenu()forSizedBox(), disposing theMenuwidget's state entirely.Result: opening shows a polished staggered entrance (panel slides in, then items animate in one by one with stagger + elastic button). Closing just slides the whole panel away as a solid block in 150ms — none of the menu items animate out, since their controller never reverses and the widget is torn down before anything could play.
Expected fix
Lift
_staggeredController(and its Intervals) out of_MenuStateand into_ExampleStaggeredAnimationsState, passing them intoMenuas constructor parameters (Menubecomes aStatelessWidget). This keeps the controller alive across the drawer's full open/close lifecycle instead of being recreated/disposed with the widget.In
_toggleDrawer, sequence the close so items animate out first, then the panel slides away:Update
_isDrawerClosed()to require both controllers at0.0:This keeps Menu mounted long enough for the staggered exit animation to finish before the panel itself is removed.
Additional context
Affects the example source linked above (staggered menu animation cookbook page)
Purely an animation-sequencing issue in the sample code, not platform/browser specific
Happy to open a PR with the corrected main.dart — I have a working version that fixes the close animation while keeping the existing open animation intact
I would like to fix this problem.