The pictures are stretched

[Kerabor]

The image stretches in height... what functions have I tried, to no avail

Pubspec.yaml:

flutter_native_splash: android_gravity: center background_image: assets/images/merry.png fullscreen: false fill: true

The image resolution is 1080x1920 for native_splash

And that's what happens, stretched in length, on any device so!:

I played with the functions, nothing has changed!

[√] Flutter (Channel stable, 2.5.2, on Microsoft Windows [Version 10.0.19042.1288], locale ru-RU) • Flutter version 2.5.2 at C:\flutter • Upstream repository https://github.com/flutter/flutter.git • Framework revision 3595343e20 (6 weeks ago), 2021-09-30 12:58:18 -0700 • Engine revision 6ac856380f • Dart version 2.14.3

[!] Android toolchain - develop for Android devices (Android SDK version 31.0.0) • Android SDK at C:\Users\Intel\AppData\Local\Android\sdk • Platform android-31, build-tools 31.0.0 • Java binary at: E:\Program Files\Android\Android Studio\jre\bin\java • Java version OpenJDK Runtime Environment (build 11.0.10+0-b96-7249189) ! Some Android licenses not accepted. To resolve this, run: flutter doctor --android-licenses

[√] Chrome - develop for the web • Chrome at C:\Program Files\Google\Chrome\Application\chrome.exe

[√] Android Studio (version 2020.3) • Android Studio at E:\Program Files\Android\Android Studio • Flutter plugin can be installed from: https://plugins.jetbrains.com/plugin/9212-flutter • Dart plugin can be installed from: https://plugins.jetbrains.com/plugin/6351-dart • Java version OpenJDK Runtime Environment (build 11.0.10+0-b96-7249189)

[√] VS Code (version 1.62.2) • VS Code at C:\Users\Intel\AppData\Local\Programs\Microsoft VS Code • Flutter extension version 3.28.0

[√] Connected device (3 available) • M2007J3SC (mobile) • ba1290d1 • android-arm64 • Android 11 (API 30) • Chrome (web) • chrome • web-javascript • Google Chrome 95.0.4638.69 • Edge (web) • edge • web-javascript • Microsoft Edge 95.0.1020.44

! Doctor found issues in 1 category.

[Kerabor]

And wha? Will there be an answer? Why does it stretch the pictures vertically??? I 've already set up all sorts of permissions

[jonbhanson]

@Kerabor instead of using background_image, set your image with image.

[jonbhanson]

Closing due to inactivity. Feel free to reopen if you are still having a problem.

[praharshbhatt]

This is my yaml:

# flutter_native_splash: https://pub.dev/packages/flutter_native_splash
flutter_native_splash:

  # This package generates native code to customize Flutter's default white native splash screen
  # with background color and splash image.
  # Customize the parameters below, and run the following command in the terminal:
  # flutter pub run flutter_native_splash:create --flavor xyz
  # To restore Flutter's default white splash screen, run the following command in the terminal:
  # flutter pub run flutter_native_splash:remove

  # color or background_image is the only required parameter.  Use color to set the background
  # of your splash screen to a solid color.  Use background_image to set the background of your
  # splash screen to a png image.  This is useful for gradients. The image will be stretched to the
  # size of the app. Only one parameter can be used, color and background_image cannot both be set.
  image: assets/whitelabels/xyz/launcher_screen.png

  android_12:
    image: assets/whitelabels/xyz/launcher_screen.png

  web: false

Previously, I was using "background_image" which I replaced with "image". This is the output I get:

╔════════════════════════════════════════════════════════════════════════════╗
║                              Flavor detected!                              ║
╠════════════════════════════════════════════════════════════════════════════╣
║ Setting up the xyz flavor.
╚════════════════════════════════════════════════════════════════════════════╝

Your `flutter_native_splash` section does not contain a `color` or `background_image`.
pub finished with exit code 1

[jonbhanson]

You can resolve this by setting the color parameter. Most user images do not cover the whole screen, which is why the background color is required.

[praharshbhatt]

The splash wouldn't fit the screen

[ThangVuNguyenViet]

Seriously, the attitude of the guy who opens this ticket is so aggressive that I don't think he even deserves the answer. But I'm going to do that anyway for the others who had the same issue.

The input image should be 4x (as stated in the doc), because it'd be downscaled.

To have the full-screen splash image, you need to use the background_image param instead of image and color param.

The background_image will stretch if the image is smaller than the current screen size, but will maintain img ratio if it's larger, works like BoxFit.cover.

The image on the other hand, will keep the same image pixel density, so it'd result in a zoomed-in image