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-FLUTTER

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,
        ),
      ),
    );
  }
}


Comments

Post a Comment

Popular posts from this blog

Error Handling in Flutter - Gradle issue

Understanding API integration with Getx State management

How to Make a Dynamic and Trending ListView with Flutter Widgets?