import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.amber,
      ),
      home: const MyHomePage(replace: true),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.redAccent.shade400,
      body: Center(
        child: TextButton.icon(
          onPressed: () {
            Navigator.of(context).pop();
          },
          icon: const Icon(Icons.arrow_back_rounded),
          label: const Text('Return to 1st route'),
        ),
      ),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.replace}) : super(key: key);
  final bool replace;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  Route _createRoute(Widget newRoute) {
    return PageRouteBuilder(
      pageBuilder: (BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation) {
        return Align(
          alignment: Alignment.topCenter,
          child: SizeTransition(
            sizeFactor: Tween<double>(begin: 1.0, end: 0.0)
                .animate(CurvedAnimation(parent: secondaryAnimation, curve: Curves.linearToEaseOut)),
            axisAlignment: -1.0,
            child: newRoute,
          ),
        );
      },
      transitionDuration: const Duration(milliseconds: 800),
      reverseTransitionDuration: const Duration(milliseconds: 800),
      transitionsBuilder:
          (BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation, Widget child) {
        return SlideTransition(
          position: Tween<Offset>(begin: const Offset(0.0, 1.0), end: Offset.zero)
              .animate(CurvedAnimation(parent: animation, curve: Curves.easeInOutQuart)),
          child: child,
        );
      },
    );
  }

  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addPostFrameCallback((Duration timeStamp) {
      //THE REASON FOR DOING THIS: MAIN ROUTE HAS TO BE PUSHED WITH THE CUSTOM ROUTE AS WELL, OTHERWISE IT DOESN'T WORK, SO THIS IS THE BEST SOLUTION I CAME UP WITH.
      if (widget.replace) {
        Navigator.of(context).pushReplacement(_createRoute(const MyHomePage(replace: false)));
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.blueAccent.shade400,
      body: Center(
        child: TextButton.icon(
          onPressed: () {
            Navigator.of(context).push(_createRoute(const SecondRoute()));
          },
          icon: const Icon(Icons.arrow_forward_rounded),
          label: const Text('Go to 2nd route'),
        ),
      ),
    );
  }
}