Splash Screen In Flutter – Example

In this article, you will learn How To Add Splash Screen To Your Flutter Application.

Installing Package

Adding Splash Screen to your Flutter Application is very easy with this package that we will use in this article.

pubspec.yaml

dependencies:
  flutter:
    sdk: flutter
  splashscreen: ^1.3.5

After adding the dependency, save the YAML file and it will automatically install files.

Using The Package

First, we will import the package in our main.dart file.

main.dart

import 'package:splashscreen/splashscreen.dart';

After importing the package we will create the widget.

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: SplashScreen(
        backgroundColor: Colors.red[400],
        image: Image.network(
            'https://bit.ly/3uyZZ9N'),
        seconds: 5,
        title: Text(
          'CodeSource.io',
          style: TextStyle(color: Colors.white, fontSize: 30),
        ),
        navigateAfterSeconds: Home(),
      ),
    );
  }
}

Above we have a Material App widget with the home as SplashScreen() widget. The Splash Screen widget has some properties as follows:

• backgroundColor: background color of your splash screen
• image: image or any logo for your splash screen
• seconds: for how many seconds you want to show the splash screen
• title: any title like tagline or brand name
• navigateAfterSeconds: the screen which you want to redirect after the splash screen

After customizing your Splash Screen you can use it on platforms like Web, Android, IoS.

Result

Web Version: