Implicit animations (AnimatedContainer, AnimatedOpacity) in Flutter - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

What happens when you tap the AnimatedContainer below?

Consider this Flutter widget that uses AnimatedContainer. What will you see after tapping the container?

Flutter

class MyWidget extends StatefulWidget {
  @override
  State<MyWidget> createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  bool selected = false;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () => setState(() => selected = !selected),
      child: AnimatedContainer(
        width: selected ? 200 : 100,
        height: selected ? 100 : 200,
        color: selected ? Colors.blue : Colors.red,
        duration: Duration(seconds: 1),
        curve: Curves.easeInOut,
      ),
    );
  }
}

A The container instantly changes size and color without animation.

B The container smoothly changes size and color between red and blue over 1 second.

C The container changes color but size stays the same.

D Nothing happens because AnimatedContainer requires an explicit animation controller.

💡 Hint

AnimatedContainer automatically animates changes to its properties over the given duration.

AnimatedContainer animates changes to its width, height, and color smoothly over the specified duration when the state changes.

❓ ui_behavior

intermediate

What is the visual effect of this AnimatedOpacity widget when toggled?

Look at this Flutter widget using AnimatedOpacity. What will the user see when the button is pressed?

Flutter

class FadeWidget extends StatefulWidget {
  @override
  State<FadeWidget> createState() => _FadeWidgetState();
}

class _FadeWidgetState extends State<FadeWidget> {
  bool visible = true;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        AnimatedOpacity(
          opacity: visible ? 1.0 : 0.0,
          duration: Duration(milliseconds: 500),
          child: Container(
            width: 100,
            height: 100,
            color: Colors.green,
          ),
        ),
        ElevatedButton(
          onPressed: () => setState(() => visible = !visible),
          child: Text('Toggle'),
        ),
      ],
    );
  }
}

A The green box changes size but stays fully visible.

B The green box slides left and right when toggled.

C The green box fades in and out smoothly when the button is pressed.

D The green box instantly appears and disappears without animation.

💡 Hint

AnimatedOpacity animates the transparency of its child widget.

AnimatedOpacity smoothly changes the opacity from 1.0 (fully visible) to 0.0 (invisible) over the given duration.

❓ lifecycle

advanced

Why does AnimatedContainer rebuild its animation when setState is called?

In Flutter, when you call setState to change properties of an AnimatedContainer, why does it animate the change instead of instantly updating?

A Because AnimatedContainer requires an explicit AnimationController to animate changes.

B Because setState triggers a rebuild that resets the animation controller to zero.

C Because Flutter caches the widget and does not rebuild it on setState.

D Because AnimatedContainer listens to property changes and automatically animates between old and new values.

💡 Hint

Think about how implicit animations work in Flutter.

AnimatedContainer detects changes in its properties and animates smoothly from the old to the new value automatically.

📝 Syntax

advanced

Which option correctly uses AnimatedOpacity to fade out a widget over 2 seconds?

Choose the correct Flutter code snippet that fades out a widget smoothly over 2 seconds using AnimatedOpacity.

A AnimatedOpacity(opacity: 0.0, duration: Duration(seconds: 2), child: Text('Fade'))

B AnimatedOpacity(opacity: 0, duration: 2, child: Text('Fade'))

C AnimatedOpacity(opacity: 0.0, duration: Duration(milliseconds: 2000), child: Text('Fade'))

D AnimatedOpacity(opacity: 0.0, duration: 2.seconds, child: Text('Fade'))

💡 Hint

Duration must be created with Duration() and seconds as a named parameter.

Option A correctly uses Duration(seconds: 2) and opacity as a double 0.0.

🔧 Debug

expert

Why does this AnimatedContainer not animate on property change?

Given this Flutter code, why does the container jump instantly instead of animating?

class MyWidget extends StatefulWidget {
  @override
  State createState() => _MyWidgetState();
}

class _MyWidgetState extends State {
  bool selected = false;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () => selected = !selected,
      child: AnimatedContainer(
        width: selected ? 200 : 100,
        height: selected ? 100 : 200,
        color: selected ? Colors.blue : Colors.red,
        duration: Duration(seconds: 1),
      ),
    );
  }
}

A Because setState() is not called after changing the selected variable, so widget does not rebuild.

B Because AnimatedContainer requires an explicit AnimationController to animate.

C Because the duration is too short to see the animation.

D Because GestureDetector does not detect taps on AnimatedContainer.

💡 Hint

Remember what triggers a widget rebuild in Flutter.

Without calling setState(), Flutter does not know the state changed and does not rebuild the widget, so no animation occurs.