Flutter animatedOpacity onEnd not being called - flutter

Question

I'm unable to get the onEnd portion of AnimatedOpacity to get called.
I've got a _visible variable set to false, I'm changing that value with setState that is called on a button press, however the print statement in onEnd is never called.
Declared at the top of my widget and set to false initially.
bool _visible = false;
setState is updating visible from a textbutton onPressed
setState(() {
_visible = !_visible;
});
The visibility widget is toggled once the above state is passed however the container that is the child of the AnimatedOpacity widget is immediately shown ( there is no animated fade out from opacity to solid black ), and the only way to trigger the animation completely is to modify the _visible ? 1.0 : 0.0.
The goal is to get the container once triggered to change from an opacity of 0 to 1 then call onEnd, which currently is not happening.
Visibility(
visible: _visible,
child: Center(
child: AnimatedOpacity(
opacity: _visibility ? 1.0 : 0.0,
duration: const Duration(milliseconds: 1000),
onEnd: () {
print("I am never called");
},
child: Container(
width: double.infinity,
height: double.infinity,
color: Colors.black,
),
),
),
),
import 'package:flutter/material.dart';
class MyWidget extends StatefulWidget {
#override
State<StatefulWidget> createState() {
return _MyWidgetState();
}
}
class _MyWidgetState extends State<MyWidget> {
bool _visible = false;
#override
Widget build(BuildContext context) {
return Scaffold(
resizeToAvoidBottomInset: false,
body: Stack(children: [
TextButton(
style: ElevatedButton.styleFrom(
elevation: 10,
shape: CircleBorder(),
primary: Colors.transparent,
onSurface: Colors.transparent,
shadowColor: Colors.transparent,
),
onPressed: () {
setState(() {
_visible = !_visible;
});
},
child: Icon(Icons.home, color: Colors.white),
),
Visibility(
visible: _visible,
child: Center(
child: AnimatedOpacity(
opacity: _visible ? 1 : 0,
duration: const Duration(milliseconds: 1000),
onEnd: () {
print("I am not called but should be");
},
child: Container(
width: 200,
height: 200,
color: Colors.black,
),
),
),
),
]));
}
}

Answer 1

The problem with you code is that the AnimatedOpacity widget is wrapped inside a Visibility widget, which is not animated. Therefore when you call setState to toggle _visible member, the container will become instantly visible. The animation won't run at all, because by the time the Container becomes visible, the _visible member's value is already 1.
To solve this, simply remove Visibility widget, when the AnimatedOpacity reaches opacity value of 0, the Container will be invisible and on value 1 it will be visible, animating between the two states. The print is also executed in onEnd:
class MyWidget extends StatefulWidget {
#override
State<StatefulWidget> createState() {
return _MyWidgetState();
}
}
class _MyWidgetState extends State<MyWidget> {
bool _visible = false;
#override
Widget build(BuildContext context) {
return Scaffold(
resizeToAvoidBottomInset: false,
body: Stack(children: [
TextButton(
style: ElevatedButton.styleFrom(
elevation: 10,
shape: const CircleBorder(),
primary: Colors.transparent,
onSurface: Colors.transparent,
shadowColor: Colors.transparent,
),
onPressed: () {
setState(() {
_visible = !_visible;
});
},
child: const Icon(Icons.home, color: Colors.white),
),
Center(
child: AnimatedOpacity(
opacity: _visible ? 1 : 0,
duration: const Duration(milliseconds: 1000),
onEnd: () {
print("I am not called but should be");
},
child: Container(
width: 200,
height: 200,
color: Colors.black,
),
),
]));
}
}