Contents
Outline
I try to develop an app with Flutter. In this blog post, I will introduce how to change the Splash screen in Flutter.
To apply a Splash screen, normally we need to create each image for Android and iOS and configure the images to each platform.
However, if you use the flutter_native_splash package, you can change it more simply.
Prepare imaage
There is no limitaion of the image file on the official document. However, I used the image file like the condition below.
- PNG file
- bigger than 3000px X 3000px
Store the file to assets/splash.png.
Install flutter_native_splash
To use the flutter_native_splash package, we need to install the flutter_native_splash pacakge. Execute the command below to install the flutter_native_splash pageckage.
flutter pub add flutter_native_splash --dev
Configure Splash image
Next, we need to configure an image for the Splash screen. To configure the splash screen, create the ./flutter_native_splash.yaml file in the Flutter project folder and modify it like the following.
...
flutter_native_splash:
color: "#FFFFFF"
image: assets/splash.png
fullscreen: true
flutter_native_splash package options
The flutter_native_splash package has some options.
- color: Splash screen background color
- background_image: Splash screen background image
- image: Splash screen image
- color_dark: background color when the device is the dark-mode
- background_image_dark: background image when the device is the dark-mode
- image_dark: Splash screen image when the device is the dark-mode
- android_gravity: Splash image position on Android. (bottom, center, center_horizontal, center_vertical, clip_horizontal, clip_vertical, end, fill, fill_horizontal, fill_vertical, left, right, start, top)
- ios_content_mode: Splash image position on iOS. (scaleToFill, scaleAspectFit, scaleAspectFill, center, top, bottom, left, right, topLeft, topRight, bottomLeft, bottomRight)
- web_image_mode: Splash image position on Web. (center, contain, stretch, cover)
- fullscreen: show the splash screen to full screen (true, false)
- info_plist_files: if the info.plist file name is changed, set this option for it.
Generate Splash images
If you finish to configure the flutter_native_splash options, execute the command below to generate the Splash images.
flutter pub run flutter_native_splash:create
Tip
If you use the flutter_native_splash package to create the Splash images, you don’t need any modifiction to show the Splash screen.
You can use the Splash screen with the tips below.
Initial data
Normally, we show the Splash screen and get the initial data. At this time, we can use Future and async-await to get the data under the Splash screen.
import 'package:flutter/material.dart';
Future<void> main() async {
bool data = await fetchData();
print(data);
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Home(),
);
}
}
Future<bool> fetchData() async {
bool data = false;
// Change to API call
await Future.delayed(Duration(seconds: 3), () {
data = true;
});
return data;
}
...
Change the main funciton to async-await, and get the data before starting the app with runApp. As this structure, we can get the data when the Splash screen is shwoing.
Status bar
In this blog post, I configured the fullscreen: true in the pubspec.yaml file to create the Splash images. I’m not sure this is the flutter_native_splash package bug, when the app is stared on iOS, the Status bar is not shown up. So I use the codeb below to display the Status bar.
...
import 'package:flutter/services.dart';
...
class Home extends StatelessWidget {
Home() {
SystemChrome.setEnabledSystemUIMode(
SystemUiMode.manual,
overlays: SystemUiOverlay.values,
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Home'),
),
body: Center(
child: Text('Hello world!'),
),
);
}
}
Android 12 issue
From the Android 12 version, the app icon is shown on the splash screen basically. flutter_native_splash provides the options below to use another image instead of the app icon.
flutter_native_splash:
android_12:
# The image parameter sets the splash screen icon image. If this parameter is not specified,
# the app's launcher icon will be used instead.
# Please note that the splash screen will be clipped to a circle on the center of the screen.
# App icon with an icon background: This should be 960×960 pixels, and fit within a circle
# 640 pixels in diameter.
# App icon without an icon background: This should be 1152×1152 pixels, and fit within a circle
# 768 pixels in diameter.
#image: assets/android12splash.png
# Splash screen background color.
#color: "#42a5f5"
# App icon background color.
#icon_background_color: "#111111"
# The branding property allows you to specify an image used as branding in the splash screen.
#branding: assets/dart.png
# The image_dark, color_dark, icon_background_color_dark, and branding_dark set values that
# apply when the device is in dark mode. If they are not specified, the app will use the
# parameters from above.
#image_dark: assets/android12splash-invert.png
#color_dark: "#042a49"
#icon_background_color_dark: "#eeeeee"
The new image is shown by clipping to a circle and on the center of the screen. So, I don’t use this option, and I modify the android/app/src/main/AndroidManifest.xml file by adding the code like the following.
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example.app">
<application
android:label="app"
android:name="${applicationName}"
android:icon="@mipmap/ic_launcher">
<activity
android:name=".MainActivity"
...>
...
<!-- Displays an Android View that continues showing the launch screen
Drawable until Flutter paints its first frame, then this splash
screen fades out. A splash screen is useful to avoid any visual
gap between the end of Android's launch screen and the painting of
Flutter's first frame. -->
<meta-data
android:name="io.flutter.embedding.android.SplashScreenDrawable"
android:resource="@drawable/launch_background"
/>
<intent-filter>
...
</intent-filter>
</activity>
...
</application>
</manifest>
If you modify it like this, the app icon splash screen is shown first, and then, the splash screen created by flutter_native_splash is shown again.
Completed
Done! we’ve seen how to change the Splash screen on Flutter. Like this blog post, if you use the flutter_native_splash package, you can change the App Splash screen simply on Flutter.
Was my blog helpful? Please leave a comment at the bottom. it will be a great help to me!
App promotion
Deku.Deku created the applications with Flutter.If you have interested, please try to download them for free.
