Page Transitions in Flutter

What is Page Transitions in Flutter?

Introduction

Welcome to another insightful Article on Widget Wisdom! Today, we’ll dive into the art of creating seamless and eye-catching page transitions in Flutter. Whether you’re working on a simple project or a more complex app, custom transitions can significantly enhance the user experience. By the end of this guide, you’ll be equipped with the knowledge to implement stunning transitions with ease.

You can also watch this very helpful video.

Understanding Page Transitions in Flutter

In Flutter, a page transition is the animation that occurs when navigating from one screen to another. By default, Flutter uses a simple slide transition, but the framework provides the flexibility to customize these transitions to align with your app’s design and enhance user engagement.

Setting Up the Project

To get hands-on, start by creating a new Flutter project. For this example, we’ll set up two basic pages: HomePage and SecondPage. These will serve as our playground to demonstrate various transition effects.

Sample Code for Setup:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      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,
              MaterialPageRoute(builder: (context) => SecondPage()),
            );
          },
          child: Text('Go to Second Page'),
        ),
      ),
    );
  }
}

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Second Page'),
      ),
      body: Center(
        child: Text('Welcome to the second page!'),
      ),
    );
  }
}

This code sets up a basic structure with a HomePage featuring a button that navigates to SecondPage. Currently, the navigation uses Flutter’s default slide transition.

Implementing a Fade Transition

Let’s customize the transition by implementing a fade effect. This subtle transition can add a touch of elegance to your app.

Sample Code for Fade Transition:

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

In this snippet, we use PageRouteBuilder to create a custom route. The transitionsBuilder allows us to define the animation—here, a fade transition that smoothly changes the opacity as the new page appears.

Results:

Implementing a Slide Transition

Next, let’s enhance the user experience with a dynamic slide transition, which can be particularly effective in apps requiring fluid navigation.

Sample Code for Slide Transition:

Navigator.push(
  context,
  PageRouteBuilder(
    pageBuilder: (context, animation, secondaryAnimation) => SecondPage(),
    transitionsBuilder: (context, animation, secondaryAnimation, child) {
      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));

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

In this code, we define start and end points using Offset, and apply a CurveTween for smooth motion. The result is a page that slides in from the right, creating a fluid, engaging transition.

Results:

Scale and Rotation Transition

Let’s take it a step further by combining scale and rotation effects, adding a unique flair to your transitions.

Sample Code for Scale and Rotation Transition:

Navigator.push(
  context,
  PageRouteBuilder(
    pageBuilder: (context, animation, secondaryAnimation) => SecondPage(),
    transitionsBuilder: (context, animation, secondaryAnimation, child) {
      return ScaleTransition(
        scale: Tween(begin: 0.0, end: 1.0).animate(
          CurvedAnimation(
            parent: animation,
            curve: Curves.fastOutSlowIn,
          ),
        ),
        child: RotationTransition(
          turns: Tween(begin: 0.5, end: 1.0).animate(
            CurvedAnimation(
              parent: animation,
              curve: Curves.easeInOut,
            ),
          ),
          child: child,
        ),
      );
    },
  ),
);

In this example, ScaleTransition creates a zoom effect, while RotationTransition adds a subtle spin as the page appears. These combined effects can make your app’s transitions more playful and engaging.

Results:

Conclusion

And that’s a wrap! We’ve covered the basics of implementing various page transitions in Flutter, from fades to slides and more intricate combinations. These techniques can significantly elevate the user experience, making your app stand out.

Show Your Support

You can also checkout the official documentation here.

Explore Other Flutter Topics…

1. What is Flutter
2. Stateful VS Stateless Widget
3. Async and Await in Flutter
4. Web Animation in Flutter
5. Flutter Injectable
6. Dependency Injection in Flutter
7. Flutter Reusable custom Widgets
8. Flutter Custom Shapes
9. Build Responsive UIs in Flutter using MediaQuery