Page transition animations in Flutter - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

Which transition animation will slide the new page from the bottom?

Given the Flutter code below, which option correctly creates a page transition that slides the new page from the bottom of the screen?

Flutter

Navigator.of(context).push(PageRouteBuilder(
  pageBuilder: (context, animation, secondaryAnimation) => NewPage(),
  transitionsBuilder: (context, animation, secondaryAnimation, child) {
    // Choose the correct Tween here
    final tween = ???;
    final offsetAnimation = animation.drive(tween);
    return SlideTransition(position: offsetAnimation, child: child);
  },
));

A Tween<Offset>(begin: Offset(0, -1), end: Offset.zero)

B Tween<Offset>(begin: Offset(1, 0), end: Offset.zero)

C Tween<Offset>(begin: Offset(0, 1), end: Offset.zero)

D Tween<Offset>(begin: Offset(-1, 0), end: Offset.zero)

💡 Hint

Think about the Offset coordinates: (0, 1) means below the screen, (0, -1) means above.

Offset(0, 1) means the widget starts just below the screen and slides up to its normal position (Offset.zero). This creates a slide-from-bottom animation.

❓ lifecycle

intermediate

When does the transition animation start in Flutter's PageRouteBuilder?

In Flutter, using PageRouteBuilder for custom page transitions, when does the transition animation begin?

A Immediately after Navigator.push is called

B After the new page's build method completes

C Only after the previous page is disposed

D When the user taps the screen

💡 Hint

Think about when Navigator.push triggers the route change.

The animation starts immediately after Navigator.push is called, as the new route begins its transition onto the screen.

📝 Syntax

advanced

Identify the syntax error in this custom fade transition code

What is the syntax error in this Flutter PageRouteBuilder transitionsBuilder snippet?

Flutter

transitionsBuilder: (context, animation, secondaryAnimation, child) {
  return FadeTransition(
    opacity: animation,
    child: child,
  );
},

A Missing semicolon after return statement

B No syntax error; code is correct

C transitionsBuilder must return a Widget, but returns void

D FadeTransition requires a Tween animation, not animation directly

💡 Hint

Check the types expected by FadeTransition's opacity parameter.

FadeTransition's opacity parameter accepts an Animation, and animation is already Animation. The code is syntactically correct.

🔧 Debug

advanced

Why does the page not animate when using MaterialPageRoute?

A developer uses Navigator.push with MaterialPageRoute but sees no animation on page transition. What is the most likely cause?

A The new page widget is not a StatefulWidget

B MaterialPageRoute requires a transitionsBuilder to animate

C Navigator.push must be called with a custom animation controller

D MaterialPageRoute uses default platform animation which may be subtle or disabled

💡 Hint

MaterialPageRoute uses platform default animations.

MaterialPageRoute uses the platform's default animation, which can be subtle or disabled depending on device settings. It does not require a transitionsBuilder.

🧠 Conceptual

expert

What is the effect of reversing the animation in a PageRouteBuilder transition?

In Flutter, if you reverse the animation parameter in the transitionsBuilder (e.g., using animation.drive(Tween).reverse()), what is the visual effect on the page transition?

A The transition animation plays backward, causing the page to appear from the opposite direction

B The animation does not run and the page appears instantly

C The new page slides out instead of sliding in

D The animation causes the previous page to fade out instead of the new page fading in

💡 Hint

Think about what reversing a Tween animation does to the movement direction.

Reversing the animation plays the transition backward, so the page appears to come from the opposite direction or the animation runs in reverse.