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.