Flutter : Screen Animation tutorial

In this tutorial, we will learn how to perform animations while navigating from one screen to another. We will not require any other dependency to be installed. We will demonstrate the following example.

So let's start.

Approach

Instead of using the default MaterialPageRoute, we will use the PageRouteBuilder. PageRouteBuilder provides all the functionalities like duration, type of animation.

Syntax

The syntax for PageRouteBuilder is as follows.

PageRouteBuilder(
  transitionDuration: const Duration(seconds: 1),
  pageBuilder: (context, animation, secondaryAnimation) {
    return const SecondScreen();
  },
),

The parameters and fields are self-explanatory.

Code

Let us code our First Screen of the app.

class FirstScreen extends StatelessWidget {
  const FirstScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("First Screen"),
      ),
      body: Center(
        child: Column(
          children: <Widget>[
            const Text("First Screen"),
            ElevatedButton(
              onPressed: () {
                Navigator.push(
                  context,
                  PageRouteBuilder(
                    transitionDuration: const Duration(seconds: 1),
                    transitionsBuilder:
                        (context, animation, secondaryAnimation, child) {
                      const begin = Offset(0, -1);
                      const end = Offset.zero;
                      final tween = Tween(begin: begin, end: end);
                      return SlideTransition(
                        position: animation.drive(tween),
                        child: child,
                      );
                    },
                    pageBuilder: (context, animation, secondaryAnimation) {
                      return const SecondScreen();
                    },
                  ),
                );
              },
              child: const Text("Second Screen"),
            )
          ],
        ),
      ),
    );
  }
}

We have used another field transitionBuilder. Here we will tween the animation will navigating from the current screen to the next screen and vice versa.

We have used the SlideTransition widget to give a sliding animation effect. There are many other animations presets. We can also create our own custom animations.

The Second Screen code is very simple.

class SecondScreen extends StatelessWidget {
  const SecondScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Second Screen"),
      ),
      body: const Center(
        child: Text("Second Screen"),
      ),
    );
  }
}

Run the code and see the result.

We can also use different curved animations. Replace the transitionBuilder code with the following.

transitionsBuilder:
    (context, animation, secondaryAnimation, child) {
  const begin = Offset(0, -1);
  const end = Offset.zero;
  final tween = Tween(begin: begin, end: end);
  final curvedAnimation = CurvedAnimation(
      curve: Curves.easeIn, parent: animation);
  return SlideTransition(
    position: tween.animate(curvedAnimation),
    child: child,
  );
},

Run the code again.

Thank you. If you have any doubt comment below. Learn more flutter tutorials from the below links.