preface

The purpose of the splash screen (or startup page) in APP projects is to avoid a blank screen before the application displays the first frame. Especially in pure RN and Flutter projects, the loading speed of resources to display is slower than that of Native. This paper mainly summarizes the alternative splash page implementations of the pure Flutter project, most of which are popular ones on Pub. dev.

Results show

Native processing

There are native developers, recommended use.

flutter_native_splash

The third-party library file Flutter_native_splash is used to automatically generate native code for adding initial screens in Android and iOS. Customize using a specific platform, background color, and initial image.

Method of use

  1. inpubspec.yamlAdd to fileflutter_native_splashfordevDependencies.
Dev_dependencies: flutter_native_splash: ^ 0.1.9Copy the code

  1. flutter pub get

  2. Add the following Settings to the project’s pubspec.yaml file

flutter_native_splash:
  image: assets/images/splash.png
  color: "42a5f5"
  android: false
Copy the code

  • Image: Must be a PNG file.

  • Color :”#42a5f5″

  • Android or ios: Go to false to create a splash screen for the specific platform (ios/ ios).

  • Use the fill attribute if the image should use all available screens (width and height).

flutter_native_splash:
  fill: true
Copy the code

Note: Fill iOS initial screen does not yet implement this property.

  • If you want to inAndroidCan be used when the full-screen startup screen is disabledandroid_disable_fullscreenProperties.
flutter_native_splash:
  image: assets/images/splash.png
  color: "42a5f5"
  android_disable_fullscreen: true
Copy the code
  1. Run the package to add Settings after using
flutter pub pub run flutter_native_splash:create
Copy the code

After the package runs, your initial screen is ready.

Note:

  • For Android: To use the immersive status bar, comment out the code below, as shown in the figure below
  • If the startup screen is not updated correctly on iOS, or if you encounter a blank screen before launching the screen, run Flutter Clean and recompile your application.
  • This package changeslaunch_background.xml.styles.xmlAs well asMainActivityThe file inAndroidandLaunchScreen.storyboard.Info.plistandAppDelegateiOSOn.

advice

If you want to use “icon” material as the initial image, please in material. IO/resources/ICONS in Android download icon PNG format. I recommend using the largest icon in the folder you just downloaded to get a better look. Drawable – xxxhdpi material color can be in the material. Found in IO/resources/color

Realize the principle of

  • Android

Your boot screen will be adjusted to mdPI, HDPI, XHDPI, XXHDPI and XXXHDPI graphable. The drawable tag that contains your initial image will be added to launch_background.xml and the background color will be added to colors.xml and referenced in launch_background.xml. Styles.xml and MainActivity add code for full-screen mode switching.

The following figure shows the android directory structure after successful operation

  • iOS

Your startup image will be adjusted to @3x and @2x images. The color and image properties are inserted into launchscreen.storyboard. Code to hide status bar toggles will be added to info.plist and the AppDelegate.

You can change the size of the image as shown below:

flare_splash_screen

The third-party library file flare_splash_screen is used to boot the program with a splash screen with a Flare animation until some work is done to initialize the application.

Method of use

  • Install 1. Add the library to the package’s pubspec.yaml file:
Dependencies: flare_splash_screen: ^ 3.0.1Copy the code
$ flutter pub get
Copy the code

3. Import

import 'package:flare_splash_screen/flare_splash_screen.dart';
Copy the code
  • Navigation

The startup screen displays an animation and pushes the new path you specify when it’s done. By default, the animation fades in and out, but you can use custom transitionsBuilder

SplashScreen.navigate(
    name: 'intro.flr',
    next: (_) => MyHomePage(title: 'Flutter Demo Home Page'),
    until: () => Future.delayed(Duration(seconds: 5)),
    startAnimation: '1',),Copy the code
  • Callback

The initial screen displays the animation and invokes the callback when onFinished is complete.

SplashScreen.callback(
    name: 'intro.flr',    
    onFinished: () {
      Navigator.of(context).pushReplacement(PageRouteBuilder(pageBuilder: (_,__,___) => MyHomePage(title: 'Flutter Demo Home Page')));
    },
    loopAnimation: '1',
    until: () => Future.delayed(Duration(seconds: 1)),
    endAnimation: '1',),Copy the code
  • API

Name: path/name of splash page animation (to be introduced in pubspec.yaml)

Next: The page/component that enters after the flash page animation is complete

LoopAnimation: The name of the animation to run, which defaults to the first parameter

StartAnimation: The animation runs once before entering the loop

EndAnimation: An animation is run until it is finished

Until: callback back to handle your initialization in the future

IsLoading: until If you want to use booleans to manage the loading state, select this option

Height: The height of the splash page animation, which by default takes up all available positions

Width: The width of the flash screen animation, which by default takes up all available Spaces

Alignment: Indicates the alignment of the flash page animation. The screen is centered by default

TransitionsBuilder displays the transition next that is applicable

  • Available animation modes
  1. There’s only one animation

Basically, you need to show an animation and then just stay on the last frame. To do this, just specify startAnimation

  1. Start and loop animations

Your animation has introductory and looping states, for which you can only specify startAnimation and loopAnimation

  1. Cycle animation

Your animation has completed and looped states, for which you can only specify endAnimation and loopAnimation

  1. Your animation has an introduction and an end, which should stay on the last frame in order to perform only this operation startAnimation, endAnimation

  2. Start, end, and loopAnimation your animation has introductory, end, and loop states to specify startAnimation, endAnimation, and loopAnimation

  • summary

This solution is cool, but it doesn’t solve the problem of white screens, which can occur from the start of the program until the animation is loaded.

conclusion

In order to solve the problem of blank screen, Native developers can directly use Native development, while none can choose Flutter_native_splash, and flare_splash_screen can be used to increase animation effect.