MenuAnchor animations broken after 3.19 #143781
Description
Steps to reproduce
Making a simple animation for a menu made with MenuAnchor using widgets like AnimatedOpacity() no longer works after 3.19. Downgrading back to 3.16.9 fixes it. Not sure if this is the best way to animate a menu in the first place, but it had been working well for me. I think maybe it has to do with this new change #130534, though I really have no idea. That's just the only thing I noticed explicitly changed about MenuAnchor.
- Make a MenuAnchor menu that pops up a menu on clicking a button
- wrap the menuChildren in an animated widget like AnimatedOpacity
- Make this widget animate a change like opacity based on whether the menu is open/visible or not.
- The animations do not work, regardless of duration, curve, or type of animation (AnimatedContainer, opacity, crossfade, etc are all broken)
Expected results
The menu that pops up should be animated. In this case, opacity should fade in.
Actual results
There is no animation.
Code sample
import 'package:flutter/material.dart';
void main() {
runApp(const AnimatedMenuAnchor());
}
class AnimatedMenuAnchor extends StatefulWidget {
const AnimatedMenuAnchor({super.key});
@override
State<AnimatedMenuAnchor> createState() => _AnimatedMenuAnchorState();
}
class _AnimatedMenuAnchorState extends State<AnimatedMenuAnchor> {
bool _visible = false;
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: MenuAnchor(
onClose: () => setState(() {
_visible = false;
}),
onOpen: () => setState(() {
_visible = true;
}),
builder: (BuildContext context, MenuController controller,
Widget? child) {
return TextButton(
onPressed: () {
if (controller.isOpen) {
controller.close();
} else {
controller.open();
}
},
child: const Text('OPEN MENU'),
);
},
menuChildren: <Widget>[
AnimatedOpacity(
opacity: _visible ? 1.0 : 0.0,
duration: const Duration(milliseconds: 500),
child: Column(
children: [
MenuItemButton(
child: const Text('Option 1'),
onPressed: () {},
),
MenuItemButton(
child: const Text('Option 2'),
onPressed: () {},
),
MenuItemButton(
child: const Text('Option 3'),
onPressed: () {},
),
],
),
),
],
),
),
),
);
}
}
Screenshots or Video
Screenshots / Video demonstration
This is how it looked in 3.16.9: In 3.19 there is no animation.
Screencast.from.2024-02-20.15-35-48.mp4
To see that it no longer works, you can copy the code into dartpad.
Logs
Logs
[Paste your logs here]Flutter Doctor output
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.19.0, on Ubuntu 23.10 6.5.0-17-generic, locale en_US.UTF-8)
[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
[✓] Chrome - develop for the web
[✓] Linux toolchain - develop for Linux desktop
[✓] Android Studio (version 2023.1)
[✓] VS Code (version 1.86.1)
[✓] Connected device (2 available)
[✓] Network resources
• No issues found!