Flutter_native_splash image size

flutter_native_splash image size

flutter_native_splash is a package used in flutter to customize the app’s launch splash screen. It allows you to specify different images for different device screen densities. Below is an example of how to specify the image sizes.

First, create a directory in your project’s root directory called ‘assets’ if it doesn’t already exist.

Inside the ‘assets’ directory, create another directory called ‘splash’ if it doesn’t already exist. This is where you will store the splash screen images for each density.

For example, let’s say you want to support the following densities:

  • mdpi (1x)
  • hdpi (1.5x)
  • xhdpi (2x)
  • xxhdpi (3x)
  • xxxhdpi (4x)

Inside the ‘splash’ directory, you will create sub-directories for each density. The naming convention for these directories should follow the format:

‘res/drawable-{density}/’

where ‘density’ is replaced with the respective density name (e.g., ‘mdpi’, ‘hdpi’, etc.).

Now, place the corresponding splash screen image for each density inside its respective directory. The image sizes will vary based on the density, as follows:

  • mdpi: 320×480 pixels
  • hdpi: 480×800 pixels
  • xhdpi: 720×1280 pixels
  • xxhdpi: 1080×1920 pixels
  • xxxhdpi: 1440×2560 pixels

Make sure that the images you use are named the same in each density directory.

Finally, to configure the splash screen using flutter_native_splash, add the following lines to your ‘pubspec.yaml’ file:

    
flutter_native_splash:
  image: assets/splash/splash.png
  color: "#ffffff"
  
  

Replace ‘splash.png’ with the name of your splash screen image. The package will automatically handle the resizing and density selection for different devices when the app is built.

That’s it! Now, when you build and run your app, the splash screen image will be displayed according to the device’s screen density.

Leave a comment