PageRouteBuilder with Animation Example

When building mobile apps with Flutter, smooth navigation and engaging transitions play a significant role in user experience. By default, Flutter provides standard transitions when navigating between screens. However, developers often want to implement custom animations that match the app’s design language. This is where PageRouteBuilder becomes extremely useful.

In this article, we will explore how to use PageRouteBuilder with animation in Flutter, step by step. We will cover the fundamentals, show a complete working code example, and provide a real-world use case scenario. By the end of this guide, you will be able to create smooth and customizable animated page transitions in your Flutter apps.

What is PageRouteBuilder in Flutter?

PageRouteBuilder is a Flutter widget that allows developers to define custom page transition animations when navigating between screens. Unlike the default MaterialPageRoute, this class gives full control over how the animation should be applied.

Some key features of PageRouteBuilder:

• Customize the duration of transitions
• Define custom animation effects (slide, fade, scale, rotation, or combined)
• Full control over the PageRoute lifecycle

Why Use PageRouteBuilder with Animation?

Using custom animations makes the navigation experience more engaging. For example:

• A shopping app can use a fade and scale transition when opening product details.
• A chat app can use a slide transition when moving from a chat list to a conversation screen.
• A portfolio app can use a rotation effect when showing project details.

With PageRouteBuilder with animation, you can go beyond the default Material or Cupertino transitions and create a unique experience for your users.

Basic Syntax of PageRouteBuilder

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

The pageBuilder defines which page should appear, while transitionsBuilder defines how the animation should run during navigation.

Step-by-Step Example

Now let’s build a complete example: we will create two screens and navigate between them using PageRouteBuilder with a slide + fade animation.

Full Code Example

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'PageRouteBuilder Example',
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Page'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.push(context, _createRoute());
          },
          child: Text('Go to Details'),
        ),
      ),
    );
  }

  Route _createRoute() {
    return PageRouteBuilder(
      pageBuilder: (context, animation, secondaryAnimation) => DetailsPage(),
      transitionsBuilder: (context, animation, secondaryAnimation, child) {
        // Slide + Fade animation
        const begin = Offset(1.0, 0.0);
        const end = Offset.zero;
        const curve = Curves.ease;

        var tween = Tween(begin: begin, end: end).chain(CurveTween(curve: curve));
        var fadeTween = Tween(begin: 0.0, end: 1.0);

        return SlideTransition(
          position: animation.drive(tween),
          child: FadeTransition(
            opacity: animation.drive(fadeTween),
            child: child,
          ),
        );
      },
    );
  }
}

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

Explanation of the Code

• PageRouteBuilder is used instead of MaterialPageRoute.
• The pageBuilder specifies the DetailsPage widget as the destination screen.
• The transitionsBuilder applies two animations:
  • A SlideTransition from right to left
  • A FadeTransition that fades in the page
• The CurveTween ensures the animation feels smooth with an ease curve.

Real-World Use Case

Consider you are building an e-commerce app. When a user taps on a product, instead of a sudden page change, you can use a PageRouteBuilder with animation to make the product details screen smoothly slide in and fade. This makes the experience more professional and keeps users engaged.

Comparison with MaterialPageRoute

Best Practices

• Keep transitions consistent across the app to avoid confusing users.
• Use curves like Curves.easeInOut for smoother animations.
• Do not overuse fancy animations, as it can slow down navigation.
• Test on both Android and iOS to ensure smooth performance.

Conclusion

PageRouteBuilder with animation in Flutter gives developers powerful tools to create engaging and professional transitions. By mastering it, you can go beyond the default navigation and bring your app’s user interface to life. Whether you need a simple fade or a complex combination of slide, scale, and rotation, PageRouteBuilder has you covered.

For more details about navigation in Flutter, you can also check the official Flutter documentation at Flutter PageRouteBuilder Guide.