Splash screen - Flutter

A splash screen is an introductory screen that users see when they launch your application. It is a chance to showcase your brand identity and keep users occupied while your app loads in the background. This screen can either be an image, graphic, logo, or animation sometimes coupled with a progress bar.

In this Blog, we will see how to create a simple and easy Splash screen that showcases your App Name.

splash_screen.dart

import 'package:flutter/material.dart';
import 'package:my_new_project/Responsive/responsive_layout.dart';
import 'package:my_new_project/ui/desktop/walk_through_desktop.dart';
import 'package:my_new_project/ui/mobile/walk_through_mobile.dart';


class SplashScreen extends StatefulWidget {
  const SplashScreen({super.key});
  static const routeName = '/splash-screen';

  @override
  State<SplashScreen> createState() => _SplashScreenState();
}

class _SplashScreenState extends State<SplashScreen> {
  @override
  void initState() {
    super.initState();
    init();
  }

  Future<void> init() async {
    await Future.delayed(const Duration(seconds: 3));
    // ignore: use_build_context_synchronously
    Navigator.pushReplacement(
        context,
        MaterialPageRoute(
            builder: (context) => ResponsiveLayout(
                  mobileBody: const WalkThroughScreenMobile(),
                  desktopBody: const WalkThroughScreenDesktop(),
                )));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: Center(
        child: Image.asset(
          'assests/images/logo.png',
          fit: BoxFit.cover,
          height: 200,
          width: 200,
        ),
      ),
    );
  }
}