title: Flutter Splash Screen Stretches Image For A Second On Load
body: <p>I'm creating a new app using Flutter and wanted to add a custom image on the initial splash screen. </p>
  
  <p>The image appears on the splash screen, however for about half a second it appears stretched which does not look very good.</p>
  
  <p>I've been searching but have struggled to find anyone with the same issue.</p>
  
  <p>Any ideas?</p>
  
  <p>I have tried giving a variable size image using mipmap but produces the same result.</p>
  
  <p>launch_background.xml</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
  &lt;layer-list xmlns:android="http://schemas.android.com/apk/res/android"&gt;
      &lt;item android:drawable="@color/green" /&gt;
      &lt;item&gt;
          &lt;bitmap
              android:gravity="center_horizontal"
              android:src="@drawable/ic_logo"
              android:tileMode="disabled"/&gt;
      &lt;/item&gt;
  &lt;/layer-list&gt;
  </code></pre>
  
  <p>style.xml</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
  &lt;resources&gt;
      &lt;style name="LaunchTheme" parent="@android:style/Theme.Black.NoTitleBar"&gt;
          &lt;item name="android:windowBackground"&gt;@drawable/launch_background&lt;/item&gt;
          &lt;item name="android:windowFullscreen"&gt;false&lt;/item&gt;
      &lt;/style&gt;
      &lt;color name="green"&gt;#b7dd05&lt;/color&gt;
  &lt;/resources&gt;
  </code></pre>
  
  <p>AndroidManifest.xml</p>
  
  <pre><code>&lt;manifest xmlns:android="http://schemas.android.com/apk/res/android"
      package="com.example.flutter_app"&gt;
  
      &lt;!-- io.flutter.app.FlutterApplication is an android.app.Application that
           calls FlutterMain.startInitialization(this); in its onCreate method.
           In most cases you can leave this as-is, but you if you want to provide
           additional functionality it is fine to subclass or reimplement
           FlutterApplication and put your custom class here. --&gt;
      &lt;application
          android:name="io.flutter.app.FlutterApplication"
          android:label="flutter_app"
          android:icon="@mipmap/ic_launcher"&gt;
          &lt;activity
              android:name=".MainActivity"
              android:launchMode="singleTop"
              android:theme="@style/LaunchTheme"
              android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
              android:hardwareAccelerated="true"
              android:windowSoftInputMode="adjustResize"
              android:screenOrientation="portrait"&gt;
              &lt;!-- This keeps the window background of the activity showing
                   until Flutter renders its first frame. It can be removed if
                   there is no splash screen (such as the default splash screen
                   defined in @style/LaunchTheme). --&gt;
              &lt;meta-data
                  android:name="io.flutter.app.android.SplashScreenUntilFirstFrame"
                  android:value="true" /&gt;
              &lt;intent-filter&gt;
                  &lt;action android:name="android.intent.action.MAIN"/&gt;
                  &lt;category android:name="android.intent.category.LAUNCHER"/&gt;
              &lt;/intent-filter&gt;
          &lt;/activity&gt;
      &lt;/application&gt;
  &lt;/manifest&gt;
  </code></pre>
  
  <p>I don't mind the image taking a second the render in, but having it stretched first is not ideal.</p>
  
  <p><a href="https://i.stack.imgur.com/MXC6H.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/MXC6H.jpg" alt="First loads in stretched version of image"></a>
  <a href="https://i.stack.imgur.com/1klcb.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/1klcb.jpg" alt="What it should like once it has loaded in"></a></p>