Automatically generate native code for adding splash screens with flutter
flutter_native_splash
Automatically generates native code for adding splash screens in Android and iOS. Customize with specific platform, background color and splash image.
When your app is opened, there is a brief time while the native app loads Flutter. By default, during this time the native app displays a white splash screen. This package automatically generates iOS, Android, and Web native code for customizing this native splash screen background color and splash image. Supports dark mode, full screen, and platform-specific options.
Usage
Would you prefer a video tutorial instead? Check out Johannes Milke's tutorial.
First, add flutter_native_splash as a dev dependency in your pubspec.yaml file. It belongs in dev_dependencies because it is a command line tool.
dev_dependencies:
flutter_native_splash: ^1.1.8+4
Don't forget to flutter pub get.
NOTE:
If you are using Flutter 1.x (no null safety), you must use the 0.x version of this package.
1. Setting the splash screen
Customized the following settings and add to your project's pubspec.yaml file or place in a new file in your root project folder named flutter_native_splash.yaml.
flutter_native_splash:
# This package generates native code to customize Flutter's default white native splash screen
# with background color and splash image.
# Customize the parameters below, and run the following command in the terminal:
# flutter pub run flutter_native_splash:create
# To restore Flutter's default white splash screen, run the following command in the terminal:
# flutter pub run flutter_native_splash:remove
# color or background_image is the only required parameter. Use color to set the background
# of your splash screen to a solid color. Use background_image to set the background of your
# splash screen to a png image. This is useful for gradients. The image will be stretch to the
# size of the app. Only one parameter can be used, color and background_image cannot both be set.
color: "#42a5f5"
#background_image: "assets/background.png"
# Optional parameters are listed below. To enable a parameter, uncomment the line by removing
# the leading # character.
# The image parameter allows you to specify an image used in the splash screen. It must be a
# png file.
#image: assets/splash.png
# The color_dark, background_image_dark, and image_dark are parameters that set the background
# and image when the device is in dark mode. If they are not specified, the app will use the
# parameters from above. If the image_dark parameter is specified, color_dark or
# background_image_dark must be specified. color_dark and background_image_dark cannot both be
# set.
#color_dark: "#042a49"
#background_image_dark: "assets/dark-background.png"
#image_dark: assets/splash-invert.png
# The android, ios and web parameters can be used to disable generating a splash screen on a given
# platform.
#android: false
#ios: false
#web: false
# The position of the splash image can be set with android_gravity, ios_content_mode, and
# web_image_mode parameters. All default to center.
#
# android_gravity can be one of the following Android Gravity (see
# https://developer.android.com/reference/android/view/Gravity): bottom, center,
# center_horizontal, center_vertical, clip_horizontal, clip_vertical, end, fill, fill_horizontal,
# fill_vertical, left, right, start, or top.
#android_gravity: center
#
# ios_content_mode can be one of the following iOS UIView.ContentMode (see
# https://developer.apple.com/documentation/uikit/uiview/contentmode): scaleToFill,
# scaleAspectFit, scaleAspectFill, center, top, bottom, left, right, topLeft, topRight,
# bottomLeft, or bottomRight.
#ios_content_mode: center
#
# web_image_mode can be one of the following modes: center, contain, stretch, and cover.
#web_image_mode: center
# To hide the notification bar, use the fullscreen parameter. Has no affect in web since web
# has no notification bar. Defaults to false.
# NOTE: Unlike Android, iOS will not automatically show the notification bar when the app loads.
# To show the notification bar, add the following code to your Flutter app:
# WidgetsFlutterBinding.ensureInitialized();
# SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.bottom, SystemUiOverlay.top]);
#fullscreen: true
# If you have changed the name(s) of your info.plist file(s), you can specify the filename(s)
# with the info_plist_files parameter. Remove only the # characters in the three lines below,
# do not remove any spaces:
#info_plist_files:
# - 'ios/Runner/Info-Debug.plist'
# - 'ios/Runner/Info-Release.plist'
2. Run the package
After adding your settings, run the following command in the terminal:
flutter pub run flutter_native_splash:create
When the package finishes running, your splash screen is ready.
Recommendations
Secondary splash screen:
The native splash screen is displayed while the native app loads the Flutter framework. Once Flutter loads, there may still be resources that need to be loaded before your app is ready. For this reason, you should consider implementing a Flutter splash screen that is displayed while these resources load. Here is a code example of a secondary Flutter splash screen, or use a package from pub.dev.
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return FutureBuilder(
// Replace the 3 second delay with your initialization code:
future: Future.delayed(Duration(seconds: 3)),
builder: (context, AsyncSnapshot snapshot) {
// Show splash screen while waiting for app resources to load:
if (snapshot.connectionState == ConnectionState.waiting) {
return MaterialApp(home: Splash());
} else {
// Loading is done, return the app:
return MaterialApp(
home: Scaffold(body: Center(child: Text('App loaded'))),
);
}
},
);
}
}
class Splash extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Icon(
Icons.apartment_outlined,
size: MediaQuery.of(context).size.width * 0.785,
),
),
);
}
}
Material resources:
-
If you want to use a Material Icon as your splash image, download an icon in (material.io/resources/icons) as PNG for Android. I recommend using the biggest icon in
drawable-xxxhdpifolder which was just downloaded for better results. -
Material Colors are available in material.io/resources/color