Add a splash screen - Flutterstacks

How to add a splash screen in a flutter app

A splash screen is the first thing users see when they launch your app. It sets the tone, introduces your brand, and builds anticipation for what’s to come. In this guide, I’ll walk you through the process of adding a splash screen to your Flutter app, ensuring it leaves a lasting impression.

Why Splash Screens Matter

Before we jump into implementation details, let’s quickly discuss why splash screens are essential.

Brand Identity: A well-designed splash screen reflects your app’s branding, instantly familiarizing users with your product.
First Impressions: As the saying goes, “You never get a second chance to make a first impression.” A sleek splash screen can captivate users from the get-go.
User Experience: Splash screens provide feedback to users, assuring them that the app is loading. This prevents them from feeling frustrated or confused.

Getting Started

To add a splash screen to your Flutter app, follow these steps:

1. Create a file

Create a new dart file and name it splash_screen

2. Make it a stateful widget

3. Add a init function

4. Add time delayed to perform delay

You can perform anything here, or just delay to load assets and branding.
You can Navigate it to a desired screen or add logic to perform anything logical

Future.delayed(
      const Duration(seconds: 3),
      () {
        //TODO
        // Navigate to any page
      },
    );

You are Done

Add a SplashScreen as a home screen in main file

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Flutter Demo',
      home: SplashScreen(),
    );
  }
}

Final Code

import 'package:flutter/material.dart';

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

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

class _SplashScreenState extends State<SplashScreen> {
  @override
  void initState() {
    Future.delayed(
      const Duration(seconds: 3),
      () {
        //TODO
        // Navigate to any page
      },
    );
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return const Scaffold(
      body: Center(
        child: CircularProgressIndicator(),
      ),
    );
  }
}