AnimationController in Flutter - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

What happens when AnimationController.repeat() is called?

Consider an AnimationController with duration 2 seconds. What is the visible behavior when calling controller.repeat() in a Flutter app?

Flutter

final controller = AnimationController(vsync: this, duration: Duration(seconds: 2));
controller.repeat();

A The animation does not start until controller.forward() is called.

B The animation runs once forward from 0.0 to 1.0 and then stops.

C The animation runs forward then backward repeatedly between 0.0 and 1.0.

D The animation runs forward repeatedly from 0.0 to 1.0 without stopping.

💡 Hint

Think about what repeat() means for an animation's progress.

The repeat() method makes the animation run forward continuously from 0.0 to 1.0 and then restarts at 0.0 automatically.

❓ lifecycle

intermediate

What happens if you don't dispose AnimationController?

In a StatefulWidget, what is the consequence of not calling controller.dispose() on an AnimationController in the dispose() method?

Flutter

class MyWidgetState extends State<MyWidget> with SingleTickerProviderStateMixin {
  late AnimationController controller;

  @override
  void initState() {
    super.initState();
    controller = AnimationController(vsync: this, duration: Duration(seconds: 1));
  }

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

A The app will leak memory and may cause performance issues over time.

B The controller will automatically dispose itself when the widget is removed.

C The animation will stop immediately without errors.

D The app will crash with a runtime error.

💡 Hint

Think about resources held by the controller and how Flutter manages them.

AnimationController holds resources like ticker. Not disposing it causes memory leaks and performance degradation.

📝 Syntax

advanced

Which code snippet correctly creates an AnimationController with vsync?

Choose the code snippet that correctly initializes an AnimationController inside a State class with SingleTickerProviderStateMixin.

A controller = AnimationController(vsync: this, duration: Duration(seconds: 1));

B controller = AnimationController(duration: Duration(seconds: 1), vsync: this);

C controller = AnimationController(Duration(seconds: 1), this);

D controller = AnimationController(this, duration: Duration(seconds: 1));

💡 Hint

Check the named parameters order and syntax.

AnimationController requires named parameters. The correct order is vsync and duration, both named. The order of named parameters does not matter.

❓ navigation

advanced

How to synchronize AnimationController with page navigation?

You want an animation to start when a new page appears and reverse when leaving. Which lifecycle method is best to start the AnimationController forward animation?

A Start animation in initState() and reverse in dispose().

B Start animation in didPush() of RouteObserver and reverse in didPop().

C Start animation in didChangeDependencies() and reverse in deactivate().

D Start animation in build() and reverse in didUpdateWidget().

💡 Hint

Think about how to detect page navigation events in Flutter.

Using RouteObserver lets you detect when a page is pushed or popped to start or reverse animations accordingly.

🧠 Conceptual

expert

What is the value of AnimationController.value after calling reverse() from 0.0?

If an AnimationController's current value is 0.0 and you call controller.reverse(), what will be the value of controller.value immediately after the call?

Flutter

final controller = AnimationController(vsync: this, duration: Duration(seconds: 1));
controller.value = 0.0;
controller.reverse();
final val = controller.value;

A Throws an error because reverse() cannot be called at 0.0 value.

B 1.0 because reverse() sets the animation to the end before reversing.

C 0.0 because the animation is already at the start and cannot reverse further.

D A value between 0.0 and 1.0 depending on the animation progress.

💡 Hint

Think about what reverse() does if the animation is already at the beginning.

If the animation is at 0.0, calling reverse() does not move it backward; it stays at 0.0.