The plugin changes the color from the background to the Splash #184

yeikel16 · 2021-06-27T17:47:51Z

The plugin changes the color from the background to the Splash, that color is not defined anywhere in the configuration

When opening the app, it comes out normal, after a few milliseconds it changes to an undefined color, everything happens after the native screen and before the flutter screen.

Uninstall the app and continue with the same behavior.

file.mp4

Device (please complete the following information):

Device: [Xiaomi Redmi Note 7]
OS: [Android 10]

Flutter doctor

[√] Flutter (Channel stable, 2.2.1, on Microsoft Windows [VersiÃ³n 10.0.19043.1023], locale es-US)
    • Flutter version 2.2.1 at C:\src\flutter
    • Framework revision 02c026b03c (4 weeks ago), 2021-05-27 12:24:44 -0700
    • Engine revision 0fdb562ac8
    • Dart version 2.13.1

[√] Android toolchain - develop for Android devices (Android SDK version 30.0.2) 
    • Android SDK at E:\Programas\SDK
    • Platform android-30, build-tools 30.0.2
    • ANDROID_SDK_ROOT = E:\Programas\SDK
    • Java binary at: C:\Program Files\Android\Android Studio\jre\bin\java       
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b01)
    • All Android licenses accepted.

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

[√] Visual Studio - develop for Windows (Visual Studio Community 2019 16.9.0)       
    • Visual Studio at C:\Program Files (x86)\Microsoft Visual Studio\2019\Community
    • Visual Studio Community 2019 version 16.9.31025.194
    • Windows 10 SDK version 10.0.18362.0

[√] Android Studio (version 4.1.0)
    • Android Studio at C:\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 1.8.0_242-release-1644-b01)

[√] VS Code (version 1.57.1)
    • VS Code at C:\Users\Yeikel\AppData\Local\Programs\Microsoft VS Code
    • Flutter extension version 3.23.0

[√] Connected device (4 available)
    • Redmi Note 7 (mobile) • d97ede0d • android-arm64  • Android 10 (API 29)
    • Windows (desktop)     • windows  • windows-x64    • Microsoft Windows [VersiÃ³n 10.0.19043.1023]
    • Chrome (web)          • chrome   • web-javascript • Google Chrome 91.0.4472.77
    • Edge (web)            • edge     • web-javascript • Microsoft Edge 91.0.864.54

The text was updated successfully, but these errors were encountered:

jonbhanson · 2021-06-29T11:50:45Z

@Yeikel200 can you post the contents of your android/app/scr/main/AndroidManifest.xml and android/app/scr/main/res/values/styles.xml files?

jonbhanson · 2021-07-09T02:59:23Z

I'm closing this due to lack of information. Feel free to reopen it if you're still having trouble.

ahmedalrifai · 2021-07-15T17:10:12Z

I am having the same behavior.

Open app
Splash screen comes with white background and logo in the center (that what i want)
After few milliseconds the background changes to black then procced to the app

when changing my phone to light mode the background is always white

I want the same thing when using dark mode. is there a way to do it?

This is my configuration

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

and this is a video of the problem

splash_screen_bug.mp4

jonbhanson · 2021-07-15T17:13:35Z

@ahmedalrifai can you post the contents of your android/app/scr/main/AndroidManifest.xml and android/app/scr/main/res/values/styles.xml files?

yeikel16 · 2021-07-15T17:16:01Z

It worked for me by deleting the drawable-v21 folder in the res directory.

ahmedalrifai · 2021-07-15T17:19:07Z

@jonbhanson

AndroidManifest.xml

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.farmyai.farmy_mobile">
    <!-- 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. -->
    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
    <uses-permission android:name="android.permission.INTERNET"/>
    <uses-permission android:name="android.permission.CAMERA" />
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />

    <application
        android:name="io.flutter.app.FlutterApplication"
        android:label="Farmy"
        android:icon="@mipmap/ic_launcher">
        <activity
            android:name=".MainActivity"
            android:launchMode="singleTop"
            android:theme="@style/LaunchTheme"
            android:screenOrientation="portrait"
            android:configChanges="orientation|keyboardHidden|keyboard|screenSize|smallestScreenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
            android:hardwareAccelerated="true"
            android:windowSoftInputMode="adjustResize">
            <!-- Specifies an Android theme to apply to this Activity as soon as
                 the Android process has started. This theme is visible to the user
                 while the Flutter UI initializes. After that, this theme continues
                 to determine the Window background behind the Flutter UI. -->
            <meta-data
              android:name="io.flutter.embedding.android.NormalTheme"
              android:resource="@style/NormalTheme"
              />
            <!-- Displays an Android View that continues showing the launch screen
                 Drawable until Flutter paints its first frame, then this splash
                 screen fades out. A splash screen is useful to avoid any visual
                 gap between the end of Android's launch screen and the painting of
                 Flutter's first frame. -->
            <meta-data
              android:name="io.flutter.embedding.android.SplashScreenDrawable"
              android:resource="@drawable/launch_background"
              />
            <intent-filter>
                <action android:name="android.intent.action.MAIN"/>
                <category android:name="android.intent.category.LAUNCHER"/>
            </intent-filter>
        </activity>
        <meta-data android:name="com.facebook.sdk.ApplicationId"
            android:value="@string/facebook_app_id"/>

        <activity android:name="com.facebook.FacebookActivity"
            android:configChanges=
                "keyboard|keyboardHidden|screenLayout|screenSize|orientation"
            android:label="@string/app_name" />

        <activity
            android:name="com.facebook.CustomTabActivity"
            android:exported="true">
            <intent-filter>
                <action android:name="android.intent.action.VIEW" />
                <category android:name="android.intent.category.DEFAULT" />
                <category android:name="android.intent.category.BROWSABLE" />
                <data android:scheme="@string/fb_login_protocol_scheme" />
            </intent-filter>
        </activity>
        <!-- Don't delete the meta-data below.
             This is used by the Flutter tool to generate GeneratedPluginRegistrant.java -->
        <meta-data
            android:name="flutterEmbedding"
            android:value="2" />
    </application>
</manifest>

android/app/scr/main/res/values/styles.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!-- Theme applied to the Android Window while the process is starting -->
    <style name="LaunchTheme" parent="@android:style/Theme.Black.NoTitleBar">
        <!-- Show a splash screen on the activity. Automatically removed when
             Flutter draws its first frame -->
        <item name="android:windowBackground">@drawable/launch_background</item>
        <item name="android:windowFullscreen">false</item>
    </style>
    <!-- Theme applied to the Android Window as soon as the process has started.
         This theme determines the color of the Android Window while your
         Flutter UI initializes, as well as behind your Flutter UI while its
         running.
         
         This Theme is only used starting with V2 of Flutter's Android embedding. -->
    <style name="NormalTheme" parent="@android:style/Theme.Black.NoTitleBar">
        <item name="android:windowBackground">@android:color/white</item>
    </style>
</resources>

ahmedalrifai · 2021-07-15T17:19:32Z

It worked for me by deleting the drawable-v21 folder in the res directory.

i will try it

ahmedalrifai · 2021-07-15T17:25:52Z

It worked for me by deleting the drawable-v21 folder in the res directory.

When i deleted this folder i got errors when building the app

ahmedalrifai · 2021-07-15T17:42:30Z

I forgot this the package also generate this file values-night/styles.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!-- Theme applied to the Android Window while the process is starting -->
    <style name="LaunchTheme" parent="@android:style/Theme.Black.NoTitleBar">
        <!-- Show a splash screen on the activity. Automatically removed when
             Flutter draws its first frame -->
        <item name="android:windowBackground">@drawable/launch_background</item>
        <item name="android:windowFullscreen">false</item>
    </style>
    <!-- Theme applied to the Android Window as soon as the process has started.
         This theme determines the color of the Android Window while your
         Flutter UI initializes, as well as behind your Flutter UI while its
         running.
         
         This Theme is only used starting with V2 of Flutter's Android embedding. -->
    <style name="NormalTheme" parent="@android:style/Theme.Black.NoTitleBar">
        <item name="android:windowBackground">?android:colorBackground</item>
    </style>
</resources>

benjaminhorner · 2021-08-03T10:06:26Z

I am getting the same issue hen running the device in Dark mode BUT on the foreground PNG image. In all the drawable folders it appears white but upon build it is first white then changes to black.

jonbhanson · 2021-08-03T12:56:08Z

@ahmedalrifai is this problem happening in dark mode?

jonbhanson · 2021-08-03T14:52:03Z

@benjaminhorner can you post a video of the splash screen?

benjaminhorner · 2021-08-03T15:03:43Z

Screenrecorder-2021-08-03-16-59-57-875.0.mp4

@jonbhanson : here goes

jonbhanson · 2021-08-03T16:14:31Z

@ahmedalrifai @benjaminhorner I have not been able to replicate this problem. Can you send me a stripped out version of your app (or not stripped out if you want) that I can test?

ahmedalrifai · 2021-08-03T17:20:55Z

@jonbhanson
When I activate the dark mode on my android phone, it gives me a black background rather than a white one as I have it configured.

I believe it's because in Android dark mode it forces dark colors in the splash screen. When I gave it a nice dark color it came out as normal in the splash screen, but when it sees a white color in dark mode it ignores it and uses black.

jonbhanson · 2021-08-03T17:52:20Z

@ahmedalrifai I set color_dark: "#ffffff" to try to reproduce what you are describing. I set the android phone to dark mode. However, it shows a white splash screen as expected. Can you supply a code example to reproduce what you are experiencing?

benjaminhorner · 2021-08-04T07:05:46Z

@jonbhanson : https://we.tl/t-eRj4R71aNr

Tested with a Xiaomi Mi 10 running MIUI Global 12.1.1 and Android 11 RKQ1.200826.002. Just in case ;-)

jonbhanson · 2021-08-04T17:06:12Z

@benjaminhorner I ran your project on both a Pixel 2XL with Android 11 and an emulated Pixel 4 with Android 11, and I was not able to reproduce the changing color on either of these devices.

benjaminhorner · 2021-08-05T07:42:13Z

@jonbhanson : I get this issue on a real device (Xiaomi Mi 10 Lite).

db-dblank · 2021-08-22T03:13:15Z

That's probably because Xiaomi changes white backgrounds to black when on Dark mode. You can change this behavior under Settings > Display > More Dark mode options and disable the option Adjust text and backgrounds automatically. I also had to disable my app from the Individual apps section.

benjaminhorner · 2021-08-22T16:39:40Z

@db-dblank it IS caused by this, however, I still regard this as an issue as one cannot expect the users to do this in order to "fix" this.

db-dblank · 2021-08-23T12:30:02Z

Haven't test it yet but it seems that we can disable it by adding <item name="android:forceDarkAllowed">false</item> to the theme in styles.xml.

See this https://stackoverflow.com/questions/62696305/theme-problem-when-dark-mode-is-activated-under-miui-11-12

benjaminhorner · 2021-08-25T14:47:59Z

@db-dblank this does the trick !

jonbhanson · 2021-08-30T14:56:54Z

@benjaminhorner can you post your updated styles.xml? What folder(s) was the styles.xml in?

benjaminhorner · 2021-08-30T15:53:55Z

@jonbhanson: here is the path to the file
/app/android/src/main/res/values-night/styles.xml

The same file also exists for the "default" style in /app/android/src/main/res/values/styles.xml

And here is my styles.xml file content: (I only edited the first file)

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!-- Theme applied to the Android Window while the process is starting when the OS's Dark Mode setting is on -->
    <style name="LaunchTheme" parent="@android:style/Theme.Black.NoTitleBar">
        <!-- Show a splash screen on the activity. Automatically removed when
             Flutter draws its first frame -->
        <item name="android:windowBackground">@drawable/launch_background</item>
        <item name="android:windowFullscreen">false</item>
        <item name="android:forceDarkAllowed">false</item>
    </style>
    <!-- Theme applied to the Android Window as soon as the process has started.
         This theme determines the color of the Android Window while your
         Flutter UI initializes, as well as behind your Flutter UI while its
         running.
         
         This Theme is only used starting with V2 of Flutter's Android embedding. -->
    <style name="NormalTheme" parent="@android:style/Theme.Black.NoTitleBar">
        <item name="android:windowBackground">?android:colorBackground</item>
    </style>
</resources>

jonbhanson · 2021-08-30T20:11:58Z

Thanks @benjaminhorner, that helps because I don't have a Xiaomi device to test on. I will add this in the next version to improve Xiaomi support.

mohamoha6200 · 2022-02-18T17:37:38Z

@jonbhanson Hey bro , have you rolled out a fix for this ? because it's still reproduceable for me on Xiaomi redmi 9t till this day , on dark mode white turns grey although I have this everywhere :

<item name="android:forceDarkAllowed">false</item>
<item name="android:windowFullscreen">false</item>
<item name="android:windowSplashScreenBackground">#ffffff</item>

Im using flutter_native_splash 2.0.4 btw.

jonbhanson · 2022-03-13T17:08:15Z

Sorry, @mohamoha6200 I don't have an Xiaomi device, so there is no way for me to debug this problem. If you still have this problem, please open a new ticket and maybe someone else with an Xiaomi device can help debug.

jinaiyuanbaojie · 2022-04-01T04:10:55Z

@jonbhanson Hey bro , have you rolled out a fix for this ? because it's still reproduceable for me on Xiaomi redmi 9t till this day , on dark mode white turns grey although I have this everywhere :
<item name="android:forceDarkAllowed">false</item>
<item name="android:windowFullscreen">false</item>
<item name="android:windowSplashScreenBackground">#ffffff</item>
Im using flutter_native_splash 2.0.4 btw.

Please try under release mode.
Don't use debug mode.

mohamoha6200 · 2022-04-01T09:12:26Z

@jinaiyuanbaojie : ofc I've tried it on release mode , I can even show you the production version containing this issue.

jinaiyuanbaojie · 2022-04-02T10:59:26Z

Sorry, @mohamoha6200 I don't have an Xiaomi device, so there is no way for me to debug this problem. If you still have this problem, please open a new ticket and maybe someone else with an Xiaomi device can help debug.
hmm. whatever I think it is something about Android system itself. This project just generates some native codes basically. You could google something about Xiaomi

jonbhanson · 2022-04-02T11:52:46Z

@jinaiyuanbaojie @mohamoha6200 does this solution work for you?

Make sure that AppThemeBase is your theme in Manifest, like this: android:theme="@style/AppThemeBase" You may also want to make a separate theme in res/values-v29 to keep <item name="android:forceDarkAllowed">false</item>

ref

jinaiyuanbaojie · 2022-04-02T12:23:55Z

@jinaiyuanbaojie @mohamoha6200 does this solution work for you?

Make sure that AppThemeBase is your theme in Manifest, like this: android:theme="@style/AppThemeBase" You may also want to make a separate theme in res/values-v29 to keep <item name="android:forceDarkAllowed">false</item>

ref

Yep.From now on everything goes well from my side. Thanks for your amazing pact. You know Xiaomi Huawei are not the pure Android system. They always add some custom codes. So never mind. It must be problems from their own system.

jonbhanson · 2022-04-02T12:33:40Z

Good to hear that it works. I will reopen this ticket to see if I can add a fix for this.

mohamoha6200 · 2022-04-02T12:41:59Z

This is making me desperate x( nothing works , @jinaiyuanbaojie I'm wondering what exactly that you've changed for it to work , as long as my xiaomi 9t is on darkmode white appears as grey.
I just added res/values-v29 with the same code in it's styles.xml

<?xml version="1.0" encoding="utf-8"?>

<resources>
    <!-- Theme applied to the Android Window while the process is starting when the OS's Dark Mode setting is off -->
    <style name="LaunchTheme" parent="@android:style/Theme.Light.NoTitleBar">
        <item name="android:forceDarkAllowed">false</item>
        <item name="android:windowFullscreen">false</item>
        <item name="android:windowSplashScreenBackground">#ffffff</item>
    </style>

    <!-- Theme applied to the Android Window as soon as the process has started.
         This theme determines the color of the Android Window while your
         Flutter UI initializes, as well as behind your Flutter UI while its
         running.
         
         This Theme is only used starting with V2 of Flutter's Android embedding. -->

    <style name="NormalTheme" parent="@android:style/Theme.Light.NoTitleBar">
        <item name="android:windowBackground">?android:colorBackground</item>
        <item name="android:forceDarkAllowed">false</item>
        <item name="android:windowSplashScreenBackground">#ffffff</item>

    </style>
</resources>```

and I have this in my Manifest :

`<activity android:name=".MainActivity" android:launchMode="singleTask" android:theme="@style/LaunchTheme" android:exported="true" android:configChanges="orientation|keyboardHidden|keyboard|screenSize|smallestScreenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode" android:hardwareAccelerated="true" android:windowSoftInputMode="adjustResize">`

jinaiyuanbaojie · 2022-04-03T09:21:14Z

This is making me desperate x( nothing works , @jinaiyuanbaojie I'm wondering what exactly that you've changed for it to work , as long as my xiaomi 9t is on darkmode white appears as grey.
I just added res/values-v29 with the same code in it's styles.xml

<?xml version="1.0" encoding="utf-8"?>

<resources>
    <!-- Theme applied to the Android Window while the process is starting when the OS's Dark Mode setting is off -->
    <style name="LaunchTheme" parent="@android:style/Theme.Light.NoTitleBar">
        <item name="android:forceDarkAllowed">false</item>
        <item name="android:windowFullscreen">false</item>
        <item name="android:windowSplashScreenBackground">#ffffff</item>
    </style>

    <!-- Theme applied to the Android Window as soon as the process has started.
         This theme determines the color of the Android Window while your
         Flutter UI initializes, as well as behind your Flutter UI while its
         running.
         
         This Theme is only used starting with V2 of Flutter's Android embedding. -->

    <style name="NormalTheme" parent="@android:style/Theme.Light.NoTitleBar">
        <item name="android:windowBackground">?android:colorBackground</item>
        <item name="android:forceDarkAllowed">false</item>
        <item name="android:windowSplashScreenBackground">#ffffff</item>

    </style>
</resources>```

and I have this in my Manifest :

`<activity android:name=".MainActivity" android:launchMode="singleTask" android:theme="@style/LaunchTheme" android:exported="true" android:configChanges="orientation|keyboardHidden|keyboard|screenSize|smallestScreenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode" android:hardwareAccelerated="true" android:windowSoftInputMode="adjustResize">`

Sorry man. I don't have a Xiaomi device. But I believe what you posted. Maybe you can raise a ticket on Xiaomi official website.

jonbhanson · 2022-04-03T14:43:55Z

Since the android:theme="@style/AppThemeBase" suggestion does not work and I do not have an Xiaomi device, I am not aware of any way I have of solving this issue.

Sahil-Tagline · 2022-05-18T11:13:15Z

I have already add android:forceDarkAllowed ---> false in night/styles.xml but not working in my app on Redmi note 11 and POCO m2 device

jonbhanson closed this as completed Jul 9, 2021

jonbhanson reopened this Jul 15, 2021

jonbhanson closed this as completed in 9c404dd Sep 6, 2021

jonbhanson mentioned this issue Feb 6, 2022

the background color always black on Dark Mode Android #285

Closed

jonbhanson mentioned this issue Feb 6, 2022

Unable to set light background colors (#fffff, #f1f5f9, etc,.) for android dark mode #281

Closed

jonbhanson reopened this Feb 18, 2022

jonbhanson closed this as completed Mar 13, 2022

jonbhanson reopened this Apr 2, 2022

jonbhanson closed this as completed Apr 3, 2022

jonbhanson mentioned this issue Feb 20, 2023

Status/Notification bar still showing during splash screen on Android 12 #517

Closed

The plugin changes the color from the background to the Splash #184

The plugin changes the color from the background to the Splash #184

Comments

yeikel16 commented Jun 27, 2021

jonbhanson commented Jun 29, 2021

jonbhanson commented Jul 9, 2021

ahmedalrifai commented Jul 15, 2021

jonbhanson commented Jul 15, 2021

yeikel16 commented Jul 15, 2021

ahmedalrifai commented Jul 15, 2021

ahmedalrifai commented Jul 15, 2021

ahmedalrifai commented Jul 15, 2021

ahmedalrifai commented Jul 15, 2021 • edited Loading

benjaminhorner commented Aug 3, 2021

jonbhanson commented Aug 3, 2021

jonbhanson commented Aug 3, 2021

benjaminhorner commented Aug 3, 2021

jonbhanson commented Aug 3, 2021

ahmedalrifai commented Aug 3, 2021

jonbhanson commented Aug 3, 2021

benjaminhorner commented Aug 4, 2021

jonbhanson commented Aug 4, 2021

benjaminhorner commented Aug 5, 2021

db-dblank commented Aug 22, 2021 • edited Loading

benjaminhorner commented Aug 22, 2021

db-dblank commented Aug 23, 2021 • edited Loading

benjaminhorner commented Aug 25, 2021

jonbhanson commented Aug 30, 2021

benjaminhorner commented Aug 30, 2021

jonbhanson commented Aug 30, 2021

mohamoha6200 commented Feb 18, 2022 • edited Loading

jonbhanson commented Mar 13, 2022

jinaiyuanbaojie commented Apr 1, 2022

mohamoha6200 commented Apr 1, 2022

jinaiyuanbaojie commented Apr 2, 2022

jonbhanson commented Apr 2, 2022

jinaiyuanbaojie commented Apr 2, 2022

jonbhanson commented Apr 2, 2022

mohamoha6200 commented Apr 2, 2022

jinaiyuanbaojie commented Apr 3, 2022

jonbhanson commented Apr 3, 2022 • edited Loading

Sahil-Tagline commented May 18, 2022

ahmedalrifai commented Jul 15, 2021 •

edited

Loading

db-dblank commented Aug 22, 2021 •

edited

Loading

db-dblank commented Aug 23, 2021 •

edited

Loading

mohamoha6200 commented Feb 18, 2022 •

edited

Loading

jonbhanson commented Apr 3, 2022 •

edited

Loading