Page transition animations in Flutter

Introduction

Page transition animations make moving between screens smooth and clear. They help users understand where they are going in the app.

When opening a new screen after tapping a button.

When going back to the previous screen.

When switching between tabs or sections.

When showing a detail page from a list.

When you want to add polish and improve user experience.

Syntax

Flutter

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

Use Navigator.push to go to a new page with a default animation.

Wrap the new page in MaterialPageRoute to get the standard slide animation.

Examples

This pushes SecondPage onto the stack with a slide animation from right to left.

Flutter

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

This goes back to the previous page with a slide animation from left to right.

Flutter

Navigator.pop(context);

This uses a custom fade animation when moving to ThirdPage.

Flutter

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

Sample App

This app has two pages. Pressing the button on the first page slides to the second page. Pressing the button on the second page slides back.

Flutter

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: FirstPage(),
    );
  }
}

class FirstPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('First Page')),
      body: Center(
        child: ElevatedButton(
          child: Text('Go to Second Page'),
          onPressed: () {
            Navigator.push(context, MaterialPageRoute(builder: (context) => SecondPage()));
          },
        ),
      ),
    );
  }
}

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Second Page')),
      body: Center(
        child: ElevatedButton(
          child: Text('Go Back'),
          onPressed: () {
            Navigator.pop(context);
          },
        ),
      ),
    );
  }
}

Important Notes

Page transitions help users feel the app is alive and easy to follow.

You can customize animations using PageRouteBuilder for unique effects.

Always test animations on real devices to check smoothness.

Summary

Use Navigator.push and Navigator.pop for page navigation with default animations.

Wrap new pages in MaterialPageRoute for standard slide transitions.

Customize animations with PageRouteBuilder and transition widgets like FadeTransition.

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