Page transition animations in Flutter - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to navigate to a new page with a default animation.

Flutter

Navigator.of(context).push(MaterialPageRoute(builder: (context) => [1]()));

Drag options to blanks, or click blank then click option'

ASecondPage

BScaffold

CContainer

DText

Attempts:

3 left

💡 Hint

Common Mistakes

Using a widget that is not a page or screen.

Forgetting to call the widget constructor with parentheses.

You need to specify the widget class of the new page to navigate to. Here, SecondPage is the correct page widget.

2fill in blank

medium

Complete the code to create a fade transition animation when navigating.

Flutter

Navigator.of(context).push(PageRouteBuilder(pageBuilder: (context, animation, secondaryAnimation) => SecondPage(), transitionsBuilder: (context, animation, secondaryAnimation, child) => FadeTransition(opacity: [1], child: child),));

Drag options to blanks, or click blank then click option'

Aanimation

Banimation.drive(CurveTween(curve: Curves.easeIn))

CsecondaryAnimation

DAlwaysStoppedAnimation(0.5)

Attempts:

3 left

💡 Hint

Common Mistakes

Using secondaryAnimation instead of animation.

Using a fixed opacity value instead of an animation.

The FadeTransition uses the animation object directly as the opacity to animate the fade effect.

3fill in blank

hard

Fix the error in the slide transition code to slide the new page from the right.

Flutter

Navigator.of(context).push(PageRouteBuilder(pageBuilder: (context, animation, secondaryAnimation) => SecondPage(), transitionsBuilder: (context, animation, secondaryAnimation, child) => SlideTransition(position: animation.drive(Tween<Offset>(begin: [1], end: Offset.zero).chain(CurveTween(curve: Curves.easeInOut))), child: child),));

Drag options to blanks, or click blank then click option'

AOffset(-1.0, 0.0)

BOffset(0.0, 1.0)

COffset(1.0, 0.0)

DOffset(0.0, -1.0)

Attempts:

3 left

💡 Hint

Common Mistakes

Using negative x offset which slides from left instead of right.

Using y offsets which slide vertically instead of horizontally.

To slide the page in from the right, the begin offset should be (1.0, 0.0), meaning start fully right off-screen.

4fill in blank

hard

Fill both blanks to create a scale transition that grows the new page from nothing to full size.

Flutter

Navigator.of(context).push(PageRouteBuilder(pageBuilder: (context, animation, secondaryAnimation) => SecondPage(), transitionsBuilder: (context, animation, secondaryAnimation, child) => ScaleTransition(scale: animation.drive(Tween<double>(begin: [1], end: [2]).chain(CurveTween(curve: Curves.easeIn))), child: child),));

Drag options to blanks, or click blank then click option'

A0.0

B1.0

C0.5

D2.0

Attempts:

3 left

💡 Hint

Common Mistakes

Using begin scale larger than end scale causing reverse animation.

Using values greater than 1.0 which enlarges the page beyond normal size.

The scale should start at 0.0 (no size) and grow to 1.0 (full size) for a smooth scale-up animation.

5fill in blank

hard

Fill all three blanks to create a rotation transition that spins the new page in while fading it in.

Flutter

Navigator.of(context).push(PageRouteBuilder(pageBuilder: (context, animation, secondaryAnimation) => SecondPage(), transitionsBuilder: (context, animation, secondaryAnimation, child) => FadeTransition(opacity: animation, child: RotationTransition(turns: animation.drive(Tween<double>(begin: [1], end: [2]).chain(CurveTween(curve: Curves.easeInOut))), child: child),),));

Drag options to blanks, or click blank then click option'

A0.0

B1.0

C0.5

D-1.0

Attempts:

3 left

💡 Hint

Common Mistakes

Using positive begin value which spins clockwise instead of counterclockwise.

Not chaining the curve tween for smooth animation.

The rotation starts at -1.0 turns (one full spin counterclockwise) and ends at 0.0 (no rotation), while opacity animates from 0 to 1 for fade-in.

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