Learn Custom Page Transitions | Animations and Advanced UI

Definition

Custom page transitions in Flutter let you define how one screen animates to another instead of using the platform’s default navigation animations.

By default, Flutter uses platform-specific transitions, like slide-from-right on Android and Cupertino-style slides on iOS. Creating custom transitions allows you to fade, scale, rotate, or combine effects to better match your app’s branding and improve the overall user experience.

main.dart


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

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

class CustomTransitionApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Custom Page Transition Demo',
      home: FirstScreen(),
    );
  }
}

class FirstScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('First Screen')),
      body: Center(
        child: ElevatedButton(
          child: Text('Go to Second Screen'),
          onPressed: () {
            Navigator.of(context).push(_createFadeRoute());
          },
        ),
      ),
    );
  }
}

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

class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Second Screen')),
      body: Center(
        child: Text('This is the second screen'),
      ),
    );
  }
}

This example uses PageRouteBuilder to create a custom fade transition. The pageBuilder defines the target screen, and transitionsBuilder uses the animation value from 0.0 to 1.0 to drive a FadeTransition, making the new page fade in instead of sliding.

Everything was clear?

Thanks for your feedback!

Section 3. Chapter 3

Ask AI

Ask anything or try one of the suggested questions to begin our chat