preface

Recently, I have been making Flutter in my free time. Splash page is a common requirement. Most of the online splash page tutorials are similar to AD pages, not LaunchScreen in iOS. If we want to configure the flash screen page according to the original scheme, we need to configure the flash screen page at both ends at the same time, so is there a relatively simple scheme to configure the flash screen page? There is, of course, a plugin for Flutter – Flutter_native_splash. Let’s take a look at how to use this plug-in.


use

First import Flutter_native_splash into pubspec.yaml of the project. The important thing to note here is that you need to put it under dev_dependencies, not dependencies. The details are as follows.

dependencies:
  ....

dev_dependencies:
  flutter_native_splash: ^0.3. 0Create a splash pageCopy the code

Let’s configure Flutter_native_splash. Before configuring flutter_native_splash, let’s look at the configurable items of Flutter_native_splash.

Configuration items instructions
color Used to set the background color of the splash page
image Set the default logo or background image path for the splash screen
color_dark Sets the background color of the splash screen in dark mode
image_dark Set the night mode logo or background image path for the splash screen page
android Whether to generate android splash page value is true/false
ios Whether to generate iOS splash page value is true or false
web Whether to set the value of the flash page to true or false
android_gravity Image /image_dark Position in the Android screen, values are bottom, center, center_horizontal, center_vertical, clip_horizontal, clip_vertical, end, fill, fill_horizontal, fill_vertical, left, right, start, top
ios_content_mode Image /image_dark position in iOS splash page, scaleToFill, scaleAspectFit, scaleAspectFill, Center, Top, bottom, left, right, topLeft, topRight, bottomLeft, bottomRight
web_image_mode Image /image_dark Position in the web page screen, including center, contain, stretch, and cover
fullscreen Image /image_dark Full screen mode The value is true or false

For example, if I only have a logo image and I want to generate a splash screen on both iOS and Android, ALL I need to do is set it in pubspec.yaml.

flutter_native_splash:
  color: "#FFFFFF"
  image: "resource/image/common/common_app_splash_icon_400.png"
  ardroid: true
  ios: true
Copy the code

Of course, if you have other configurations you can add them yourself.

Now that the configuration is complete, how do we generate it? At this time we need to open the terminal CD to our project directory. If Android Studio or VSCode is used, the default is in the current project directory.

cd 'Project Directory file'
Copy the code

We then need to execute the following three commands to generate the splash page

flutter clean
Copy the code
flutter pub get
Copy the code
flutter pub run flutter_native_splash:create
Copy the code

It is troublesome to type three orders at a time, but we have consolidated the three orders of appeal into one order, as shown below.

flutter clean && flutter pub get && flutter pub run flutter_native_splash:create
Copy the code

So what about the splash pages we don’t want to use? All we need to do is execute the following command.

flutter pub run flutter_native_splash:remove
Copy the code

Note: every time the image is replaced, the command needs to be re-generated.


conclusion

OK, the above is all about the use of Flutter_native_splash. In fact, it is relatively simple. If customization is required, it is recommended that each platform configure its own splash page. If you have any questions, please feel free to comment in the comments section. Thank you.