How to Configure Splash Screen in Flutter: Simple Guide

To configure a splash screen in Flutter, set up native splash screens for Android and iOS using the flutter_native_splash package or manually edit platform files. Then, optionally create a Flutter widget to show a splash UI while your app loads.

Syntax

Flutter splash screens are configured mainly in two parts: native platform files and Flutter code.

• Android: Modify android/app/src/main/res/drawable/launch_background.xml and android/app/src/main/AndroidManifest.xml.
• iOS: Edit ios/Runner/Assets.xcassets/LaunchImage.imageset and ios/Runner/Info.plist.
• Flutter: Use a widget like SplashScreen or FutureBuilder to show splash UI.

The flutter_native_splash package automates these changes with a simple config in pubspec.yaml.

yaml

flutter_native_splash:
  color: "#42a5f5"
  image: assets/splash.png
  android: true
  ios: true

Example

This example uses the flutter_native_splash package to create a splash screen with a blue background and a centered image.

dart

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Text('Welcome to My App!', style: TextStyle(fontSize: 24)),
        ),
      ),
    );
  }
}

Output

App launches showing a native splash screen with a blue background and splash image, then displays 'Welcome to My App!' text centered.

Common Pitfalls

• Not running flutter pub run flutter_native_splash:create after editing config.
• Forgetting to add splash image to assets folder and declare it in pubspec.yaml.
• Ignoring platform-specific files causing splash not to show on Android or iOS.
• Using a Flutter widget splash screen without native setup causes a blank screen on app start.

dart

/// Wrong: Missing native splash setup
void main() {
  runApp(const MyApp());
}

/// Right: Use flutter_native_splash package and run setup command
// flutter_native_splash:
//   color: "#42a5f5"
//   image: assets/splash.png
//   android: true
//   ios: true

Quick Reference

Step	Description
Add splash image	Place image in assets folder and declare in pubspec.yaml
Configure flutter_native_splash	Add config in pubspec.yaml with color and image
Run setup command	Run flutter pub run flutter_native_splash:create
Test on devices	Run app on Android and iOS to verify splash screen
Optional Flutter splash	Create a Flutter widget for splash UI after native splash

Key Takeaways

Use flutter_native_splash package to easily configure native splash screens for Android and iOS.

Always run the setup command after changing splash config to apply changes.

Include splash images in assets and declare them properly in pubspec.yaml.

Native splash screens prevent blank screens on app start before Flutter loads.

Optionally add a Flutter widget splash screen for custom loading UI after native splash.