How to make a fade animation after Splash screen animation

I was building an app and decided to make it open with a splash screen animation. The animation came out perfect, the problems comes after the animation. The way things jump into place make the app look staticky. I'd like things to look a little more smooth by fading too the next screen.

Here is a link to the github, if you want to take a better look: https://github.com/Yoshi252/gudlife/tree/main

main.dart:

void main() {
  runApp(
    MaterialApp(
      theme: theme,
      routes: {
        '/': (context) => Splash(),
        '/login': (context) => LoginScreen(),
      },
    ),
  );
}

splash.dart

Here is all the functionality for the splash screen

class Splash extends StatefulWidget {
  const Splash({super.key});


  @override
  State<Splash> createState() => _SplashState();
}

class _SplashState extends State<Splash> with RouteAware{
  var isVisible = false;

  void initState() {
    super.initState();
    startTimer();
  }

  startTimer(){
    var duration = Duration(milliseconds: 3340);
    return Timer(duration, route);
  }

  route(){
    Navigator.pushReplacementNamed(context, '/login');
    print(ModalRoute.of(context)?.settings.name);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color.fromARGB(255, 0, 0, 0),
      body: content(),
    );
  }

  Widget content() {
    return Center(
      child: Container(
        child: Lottie.asset('assets/images/splash.json'),
      ),
    );
  }
}

Login.dart

After doing research I tried wrapping the LoginForm in an AnimatedOpacity widget but it didn't work since I had no way to trigger it.

class LoginScreen extends StatefulWidget {
  const LoginScreen({super.key});

  @override
  State<LoginScreen> createState() => _LoginScreenState();
}

class _LoginScreenState extends State<LoginScreen> with RouteAware{
  @override
  Widget build(BuildContext context) {

    return Scaffold(
      body: Center(
        child: Container(
          decoration: const BoxDecoration(
            gradient: LinearGradient(
              colors: [
                Color.fromARGB(255, 50, 50, 50),
                Color.fromARGB(255, 0, 0, 0)
              ],
              begin: Alignment.topLeft,
              end: Alignment.bottomRight,
            ),
          ),
          child: const LoginForm(),
        ),
      ),
    );
  }
}

Try to use fade animation while navigating.

Navigator.pushReplacement(
  context,
  PageRouteBuilder(
    pageBuilder: (context, animation, secondaryAnimation) => LoginScreen(),
    transitionsBuilder: (context, animation, secondaryAnimation, child) {
      return FadeTransition(
        opacity: animation,
        child: child,
      );
    },
  ),
);