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.