Simple Page Transition Animation in Flutter

Creating smooth and elegant page transitions in Flutter can significantly enhance user experience, especially in mobile apps. Flutter makes it incredibly simple to implement animated route changes using built-in tools like PageRouteBuilder, AnimatedSwitcher, and FadeTransition. This tutorial will guide you step-by-step on how to create a simple fade transition between pages using Android Studio.

What You’ll Learn:

• How to use PageRouteBuilder for custom transitions
• How to apply FadeTransition for smooth effects
• Code structure separation for scalability

Prerequisites:

Ensure that Flutter is installed and Android Studio is set up correctly. You can check the official Flutter installation guide if needed.

Step-by-Step Code Breakdown:

1. main.dart

import 'package:flutter/material.dart';
import 'home_page.dart';
import 'second_page.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Page Transition Demo',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: HomePage(),
    );
  }
}

2. home_page.dart

import 'package:flutter/material.dart';
import 'second_page.dart';

class HomePage extends StatelessWidget {
  void _navigateToSecondPage(BuildContext context) {
    Navigator.of(context).push(_createRoute());
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Home Page')),
      body: Center(
        child: ElevatedButton(
          child: Text('Go to Second Page'),
          onPressed: () => _navigateToSecondPage(context),
        ),
      ),
    );
  }
}

3. second_page.dart

import 'package:flutter/material.dart';

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')),
    );
  }
}

Result:

When the button is pressed, the app will smoothly fade into the next page using FadeTransition. This simple page animation helps create a more professional and delightful UI experience.

Tips:

• Use other transitions like SlideTransition, ScaleTransition, or combine multiple effects for a more dynamic feel.
• Encapsulate transitions into reusable widgets for better code management.