Заставка Flutter растягивает изображение на секунду при нагрузке

Question

Я создаю новое приложение с использованием Flutter и хотел добавить собственное изображение на начальный экран заставки.

Изображение появляется на заставке, однако примерно на полсекунды оно выглядит растянутым, что выглядит не очень хорошо.

Я искал, но изо всех сил пытался найти кого-то с той же проблемой.

Есть идеи?

Я попытался дать изображение переменного размера, используя mipmap, но выдает тот же результат.

launch_background.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@color/green" />
    <item>
        <bitmap
            android:gravity="center_horizontal"
            android:src="@drawable/ic_logo"
            android:tileMode="disabled"/>
    </item>
</layer-list>

style.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="LaunchTheme" parent="@android:style/Theme.Black.NoTitleBar">
        <item name="android:windowBackground">@drawable/launch_background</item>
        <item name="android:windowFullscreen">false</item>
    </style>
    <color name="green">#b7dd05</color>
</resources>

AndroidManifest.xml

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.flutter_app">

    <!-- 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. -->
    <application
        android:name="io.flutter.app.FlutterApplication"
        android:label="flutter_app"
        android:icon="@mipmap/ic_launcher">
        <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">
            <!-- 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). -->
            <meta-data
                android:name="io.flutter.app.android.SplashScreenUntilFirstFrame"
                android:value="true" />
            <intent-filter>
                <action android:name="android.intent.action.MAIN"/>
                <category android:name="android.intent.category.LAUNCHER"/>
            </intent-filter>
        </activity>
    </application>
</manifest>

Я не возражаю против того, что изображение занимает секунду при рендеринге, но растягивание его первым не идеально.

Answer 1

Вам нужно будет предоставить изображение всех возможных размеров (MDI, HDDP, XHDPI и т. Д.), Чтобы иметь правильный размер для каждого размера экрана, и использовать эту схему:

<?xml version="1.0" encoding="utf-8" ?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <solid android:color="@android:color/holo_green_dark" />
            <padding
                android:left="0dp"
                android:top="0dp"
                android:right="0dp"
                android:bottom="0dp" />
        </shape>
    </item>
    <item
        android:gravity="center"
        android:drawable="@drawable/logo_splash">
    </item>
</layer-list>

Это будетбудь моим стилем:

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

    <style name="SplashScreen" parent="AppTheme">
        <item name="android:windowBackground">@drawable/splash</item>
        <item name="android:windowFullscreen">false</item>
    </style>

</resources>

наконец это будет моим AndroidManifest.xml:

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    package="com.example.marianozorrilla">

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme"
        tools:ignore="GoogleAppIndexingWarning">

        <activity
            android:name=".MainActivity"
            android:theme="@style/SplashScreen">
            <intent-filter>
                <category android:name="android.intent.category.LAUNCHER" />
                <action android:name="android.intent.action.MAIN" />
            </intent-filter>
        </activity>

    </application>

</manifest>

Результатом всего этого будет следующее:

В моем случае logo_splash.png имеет размер 200px-200px .Если вы действительно хотите обработать размер в DP , вам нужно иметь минимум API 23 :

<?xml version="1.0" encoding="utf-8" ?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <solid android:color="@android:color/holo_green_dark" />
            <padding
                android:left="0dp"
                android:top="0dp"
                android:right="0dp"
                android:bottom="0dp" />
        </shape>
    </item>
    <item
        android:gravity="center"
        android:drawable="@drawable/logo_splash"
        android:width="100dp"
        android:height="100dp">
    </item>
</layer-list>

Этот будет выглядеть так: