Reverse widget animation on destroy

Question

I'm trying to animate a widget when it's created and reverse the animation when it's destroyed, but can't figure out where should I call the reverse method. Here's how I managed to do it

class _MyAnimatedWidgetState extends State<MyAnimatedWidget>
    with SingleTickerProviderStateMixin {
  late AnimationController controller;
  late Animation<double> animation;
  @override
  void initState() {
    super.initState();
    controller = AnimationController(
        vsync: this, duration: const Duration(milliseconds: 400));
    animation = Tween<double>(begin: 0, end: 1).animate(controller);
    controller.forward();
  }

  @override
  Widget build(BuildContext context) {
    return SizeTransition(
      axis: Axis.vertical,
      sizeFactor: animation,
      child: Container(
        height: 400,
        color: Colors.blue,
        width: double.infinity,
      ),
    );
  }

  @override
  void dispose() {
    controller.reverse();
    controller.dispose();
    super.dispose();
  }
}

The animation works well on creation, but the reverse method has no effect.

When it will be destroyed ? are you using any method to dispose the widget? — Md. Yeasin Sheikh, Apr 23 '22 at 06:52
I'm using this widget in another one of course, on a certain condition, this widget is being replaced by another. So disposed is called eventually. — Ahmed Nabil, Apr 23 '22 at 08:10

score 1 · Accepted Answer · answered Jan 03 '23 at 13:04

1

If the widget is being replaced by another, use AnimatedSwitcher (Widget of the week video)

If you want to animate the widget upon navigation, read here.

answered Jan 03 '23 at 13:04

Sina Seirafi

2,073
3
15
16

Reverse widget animation on destroy

1 Answers1