Flutter Splash Screen

A splash screen is a graphical control element containing an image or animation that is displayed while an application is initially loading. When it comes to mobile applications, it is a must-have feature to create a great first impression among users. Flutter provides a simple and efficient way to implement the splash screen for the application.

Syntax

Flutter SDK provides SplashScreen class to create a splash screen. You can specify the duration for how long the splash screen should be displayed, and the content you need to display after the duration. Below is the sample code.

class SplashScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text('Splash Screen'),
      ),
    );
  }
}

Example

Below is an example of creating a Splash screen for a Flutter application.

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
 
void main() {
  runApp(MyApp());
}
 
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Splash Screen Demo',
      home: Splash(),
    );
  }
}
 
class Splash extends StatefulWidget {
  @override
  _SplashState createState() => _SplashState();
}
 
class _SplashState extends State<Splash> {
  @override
  void initState() {
    super.initState();
    Timer(Duration(seconds: 3), () {
      Navigator.of(context).pushReplacement(MaterialPageRoute(
        builder: (BuildContext context) => Home(),
      ));
    });
  }
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: Center(
        child: Container(
          decoration: BoxDecoration(
            image: DecorationImage(
              image: AssetImage('assets/images/splash.png'),
              fit: BoxFit.fill
            )
          ),
        ),
      ),
    );
  }
}
 
class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home'),
      ),
      body: Center(
        child: Text('Welcome to Home'),
      ),
    );
  }
}

In this example, we are using the Timer widget to display a Splash screen for 3 seconds. After that, the application navigates to the Home screen.

Output

When the application starts, it displays the splash screen for 3 seconds and then navigates to the Home screen.

Explanation

The above example demonstrates a simple splash screen implementation in a Flutter application. We are using the Timer widget to display the splash screen for a duration of 3 seconds, and then we are navigating to the Home screen.

Use

Splash screens can be used to display branding, animations, and other important information to the user while the application loads. They are useful to create a great first impression among users.

Important Points

• Keep the splash screen duration short to avoid creating a bad user experience.
• Use high-quality images and animations for the splash screen.
• Do not overload the splash screen with too much information.

Summary

Flutter provides a simple and efficient way to implement a splash screen in mobile applications. It can display branding, animations, and other important information while the application loads, creating a great first impression among users. Keeping the duration short, using high-quality images and animations, and avoiding overload of information can result in a great user experience.