Page transition animations in Flutter - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a page transition animation in Flutter?

A page transition animation is a visual effect that happens when you move from one screen (page) to another in a Flutter app. It helps users understand the change and makes the app feel smooth.

intermediate

Which Flutter widget is commonly used to create custom page transition animations?

The <code>PageRouteBuilder</code> class lets you define custom animations for page transitions by specifying how the new page appears and disappears.

intermediate

What is the role of the transitionsBuilder in PageRouteBuilder?

The transitionsBuilder defines the animation effect during the page transition. It takes animation objects and returns a widget that animates the transition.

beginner

Name two common built-in page transition animations in Flutter.

Two common built-in animations are FadeTransition (fades the new page in) and SlideTransition (slides the new page from a direction).

intermediate

How can you make a page slide in from the right when navigating to it?

Use PageRouteBuilder with a SlideTransition that animates the page's position from right (Offset(1, 0)) to center (Offset(0, 0)).

Which widget helps create custom page transition animations in Flutter?

A Text

B Container

C Scaffold

D PageRouteBuilder

PageRouteBuilder allows you to define custom animations for page transitions.

What does the transitionsBuilder parameter do?

A Defines the animation effect during page transition

B Sets the page title

C Handles user input

D Loads images

The transitionsBuilder defines how the new page animates onto the screen.

Which animation makes the new page fade in?

A FadeTransition

B SlideTransition

C ScaleTransition

D RotationTransition

FadeTransition animates the opacity to fade the page in.

To slide a page from left to right, which Offset should you start with in SlideTransition?

A Offset(0, 0)

B Offset(-1, 0)

C Offset(1, 0)

D Offset(0, 1)

Offset(-1, 0) means start off-screen to the left and slide to center.

Which Flutter method is used to navigate to a new page with animation?

A runApp

B setState

C Navigator.push

D build

Navigator.push is used to move to a new page, and you can provide a custom route with animation.

Explain how to create a custom page transition animation in Flutter using PageRouteBuilder.

Think about how you tell Flutter what animation to use when moving between pages.

Describe the difference between FadeTransition and SlideTransition in page animations.

One makes the page appear by fading, the other by sliding.

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