Splash Screen

Splash Screen is the first screen or page shown to users during the launch of a mobile application. When I started working on Flutter, the first thing that came to my mind while examining sample applications or thinking about the mobile applications I use myself was the splash screen. That’s why I care about it and that’s why I wanted to write about it.

I think it is very important in terms of creating a first impression for users. Because this screen is the first thing the user sees when they launch the application. The brand logo can be used here, a picture can be shown, an inspirational phrase can be placed, music can start while this screen is displayed, etc. Also, showing users this screen when launching the app provides feedback that the app is loading or preparing. This can help users see that the app is working and responding, improving the user experience. Now let’s move on to creating this.

Creating a basic Splash Screen in Flutter is quite simple. We design a simple splash screen using basic widgets like Scaffold and Center.

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.cyan[200], // Splash Screen background color
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Image.asset(
              'assets/english.png', // Splash Screen image
              width: 400,
              height: 600,
            ),
            const SizedBox(height: 20),
            Text(
              'My Splash Screen App', // Title text
              style: TextStyle(
                fontSize: 24,
                color: Colors.blueGrey[700],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

The code above uses the Scaffold widget to create a Splash Screen with a background color and images and text in a column in the center.

In my self-developed application linked below, there is a simple Splash Screen example:

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0XFFFFD72D),
      body: Center(
        child: Image.asset('assets/icons/animated_logo.gif')
      ),
    );
  }
}

The result is as follows:

FlashCards Application link:

https://play.google.com/store/apps/details?id=com.cemnamak.flash_cards

The examples I’ve given so far are about creating simple Splash Screen with Flutter’s own widgets. When I want to use a package from pub.dev, the things I usually look for are its popularity, who developed it (the ones developed by Flutter’s own team are more reliable when it comes to updates etc.) and whether it is compatible with the latest Dart version.
At this point, we can easily create splash screens with the splash_view package, which has 90% popularity. Let’s see how we can do it.

First we install the package in our project by typing the following command in the terminal.

flutter pub add splash_view

At the beginning of the project, we introduce the package to our project file by importing it as follows.

import 'package:splash_view/splash_view.dart';

Then we write our codes according to the package content.

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: SplashView(
        backgroundColor: Colors.blue[100],
        loadingIndicator: const RefreshProgressIndicator(),
        logo: const FlutterLogo(
          size: 102.0,
        ),
      ),
    );
  }
}

The result is as follows:

Finally, I end my article by talking about the points we should pay attention to when creating Splash Screen.

The first thing we need to pay attention to is visual design and brand harmony. Since this screen creates the first impression of our application, it is very important to choose colors, fonts and images that are compatible with the theme of our application and reflect the brand identity.

The duration of the Splash Screen should not be too long to bore the user or too short to see the item on the screen. It directly affects the user experience. Unnecessary loads should also not be included.

By adding transition effects and animations, we can provide a more immersive experience. Especially while the application is loading or preparing, such effects can provide feedback to the user and make the wait more pleasant.

To ensure that the Splash Screen displays properly on different screen sizes and resolutions, we need to create it in accordance with responsive design principles. This can result in unpleasant, unexpected images on different devices and screen ratios. Therefore, we should not forget to test it on different devices.

In conclusion, Splash Screen is an important element that improves the user experience of our app and promotes our brand identity. This screen, which is the first thing users see when they open our app, is often the first impression of the rest of the app’s experience, so we need to design it carefully. I hope I have been useful.

Have a good work.

Selin.