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.

Native processing

Without further ado, Native has a mature solution for handling the splash screen, whether Android or iOS.

Flutter_splash_screen plug-in

The name flutter_splash_screen 0.1.0 sounds great, but it’s actually not too hard. I don’t know why it’s so popular, but maybe it’s because it’s so early?

At present, no one maintains this plug-in, the API is not perfect, and the issue has not been solved. Here mentioned this plug-in mainly want to let the same in the selection of flash screen page scheme partners do not go to the pit, detour to save time.

flutter_native_splash

Flutter_native_splash 0.1.9 This package can automatically generate code for Android and iOS splash pages. You can also customize the image and background color.

Integration is simple:

  1. Add the dependent
Dev_dependencies: flutter_native_splash: ^ 0.1.9Copy the code

Don’t forget to execute

flutter pub get
Copy the code
  1. Adds Settings to the project’spubspec.yamlIn the
Flutter_native_splash: image: images/splash. PNG // Generate iOS LaunchImage image, including 1x2x3x color:"#ffffff"// Splash page background colorCopy the code

There are also some platform-specific attributes to choose from:

flutter_native_splash:
  android: false// You can choose whether to support Android or iOS android_disable_fullscreen:true// Disable Android full screen start fill:true// Add as if the image is available on all screenstrueCurrently, only Android is supportedCopy the code
  1. Generate the resources added above toNative
flutter pub pub run flutter_native_splash:create
Copy the code

You can see the generated resource files

bogon:flutterdemo yin$ flutter pub pub run flutter_native_splash:create
[Android] Creating splash images
[Android] Updating launch_background.xml with splash image path
[Android] Updating colors.xml with color for splash screen background
[Android] Updating styles.xml with full screen mode setting
[iOS] Creating splash images
[iOS] Updating LaunchScreen.storyboard with width, height and color
bogon:flutterdemo yin$ 
Copy the code
  1. iOSEnd inXcodeSelected in projectLaunchScreen.storyboardAnd the associatedUIImageViewAnd the image just generated, adjust it if necessaryUIImageViewThe layout.

Here, flutter_native_splash 0.1.9 is used to make flash page. In fact, technically speaking, this scheme is still Native flash page scheme, but it is made into a tool to improve efficiency. In the end, run is exactly what we want.

Solemnly note: icon from iconfont does not do any commercial use ~ ~

flare_splash_screen

Flare_splash_screen 3.0.1 this package makes the splash screen page feature Flare animation.

  1. Add dependencies and executeflutter pub get
Dependencies: flare_splash_screen: ^ 3.0.1Copy the code
  1. pubspec.yamlTo add the made.flrI’m using it heredemoBring it with you. I’m sure you need a designer for a company project.
  assets:
  - intro.flr
Copy the code
  1. conding
import 'package:flare_splash_screen/flare_splash_screen.dart';
Copy the code
  • SplashScreen.navigateway
class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: SplashScreen.navigate(
        name: 'intro.flr',
        next: (context) => BottomNavigationWidget(),
        until: () => Future.delayed(Duration(seconds: 5)),
        startAnimation: '1',),); }}Copy the code
  • SplashScreen.callbackway
class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Builder(
        builder: (context) => SplashScreen.callback(
          name: 'intro.flr',
          onSuccess: (_) {
            Navigator.of(context).pushReplacement(PageRouteBuilder(
                pageBuilder: (_, __, ___) =>
                    BottomNavigationWidget()));
          },
          loopAnimation: '1',
          until: () => Future.delayed(Duration(seconds: 1)),
          endAnimation: '1',
          onError: (error, stacktrace) {
            print(error); },),),); }}Copy the code

The API of this package is very flexible and detailed. You can select the properties you need to debug accordingly. There is no explanation here, just read the document directly.

While this solution is cool, it is not a perfect solution to the problem of white screens, which can still occur from the start of the program until the animation is loaded.

I understand that this scheme needs to be combined with Native flash screen scheme to achieve explosive effect. As for how to make a perfect transition between the flash screen and this Flare animation, it is up to designers to shine. Here’s a rough look:

conclusion

For now, the elegant splash screen still needs Native support

The team has a flash screen of Native developers to recommend the choice of Native processing.

No Native developers on the team could choose the Flutter_native_SPLASH scheme.

For cool people try flare_splash_screen.