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.

Practice

1. What does Navigator.push(context, MaterialPageRoute(builder: (context) => NewPage())) do in Flutter?

easy

A. It navigates to NewPage with a default slide animation.

B. It closes the current page without animation.

C. It replaces the current page without animation.

D. It shows a dialog instead of navigating.

Solution

1. Step 1: Understand Navigator.push usage

   Navigator.push adds a new page on top of the current stack, showing it.

2. Step 2: Recognize MaterialPageRoute effect

   Using MaterialPageRoute wraps the new page with a default slide animation from right to left.

3. Final Answer:

   It navigates to NewPage with a default slide animation. -> Option A

4. Quick Check:

   Navigator.push + MaterialPageRoute = Slide animation [OK]

Hint: Navigator.push with MaterialPageRoute slides new page in [OK]

Common Mistakes:

• Thinking Navigator.push closes current page
• Confusing MaterialPageRoute with dialog display
• Assuming no animation happens

2. Which of the following is the correct syntax to pop the current page in Flutter?

easy

A. Navigator.pop(context);

B. Navigator.popScreen(context);

C. Navigator.popRoute(context);

D. Navigator.popPage(context);

Solution

1. Step 1: Recall Navigator.pop method

   The correct method to remove the top page from the navigation stack is Navigator.pop(context).

2. Step 2: Verify method names

   Other options like popPage, popRoute, and popScreen do not exist in Flutter's Navigator API.

3. Final Answer:

   Navigator.pop(context); -> Option A

4. Quick Check:

   Pop current page = Navigator.pop(context) [OK]

Hint: Use Navigator.pop(context) to go back [OK]

Common Mistakes:

• Using non-existent Navigator methods
• Confusing pop with push
• Missing the context parameter

3. What will be the visual effect of this code snippet when navigating to NewPage()?

Navigator.push(context, PageRouteBuilder(
  pageBuilder: (context, animation, secondaryAnimation) => NewPage(),
  transitionsBuilder: (context, animation, secondaryAnimation, child) {
    return FadeTransition(opacity: animation, child: child);
  },
));

medium

A. The new page slides in from the bottom.

B. The new page zooms in from the center.

C. The new page appears instantly without animation.

D. The new page fades in smoothly.

Solution

1. Step 1: Analyze transitionsBuilder

   The transitionsBuilder returns a FadeTransition using the animation's opacity.

2. Step 2: Understand FadeTransition effect

   FadeTransition animates the opacity from transparent to fully visible, creating a fade-in effect.

3. Final Answer:

   The new page fades in smoothly. -> Option D

4. Quick Check:

   FadeTransition = fade in animation [OK]

Hint: FadeTransition means page fades in [OK]

Common Mistakes:

• Assuming slide or zoom animation instead of fade
• Ignoring transitionsBuilder parameter
• Confusing PageRouteBuilder with MaterialPageRoute

4. Identify the error in this Flutter code for custom page transition:

Navigator.push(context, PageRouteBuilder(
  pageBuilder: (context, animation, secondaryAnimation) => NewPage(),
  transitionsBuilder: (context, animation, secondaryAnimation, child) {
    return SlideTransition(
      position: Tween(begin: Offset(1, 0), end: Offset.zero),
      child: child,
    );
  },
));

medium

A. Wrong type for position property.

B. Missing .animate(animation) on the Tween.

C. Should use MaterialPageRoute instead of PageRouteBuilder.

D. Missing context parameter in pageBuilder.

Solution

1. Step 1: Check Tween usage in SlideTransition

   The position property requires an Animation<Offset>, but Tween alone is not an animation.

2. Step 2: Fix Tween to animate with animation

   We must call .animate(animation) on the Tween to convert it into an animation.

3. Final Answer:

   Missing .animate(animation) on the Tween. -> Option B

4. Quick Check:

   Tween must be animated with .animate(animation) [OK]

Hint: Tween needs .animate(animation) for SlideTransition [OK]

Common Mistakes:

• Using Tween without .animate(animation)
• Confusing SlideTransition properties
• Thinking MaterialPageRoute is required for custom animation

5. You want to create a page transition where the new page slides in from the bottom and fades in simultaneously. Which code snippet correctly achieves this?

hard

A. Navigator.push(context, PageRouteBuilder(
pageBuilder: (context, animation, secondaryAnimation) => NewPage(),
transitionsBuilder: (context, animation, secondaryAnimation, child) {
return FadeTransition(opacity: animation, child: child);
},
));

B. Navigator.push(context, MaterialPageRoute(builder: (context) => NewPage()));

C. Navigator.push(context, PageRouteBuilder(
pageBuilder: (context, animation, secondaryAnimation) => NewPage(),
transitionsBuilder: (context, animation, secondaryAnimation, child) {
final slide = Tween(begin: Offset(0, 1), end: Offset.zero).animate(animation);
final fade = Tween(begin: 0.0, end: 1.0).animate(animation);
return SlideTransition(
position: slide,
child: FadeTransition(opacity: fade, child: child),
);
},
));

D. Navigator.push(context, PageRouteBuilder(
pageBuilder: (context, animation, secondaryAnimation) => NewPage(),
transitionsBuilder: (context, animation, secondaryAnimation, child) {
return SlideTransition(
position: Tween(begin: Offset(1, 0), end: Offset.zero).animate(animation),
child: child,
);
},
));

Solution

1. Step 1: Understand combined animations

   To combine slide and fade, wrap FadeTransition inside SlideTransition or vice versa, both animated by the same animation.

2. Step 2: Check code correctness

   Navigator.push(context, PageRouteBuilder( pageBuilder: (context, animation, secondaryAnimation) => NewPage(), transitionsBuilder: (context, animation, secondaryAnimation, child) { final slide = Tween(begin: Offset(0, 1), end: Offset.zero).animate(animation); final fade = Tween(begin: 0.0, end: 1.0).animate(animation); return SlideTransition( position: slide, child: FadeTransition(opacity: fade, child: child), ); }, )); correctly creates two Tweens animated by animation and nests FadeTransition inside SlideTransition.

3. Final Answer:

   Creates a page transition where the new page slides in from the bottom and fades in simultaneously. -> Option C

4. Quick Check:

   Combine SlideTransition + FadeTransition with animated Tweens [OK]

Hint: Nest FadeTransition inside SlideTransition with animated Tweens [OK]

Common Mistakes:

• Using only one animation type instead of both
• Not animating Tweens properly
• Using MaterialPageRoute for custom animations