Flutter – Implement CrossFading Animation Between Two Screen

CrossFading Animation is an animation technique used to smoothly transition between two images or scenes. The primary concept is to fade out one image or scene while simultaneously fading in another, creating a seamless transition between them. Implementing a cross-fading animation between two screens in Flutter can provide a smooth transition between different views. You can achieve this using the Hero widget and the PageRouteBuilder to create a custom transition. In this article, we are going to implement the CrossFading Animation Between two screens. A sample video is given below to get an idea about what we are going to do in this article.

Step By Step Implementation

Step 1: Create a New Project in Android Studio

To set up Flutter Development on Android Studio please refer to Android Studio Setup for Flutter Development, and then create a new project in Android Studio please refer to Creating a Simple Application in Flutter.

Step 2: Import the Package

First of all import material.dart file.

import 'package:flutter/material.dart';

Step 3: Execute the main Method

Here the execution of our app starts.

Dart

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

Step 4: Create MyApp Class

In this class we are going to implement the MaterialApp , here we are also set the Theme of our App.

Dart

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        // Set the app's primary theme color
        primarySwatch: Colors.green,
      ),
      // Disable the debug banner
      debugShowCheckedModeBanner: false,

      // Set the FirstScreen
      // as the initial screen
      home: FirstScreen(),
    );
  }
}

Step 5: Create FirstScreen Class

In this class we are going to create an button by pressing which we can navigate to the SecondScreen with some CrossFading animated transition.

Dart

class FirstScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        // Set the app bar title
        title: Text('First Screen'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Hero(
              // Provide a unique tag
              // for the Hero widget
              tag: 'Screen 1',
              child: Container(
                width: 100,
                height: 100,
                color: Colors.green,
              ),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                Navigator.of(context).push(
                  PageRouteBuilder(
                    pageBuilder: (context, animation, secondaryAnimation) {
                      // Navigate to the SecondScreen
                      return SecondScreen();
                    },
                    transitionsBuilder:
                        (context, animation, secondaryAnimation, child) {
                      const begin = Offset(1.0, 0.0);
                      const end = Offset.zero;
                      const curve = Curves.easeInOut;
                      var tween = Tween(begin: begin, end: end)
                          .chain(CurveTween(curve: curve));
                      var offsetAnimation = animation.drive(tween);

                      return SlideTransition(
                        // Apply slide transition
                        position: offsetAnimation,
                        child: child,
                      );
                    },
                  ),
                );
              },
              // Button to navigate
              // to the SecondScreen
              child: Text(
                  'Go to Second Screen'),
            ),
          ],
        ),
      ),
    );
  }
}

Step 6: Create SecondScreen Class

Here we create a secondscreen into which animated cross fading transition is done.

Dart

class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        // Set the app bar title
        title: Text('Second Screen'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Hero(
              // Provide a unique tag
              // for the Hero widget
              tag: 'Screen 2',
              child: Container(
                width: 200,
                height: 200,
                color: Colors.orange,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Here is the full Code of main.dart file:

Dart

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        // Set the app's primary theme color
        primarySwatch: Colors.green,
      ),
      // Disable the debug banner
      debugShowCheckedModeBanner: false,

      // Set the FirstScreen
      // as the initial screen
      home: FirstScreen(),
    );
  }
}

class FirstScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        // Set the app bar title
        title: Text('First Screen'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Hero(
              // Provide a unique
              // tag for the Hero widget
              tag: 'Screen 1',
              child: Container(
                width: 100,
                height: 100,
                color: Colors.green,
              ),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                Navigator.of(context).push(
                  PageRouteBuilder(
                    pageBuilder: (context, animation, secondaryAnimation) {
                      // Navigate to the SecondScreen
                      return SecondScreen();
                    },
                    transitionsBuilder:
                        (context, animation, secondaryAnimation, child) {
                      const begin = Offset(1.0, 0.0);
                      const end = Offset.zero;
                      const curve = Curves.easeInOut;
                      var tween = Tween(begin: begin, end: end)
                          .chain(CurveTween(curve: curve));
                      var offsetAnimation = animation.drive(tween);

                      return SlideTransition(
                        // Apply slide transition
                        position: offsetAnimation,
                        child: child,
                      );
                    },
                  ),
                );
              },
              // Button to navigate to the SecondScreen
              child: Text(
                  'Go to Second Screen'),
            ),
          ],
        ),
      ),
    );
  }
}

class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        // Set the app bar title
        title: Text('Second Screen'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Hero(
              // Provide a unique tag
              // for the Hero widget
              tag: 'Screen 2',
              child: Container(
                width: 200,
                height: 200,
                color: Colors.orange,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Output: