[Flutter] Removing the Default White Flash - The Complete Guide to flutter_native_splash

When you launch a Flutter app, you might notice a brief white flash before your custom splash screen appears. This is the native splash screen displayed by the OS while the Flutter engine is loading. Since the default value is white, it can be quite jarring.

This guide explains how to solve this issue using the flutter_native_splash package.

Why Do You See a White Screen?

The startup flow of a Flutter app is as follows:

App Launch → [Native Splash] → Flutter Engine Loading → [Flutter Widget Rendering]

Because Dart code cannot run before the Flutter engine is loaded, the OS displays a static screen at the native level. This corresponds to launch_background.xml on Android and LaunchScreen.storyboard on iOS.

If your custom splash screen is dark, the transition from White → Custom Splash becomes very noticeable.

Solution

1. Install the Package

flutter pub add flutter_native_splash

2. Configure pubspec.yaml

Add the configuration above the flutter: section.

flutter_native_splash:
  color: "#009CCC"              # Background color (matching your splash screen)
  image: assets/images/logo.png # Logo to display in the center (optional)
  android: true
  ios: true

flutter:
  uses-material-design: true
  # ...

Tip: If your custom splash uses a gradient, set the mid-tone color as the background color for a smoother transition.

3. Generate the Native Splash

dart run flutter_native_splash:create

This command automatically modifies the following native files:

• Android: launch_background.xml, styles.xml
• iOS: LaunchScreen.storyboard, Assets.xcassets

4. Modify main.dart - Preserve Splash

The key is preserve(). Calling this ensures the native splash remains visible even after the Flutter engine is ready.

import 'package:flutter_native_splash/flutter_native_splash.dart';

Future<void> main() async {
  // Prepare Flutter bindings + Preserve native splash
  WidgetsBinding widgetsBinding = WidgetsFlutterBinding.ensureInitialized();
  FlutterNativeSplash.preserve(widgetsBinding: widgetsBinding);

  // Initialize Firebase, SDKs, etc.
  await Firebase.initializeApp();

  runApp(MyApp());
}

5. Remove in the Splash Screen

Remove the native splash in the initState() of your custom Flutter splash widget.

import 'package:flutter_native_splash/flutter_native_splash.dart';

class _SplashScreenState extends State<SplashScreen> {
  @override
  void initState() {
    super.initState();

    // Remove native splash → Flutter splash becomes visible
    FlutterNativeSplash.remove();

    // Business logic like server checks or authentication...
    _checkServerAndAuth();
  }
}

Final Execution Flow

1. App Launch
2. Native Splash (#009CCC + Logo) ← Instead of the white screen!
3. Flutter Engine Loading (Native splash persists)
4. Flutter Splash Widget initState() executes
5. FlutterNativeSplash.remove() is called
6. Custom Splash (Gradients + Animations)
7. Main Screen

Native Splash vs. Flutter Splash

Important Considerations

• No Gradients: flutter_native_splash only supports solid background colors.
• Mandatory Removal: You must call remove() after preserve(), otherwise the splash screen will stay indefinitely.
• No Dart Logic: Native splashes cannot execute Dart code like server checks.
• Apply Changes: You must re-run dart run flutter_native_splash:create every time you modify the configuration.
• iOS Cache: Changes might not appear on iOS simulators due to caching. Delete and reinstall the app to see updates.

Summary

The white flash issue in Flutter is easily solved with flutter_native_splash. The core logic boils down to two steps:

// 1. Preserve in main()
FlutterNativeSplash.preserve(widgetsBinding: widgetsBinding);

// 2. Remove in the splash screen widget
FlutterNativeSplash.remove();

By matching the native splash background color to your app's theme, users will enjoy a seamless startup experience.