Flutter native splash image size

Flutter Native Splash Image Size

In Flutter, you can create a native splash screen by providing a static image to be displayed while your application initializes. The size of the splash image depends on the screen resolution of the device you’re targeting. It is recommended to use multiple image sizes to ensure your splash screen looks good on different devices.

To create a responsive splash image, you can follow these steps:

  1. Create multiple copies of the splash image with different resolutions. Common resolutions include 320×480, 640×960, 750×1334, 1125×2436, etc.
  2. Place these images in the respective drawable folders in your Flutter project. For example:
    • Android:
      • mipmap-ldpi (240×320)
      • mipmap-mdpi (320×480)
      • mipmap-hdpi (480×800)
      • mipmap-xhdpi (720×1280)
      • mipmap-xxhdpi (1080×1920)
      • mipmap-xxxhdpi (1440×2560)
    • iOS:
      • 1x (320×480)
      • 2x (640×960)
      • 3x (750×1334)
      • 4x (1125×2436 or higher)
  3. Update the splash screen configuration in your Flutter project.

Here’s an example of how the splash screen configuration is set in the pubspec.yaml file:

flutter_native_splash:
  image: assets/images/splash.png
  color: "#ffffff"
  fill: true
  android: true
  ios: true

In the above example, the splash.png image is used as the splash screen image. Adjust the path according to your project structure.

Make sure you have the flutter_native_splash package included in your pubspec.yaml file and run flutter pub get to install it.

By providing different images with the correct resolutions and configuring them in the pubspec.yaml file, Flutter will automatically select the appropriate splash screen image based on the device’s screen resolution.

Leave a comment