“This is the 24th day of my participation in the First Challenge 2022. For details: First Challenge 2022.”

This article translated from pub: flutter_native_splash | Flutter Package (Flutter – IO. Cn)

Translation version: Flutter_native_splash 2.0.2

When the app is opened, there is a short time before the native app loads the Flutter. By default, native apps display a white screen during this time. The package automatically generates native code for iOS, Android, and the Web to customize the background color and image of the splash screen. Supports dark mode, full screen, and platform-specific options.

The new content

It is now possible to display a splash screen during app initialization! No need for a second splash screen. Simply use the removeAfter method to remove the splash screen after initialization. Check out the details below.

usage

Would you rather see a video guide? Check out Johannes Milke’s guide (YouTube).

First, add the Flutter_native_SPLASH dependency to the pubspec.yaml file.

dependencies:
  flutter_native_splash: ^ 2.0.2
Copy the code

Don’t forget to flutter pub get.

1. The screen flashes

Customize the following Settings and add them to the project’s pubspec.yaml file, or place a new file named Flutter_native_splash. Yaml in the project folder.

flutter_native_splash:

  # This saw generates native code to customize the background color and splash screen image of the Flutter default white native splash screen interface.
  # Customize the following parameters, then run the following command from the command line terminal:
  # flutter pub run flutter_native_splash:create
  To revert to the default white splash screen of Flutter, run the following command:
  # flutter pub run flutter_native_splash:remove

  # Only color or background_image are required parameters. Use color to set the background of the splash screen to monochrome.
  Background_image can be used to set a PNG image as the background of the splash screen. The image is stretched to fit the application.
  # color and background_image cannot be set at the same time, only one will be used.
  color: "#42a5f5"
  #background_image: "assets/background.png"

  # The following are the optional parameters. Remove the # before the comment to make the parameter work.

  The # image parameter allows you to specify the image to use in the splash screen. It must be a PNG file and should be used for 4x pixel density.
  #image: assets/splash.png

  # This property allows you to specify an image to be displayed as a logo in the splash screen. It must be a PNG file. Now it only supports Android and iOS.
  #branding: assets/dart.png

  Specify the trademark image for dark mode
  #branding_dark: assets/dart_dark.png

  To place the logo image at the bottom of the screen, use bottom, bottomRight, and bottomLeft. If no value is specified or another value is specified, use the default value bottom.
  # ensure that the content mode value is not similar to android_gravity and iOS_CONTENT_mode values.
  #branding_mode: bottom

  # color_dark, background_image_dark, and image_dark are used to set the background color and image when the device is in dark mode.
  # If not specified, the application will use the above parameters. If image_dark is specified, color_dark or background_image_dark must be specified.
  # color_dark and background_image_dark cannot be set at the same time.
  #color_dark: "#042a49"
  #background_image_dark: "assets/dark-background.png"
  #image_dark: assets/splash-invert.png

  # Android, ios, and Web parameters can be used to not generate splash screens for the corresponding platforms.
  #android: false
  #ios: false
  #web: false

  Android_gravity, android_gravity, iOS_CONTENT_mode and web_image_mode can be used to set the position of the flash screen image. The default is 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,
  Fill_horizontal, fill_vertical, left, right, start or top
  #android_gravity: center
  #
  # iOS_CONTENT_mode can be one of the following iOS UIView.ContentMode (view
  # https://developer.apple.com/documentation/uikit/uiview/contentmode) : scaleToFill,
  ScaleAspectFit, scaleAspectFill, center, top, bottom,
  BottomLeft, right, topLeft, topRight, bottomLeft, or bottomRight.
  #ios_content_mode: center
  #
  # web_image_mode can contain one of the following modes: Center, contain, Stretch, cover.
  #web_image_mode: center

  To hide the notification bar, use the fullscreen parameter. Cannot act on the Web because the Web has no notification bar. The default is false.
  # Note: Unlike Android and iOS, the notification bar does not automatically display when an app loads.
  To display the notification bar, add the following code to the Flutter app:
  # WidgetsFlutterBinding.ensureInitialized();
  # SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.bottom, SystemUiOverlay.top]);
  #fullscreen: true
  
  # If you change the name of info.plist, you can use info_plist_files to specify the corresponding file name.
  Simply remove the # character before the following three lines without removing any Spaces:
  #info_plist_files:
  # - 'ios/Runner/Info-Debug.plist'
  # - 'ios/Runner/Info-Release.plist'
Copy the code

2. Run the package

After adding the Settings, run the following command from the command line terminal:

flutter pub run flutter_native_splash:create
Copy the code

When the package is finished running, your splash screen is ready.

To specify the location of the YAML file, simply add –path after the terminal command:

flutter pub run flutter_native_splash:create --path=path/to/my/file.yaml
Copy the code

3. (Optional) Preparing for application initialization

By default, the splash screen is removed when a Flutter is first drawn. If you want to maintain the splash screen during application initialization, you can use the removeAfter method as follows:

import 'package:flutter_native_splash/flutter_native_splash.dart';

void main() {
  FlutterNativeSplash.removeAfter(initialization);
  // runApp will run, but will not display until initialization is complete:
  runApp(const MyApp());
}

void initialization(BuildContext context) async {
  // Here you can initialize the resources required by the application when the splash screen is displayed.
  // When this function is complete, the splash screen is removed.
}
Copy the code

Note: To use this method, Flutter_native_splash must be in the Dependencies section of pubspec.yaml, not in dev_dependencies. The previous version was in the push latter.

4. Support this package (optional)

If you find the package useful, you can like it at the top of this page. There is another option to support the package:

Support Android 12

Android 12 has a new way to add a splash screen, which consists of a window background, ICONS, and icon backgrounds. The package now supports setting background colors and ICONS for app launch.

If Android 12 support is available, the package adds a styles. XML file to the values-v31 and values-night-v31 resource folders, so that when you need to maintain the old splash screen for previous Versions of Android, It will come with Android 12 support.

Note: The splash screen may not appear when you launch an app from Android Studio. However, it will appear when you click on the load icon from Android to launch the app.

Q&A

Error “A splash screen was provided to Flutter, but this is deprecated”

This information has nothing to do with this package but relates to a change in how Flutter 2.5 handles the splash screen interface. This is caused by code in androidmanifest.xml listed below, which was included by default in previous versions of Flutter:

<meta-data
 android:name="io.flutter.embedding.android.SplashScreenDrawable"
 android:resource="@drawable/launch_background"
 />
Copy the code

The solution is to remove the above code. Note that this also removes the gradient between the splash screen and the app screen.

Whether animated/Lottie /GIF images are supported

Not currently supported. Welcome to PR.

Encountered such AAPT error: error: style attribute ‘android: attr/windowSplashScreenBackground’ not found

This property is only found in Android 12, so if you encounter this error, it means your project is not fully set up for Android 12. Have you updated the build configuration of your application?

An incorrect splash screen is displayed on iOS.

This is caused by the iOS splash screen cache bug, which can be solved by uninstalling the app, shutting down and restarting it, and then trying to reinstall it.

A white screen is displayed between the splash screen and the application screen

  1. This problem may be caused by the iOS flash screen cache bug. You can uninstall the application, shut down the application, restart the application, and then reinstall the application.

  2. This may be caused by delays in application initialization. To solve this problem, put all of your initialization code in the removeAfter method.

Matters needing attention

  • Run if the splash screen is not properly updated on iOS or there is a white screen in front of the splash screenflutter cleanThen recompile the application. If the problem persists, delete the application, shut down the device, restart the device, install and load the application, as shown in figure 2this StackOverflow threadDescribed below.
  • The package has changed on Androidlaunch_background.xml 和 styles.xmlFile, changed on iOSLaunchScreen.storyboard 和 Info.plist, changed on the Webindex.html 。

If you manually change these files, the plug-in may not work properly. Please also issue if you find any bugs.

How to operate

Android

  • The splash screen image will be adjusted tomdpi 、 hdpi 、 xhdpi 、 xxhdpi 和 xxxhdpiThe drawable.
  • Drawable for splash screen image, including<bitmap> 的 <item>Tags will be added tolaunch_background.xmlIn the.
  • The background color will be added tocolors.xml, in thelaunch_background.xmlWas quoted in.
  • The code to switch to full screen will be added tostyles.xmlIn the.
  • Dark mode variables will be placed intodrawable-night 和 values-nightResources folder.

iOS

  • The splash screen image will be adjusted to@3x 和 @2xIn the image.
  • The color and image properties are inserted into theLaunchScreen.storyboard 。
  • The background color is achieved using a single pixel PNG file stretched to screen size.
  • Toggle hidden status bar code will be added toInfo.plist 。

Web

  • web/splashFolders are created to hold images and CSS files for the splash screen.
  • The splash screen image will be adjusted to1x 、 2x 、 3x 和 4xThe size will then be placed toweb/splash/imgIn the.
  • The splash screen style sheet will be added to the applicationweb/index.htmlFile, and HTML used as a splash screen image.

Thank you

The package was originally created by Henrique Arthur and is now maintained by Jon Hanson.

A bug or request

Feel free to issue if you have any problems. If you feel the library is missing some features, please mention them on the ticket. PR is also welcome.