Animate a page route transition

 import "package:flutter/material.dart";

void main()
{
  runApp(MyApp());
}
class MyApp extends StatelessWidget
{
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Animate a Page route transition",
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.grey,
      ),
      home: PageOne(),
    );
  }
}
class PageOne extends StatelessWidget
{
  const PageOne({super.key});
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Animate a page route transition"),
        centerTitle: true,
        backgroundColor: Colors.grey,
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () {
                Navigator.push(
                  context,
                  _createRoute(),
                );
              },
              style: ElevatedButton.styleFrom(
                fixedSize: const Size(350.0,50.0),
                backgroundColor: Colors.blue,
              ),
              child: const Text("Go to Page 2",
                style: TextStyle(fontWeight: FontWeight.bold, color: Colors.white, fontSize: 20.0),),
            ),
            const SizedBox(height: 40.0),
            ElevatedButton(
              onPressed: () {
                Navigator.push(
                  context,
                  _createRoute2(),
                );
              },
              style: ElevatedButton.styleFrom(
                fixedSize: const Size(350.0,50.0),
                backgroundColor: Colors.blue,
              ),
              child: const Text("Go to Page 3",
                style: TextStyle(fontWeight: FontWeight.bold, color: Colors.white, fontSize: 20.0),),
            ),
            const SizedBox(height: 40.0),
            ElevatedButton(
              onPressed: () {
                Navigator.push(
                  context,
                  _createRoute3(),
                );
              },
              style: ElevatedButton.styleFrom(
                fixedSize: const Size(350.0, 50.0),
                backgroundColor: Colors.blue,
              ),
              child: const Text("Go to Page 4",
                style: TextStyle(fontWeight: FontWeight.bold, color: Colors.white, fontSize: 20.0),
              ),
            ),
            const SizedBox(height: 40.0),
            ElevatedButton(
              onPressed: () {
                Navigator.push(
                  context,
                  _createRoute4(),
                );
              },
              style: ElevatedButton.styleFrom(
                fixedSize: const Size(350.0, 50.0),
                backgroundColor: Colors.blue,
              ),
              child: const Text("Go to Page 5",
                style: TextStyle(fontWeight: FontWeight.bold, color: Colors.white, fontSize: 20.0),
              ),
            ),
          ],
        ),
      ),
    );
  }
  Route _createRoute()
  {
    return PageRouteBuilder(
      pageBuilder: (context, animation, secondaryAnimation) {
        return PageTwo();
      },
      transitionsBuilder: (context, animation, secondaryAnimation, child) {
        const begin = Offset(0.0, 1.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,
        );
      },
    );
  }

  Route _createRoute2()
  {
    return PageRouteBuilder(
      pageBuilder: (context, animation, secondaryAnimation) {
        return PageThree();
      },
      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,
        );
      },
    );
  }

  Route _createRoute3()
  {
    return PageRouteBuilder(
      pageBuilder: (context, animation, secondaryAnimation) {
        return PageFour();
      },
      transitionsBuilder: (context, animation, secondaryAnimation, child) {
        const begin = Offset(0.0, -1.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,
        );
      },
    );
  }

  Route _createRoute4()
  {
    return PageRouteBuilder(
      pageBuilder: (context, animation, secondaryAnimation) {
        return PageFive();
      },
      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,
        );
      },
    );
  }
}
class PageTwo extends StatelessWidget
{
  const PageTwo({super.key});
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Page Two"),
        centerTitle: true,
        backgroundColor: Colors.grey,
      ),
      body: Container(
        color: Colors.brown,
        child: const Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Icon(Icons.arrow_downward, color: Colors.white),
              Icon(Icons.arrow_upward, color: Colors.white),
              SizedBox(height: 50.0),
              Text("Page 2",
                style: TextStyle(fontWeight: FontWeight.bold, fontSize: 50.0, color: Colors.white),),
            ],
          ),
        ),
      ),
    );
  }
}
class PageThree extends StatelessWidget
{
  const PageThree({super.key});
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Page Three"),
        centerTitle: true,
        backgroundColor: Colors.grey,
      ),
      body: Container(
        color: Colors.teal,
        child: const Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Icon(Icons.arrow_forward, color: Colors.white),
              Icon(Icons.arrow_back, color: Colors.white),
              SizedBox(height: 50.0),
              Text("Page 3",
                style: TextStyle(fontWeight: FontWeight.bold, fontSize: 50.0, color: Colors.white),),
            ],
          ),
        ),
      ),
    );
  }
}
class PageFour extends StatelessWidget
{
  const PageFour({super.key});
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Page Four"),
        centerTitle: true,
        backgroundColor: Colors.grey,
      ),
      body: Container(
        color: Colors.purple,
        child: const Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Icon(Icons.arrow_downward, color: Colors.white),
              Icon(Icons.arrow_upward, color: Colors.white),
              SizedBox(height: 50.0),
              Text("Page 4",
                style: TextStyle(fontWeight: FontWeight.bold, fontSize: 50.0, color: Colors.white),),
            ],
          ),
        ),
      ),
    );
  }
}
class PageFive extends StatelessWidget
{
  const PageFive({super.key});
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Page Five"),
        centerTitle: true,
        backgroundColor: Colors.grey,
      ),
      body: Container(
        color: Colors.green,
        child: const Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Icon(Icons.arrow_forward, color: Colors.white),
              Icon(Icons.arrow_back, color: Colors.white),
              SizedBox(height: 50.0),
              Text("Page 5",
                style: TextStyle(fontWeight: FontWeight.bold, fontSize: 50.0, color: Colors.white),),
            ],
          ),
        ),
      ),
    );
  }
}