Hero animations in Flutter - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

What happens when two Hero widgets have different tags?

Consider two screens each containing a Hero widget. The Hero on the first screen has tag 'hero1', and the Hero on the second screen has tag 'hero2'. What will happen when navigating between these screens?

A The app will crash due to tag mismatch.

B The Hero animation will run smoothly between the two widgets despite different tags.

C The Hero animation will not run; the widgets will just appear without animation.

D The Hero widgets will animate but with a flicker effect.

💡 Hint

Hero animations require matching tags to link widgets across screens.

Hero animations only work when the Hero widgets on both screens share the same tag. Different tags mean Flutter cannot match the widgets, so no animation occurs.

❓ lifecycle

intermediate

When does the Hero animation start during navigation?

At what point in the navigation lifecycle does the Hero animation begin when pushing a new route?

A After both the source and destination widgets have been built and laid out.

B Immediately after the new route is pushed but before the new screen builds.

C Before the source widget is removed from the widget tree.

D Only after the new route's build method completes.

💡 Hint

Think about when Flutter can measure widget positions for animation.

The Hero animation starts after both source and destination widgets are built and laid out so Flutter knows their positions to animate between them.

📝 Syntax

advanced

Identify the correct Hero widget usage

Which of the following Flutter code snippets correctly implements a Hero widget wrapping an Image with tag 'profilePic'?

A Hero(tag: 'profilePic', child: Image.asset('assets/pic.png'))

B Hero(child: Image.asset('assets/pic.png'), tag: 'profilePic')

C Hero(tag: 'profilePic', child: Image('assets/pic.png'))

D Hero(tag: profilePic, child: Image.asset('assets/pic.png'))

💡 Hint

Check the order of parameters and tag type.

Option A uses correct parameter order and a string tag. Option A has parameters reversed (though Flutter allows named parameters in any order, so B is valid). Option A uses an undefined variable profilePic instead of a string. Option A uses Image constructor incorrectly.

🔧 Debug

advanced

Why does this Hero animation cause a jump instead of smooth transition?

Given two screens with Hero widgets sharing the same tag, the animation jumps abruptly instead of smoothly transitioning. What is the most likely cause?

Flutter

Screen 1:
Hero(tag: 'logo', child: Container(width: 100, height: 100, color: Colors.blue))

Screen 2:
Hero(tag: 'logo', child: Container(width: 200, height: 200, color: Colors.blue))

A The Hero widgets have different tags causing the jump.

B The Hero widgets have different sizes causing the jump.

C The Hero widgets are missing a Material ancestor.

D The Hero widgets have different colors causing the jump.

💡 Hint

Hero animations can handle size changes but abrupt jumps usually mean size difference without smooth scaling.

Different sizes between source and destination Hero widgets can cause the animation to jump if the transition is not smooth. Colors do not cause jumps, and tags are the same here. Material ancestor absence causes errors but not jumps.

🧠 Conceptual

expert

What is the role of FlightShuttleBuilder in Hero animations?

In Flutter's Hero widget, what does the FlightShuttleBuilder property control?

A It disables the Hero animation when set to null.

B It controls the duration of the Hero animation.

C It specifies the curve used for the Hero animation.

D It defines the widget shown during the Hero's flight animation between screens.

💡 Hint

Think about customizing the look of the Hero while it moves.

FlightShuttleBuilder lets you customize the widget displayed during the Hero's transition animation, allowing different visuals than the source or destination widgets.