android_gravity and web_image_mode does not work

[Lars-Sommer]

Describe the bug I have an image with a background and a logo in the middle of the image. I would like this image to be centered, not stretched and not shrinked, in the splash screen. I´ve tried several formats and resolutions, but I cannot find a setup that fits the majority of device dimensions (small phone, large phone, small tablet and large tablet). As far as I can understand the image will be stretched per default. But there are other options like android_gravity and web_image_mode, but neither of these seems to work. They don´t seem have any effect on how the splash screen is rendered. Am I missing something?

[jonbhanson]

@fasterlars please include what platform you are having the problem with and a copy of your yaml config.

[Lars-Sommer]

Android is my target platform. The emulation device that I´m using is a 10.1 inch tablet. This is my config:

flutter_native_splash: 
  background_image: "assets/splash.png"   
  android_gravity: center 
  web_image_mode: center

This is the image I am using is a bacground with a square logo:

The result:

If you overlay the original and the generated image, you can see that the logo is stretched:

Ive tried playing around with both the android_gravity and the web_image_mode settings, but none of them have any effect on the end result.

Thanks for the help!

[jonbhanson]

@fasterlars I tried reproducing the problem, but when I ran it, it was the splash logo was centered. I tried running it on a Nexus 10 tablet (API 30) so that the stretch would be very obvious.

[Lars-Sommer]

Hi Jon. I created a Nexus 10 (api 30) emulator, but the problem remains the same: On the screenshot you attached, the splash is very small and in the middle? How come it doesen´t fill the screen as it should? Can you make it fill the screen, and not not stretched?

[jonbhanson]

@fasterlars can you send me a copy of your project? Stripped down if necessary.

[Lars-Sommer]

Sure, I´ve created a new flutter project and added the native_splash package: https://github.com/fasterlars/splash_test

Thanks!

[jonbhanson]

The problem is that you are using background_image instead of image. As stated in the readme:

Use background_image to set the background of your splash screen to a png image. This is useful for gradients. The image will be stretch to the size of the app.

[Lars-Sommer]

Ah, I totally misunderstood the documentation, sorry! I didn´t think you could use multiple images (background and a logo), to lay on top of each other. My bad. As far as I can see, the branding image is the same as image, except for the positioning value. It would be nice if you could add an offset/margin/padding. So the branding image wont be fixed directly to the bottom.

Anyways, thanks alot!