Native Splash Screen Setup

Automated generation of native launch screens for Android and iOS using flutter_native_splash.

Automated generation of native launch screens for Android and iOS.

Using the flutter_native_splash package is the best practice for Gasha Digital projects because it eliminates the "white flash" seen when an app loads. This guide covers the configuration for standard and Android 12+ devices.

1. Dependency Setup

Add the package to your dev_dependencies in pubspec.yaml:

dev_dependencies:
  flutter_native_splash: ^2.4.0

2. Configuration (pubspec.yaml)

You can add the configuration directly into your pubspec.yaml or a separate flutter_native_splash.yaml file.

flutter_native_splash:
  # Background color of the splash screen
  color: "#ffffff"

  # The main logo image (should be a high-resolution PNG)
  image: assets/logos/branding.png

  # Optional: Branding image at the bottom (useful for "Powered by Gasha")
  branding: assets/logos/gasha_footer.png
  branding_mode: bottom

  # Android 12+ specific settings (Required for modern phones)
  android_12:
    image: assets/logos/branding_android12.png
    color: "#ffffff"
    branding: assets/logos/gasha_footer.png

  # Platform toggles
  android: true
  ios: true
  web: false

3. Image Requirements

To ensure the logo is not cropped or distorted:

Standard Image: Should be sized for 4x pixel density (approx. 1024×1024 px) with adequate padding.
Android 12 Icon: Must fit within a 768px diameter circle at the center of a 1152×1152px canvas.
Format: Must be .png.

4. Execution Commands

After saving your configuration, run the generator in your terminal:

# Generate the native files
dart run flutter_native_splash:create

# If you ever want to revert to the default white screen
dart run flutter_native_splash:remove

5. Keeping Splash Visible (Optional)

If your app needs to load heavy resources (like checking login status or fetching initial API data) before showing the first screen, add this to your main.dart:

void main() {
  WidgetsBinding widgetsBinding = WidgetsFlutterBinding.ensureInitialized();

  // Keep the native splash screen on screen
  FlutterNativeSplash.preserve(widgetsBinding: widgetsBinding);

  runApp(const MyApp());

  // Start initialization; remove() will be called when ready
  initialization();
}

Future<void> initialization() async {
  // Perform tasks (e.g., check auth, fetch config)...
  await Future.delayed(const Duration(seconds: 2));

  // Remove the splash screen when ready
  FlutterNativeSplash.remove();
}

Tip: Alternatively, you can call initialization() from your first screen's initState if you prefer to run startup logic inside the widget tree.