flutter_native_splash
flutter_native_splash copied to clipboard
jonbhanson
Splash icon not working
Describe the bug App Icon not visible in splash screen
flutter_native_splash: image: lib/assets/images/splash.png color: "#16A3AD" fullscreen: true
Expected behavior App Icon not visible in splash screen
Screenshots
Device (please complete the following information):
- Device: Pixel 4 Api 30 Emulator
- OS: Android 11
Flutter doctor [√] Flutter (Channel stable, 3.0.5, on Microsoft Windows [Version 10.0.22000.795], locale en-GB) • Flutter version 3.0.5 at C:\Users\haide_bue2l28\Documents\flutter • Upstream repository https://github.com/flutter/flutter.git • Framework revision f1875d570e (11 days ago), 2022-07-13 11:24:16 -0700 • Engine revision e85ea0e79c • Dart version 2.17.6 • DevTools version 2.12.2
[√] Android toolchain - develop for Android devices (Android SDK version 31.0.0) • Android SDK at C:\Users\haide_bue2l28\AppData\Local\Android\sdk • Platform android-31, build-tools 31.0.0 • Java binary at: C:\Program Files\Android\Android Studio\jre\bin\java • Java version OpenJDK Runtime Environment (build 11.0.12+7-b1504.28-7817840) • All Android licenses accepted.
[√] Chrome - develop for the web • Chrome at C:\Program Files\Google\Chrome\Application\chrome.exe
[X] Visual Studio - develop for Windows X Visual Studio not installed; this is necessary for Windows development. Download at https://visualstudio.microsoft.com/downloads/. Please install the "Desktop development with C++" workload, including all of its default components
[√] Android Studio (version 2021.2) • 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 11.0.12+7-b1504.28-7817840)
[√] VS Code (version 1.69.2) • VS Code at C:\Users\haide_bue2l28\AppData\Local\Programs\Microsoft VS Code • Flutter extension can be installed from: https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter
[√] Connected device (4 available) • sdk gphone x86 (mobile) • emulator-5554 • android-x86 • Android 11 (API 30) (emulator) • Windows (desktop) • windows • windows-x64 • Microsoft Windows [Version 10.0.22000.795] • Chrome (web) • chrome • web-javascript • Google Chrome 103.0.5060.134 • Edge (web) • edge • web-javascript • Microsoft Edge 103.0.1264.71
[√] HTTP Host Availability • All required HTTP hosts are available
! Doctor found issues in 1 category.
Additional context Add any other context about the problem here.
I tried your config (updating the path to my own image) and it works fine.
Can you add the output of the flutter pub run flutter_native_splash:create command?
I have exactly the same issue with my real device
- Device: Galaxy S10e
- OS: Android 12
flutter_native_splash.yaml
dependencies:
flutter_native_splash: ^2.2.7
flutter_native_splash:
color: "#e1f5fe"
image: assets/logo_lockup_flutter_vertical.png
android_12:
color: "#e1f5fe"
image: assets/logo_lockup_flutter_vertical.png
web: false
fullscreen: true
I've tried with multiple different files but for the example I use logo_lockup_flutter_vertical.png.
Output from flutter pub run flutter_native_splash:create --path=flutter_native_splash.yaml
[Android] Creating splash images
[Android] Creating android12splash images
[Android] Updating launch background(s) with splash image path...
[Android] - android/app/src/main/res/drawable/launch_background.xml
[Android] - android/app/src/main/res/drawable-v21/launch_background.xml
[Android] Updating styles...
[Android] - android/app/src/main/res/values-v31/styles.xml
[Android] - android/app/src/main/res/values/styles.xml
[iOS] Creating images
[iOS] Updating ios/Runner/Info.plist for status bar hidden/visible
╔════════════════════════════════════════════════════════════════════════════╗
║ WHAT IS NEW: ║
╠════════════════════════════════════════════════════════════════════════════╣
║ You can now keep the splash screen up while your app initializes! ║
║ No need for a secondary splash screen anymore. Just use the remove() ║
║ method to remove the splash screen after your initialization is complete. ║
║ Check the docs for more info. ║
╚════════════════════════════════════════════════════════════════════════════╝
✅ Native splash complete.
Now go finish building something awesome! 💪 You rock! 🤘🤩
Like the package? Please give it a 👍 here: https://pub.dev/packages/flutter_native_splash
Flutter doctor:
Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, 3.0.5, on Microsoft Windows [Version 10.0.19043.1826], locale en-US)
[√] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
[√] Chrome - develop for the web
[√] Visual Studio - develop for Windows (Visual Studio Professional 2022 17.2.6)
[√] Android Studio (version 2021.2)
[√] VS Code (version 1.69.2)
[√] Connected device (4 available)
[√] HTTP Host Availability
• No issues found!
Additional context: It works as expected with device emulator Pixel 5 - API 30, looks like this is something platform specific
@romantitov Try adding this:
color_dark: "#e1f5fe"
image_dark: assets/logo_lockup_flutter_vertical.png
@Shahzeb-99 the same, the only difference is that background is black now
Can any of you send a copy of a project with this problem? I haven't been able to reproduce.
@jonbhanson in which phone with which Android version did you try to reproduce it? Based on my observation this is platform specific issue. Exactly the same code has no issues with Pixel 5 - API 30 but doesn't work with Galaxy S10e Android 12 API 31
@jonbhanson regarding to a project, for me the issue reproducible with the example project
This is the result from emulator Pixel 5 - API 30 (works as expected):
This is the result from Galaxy S10e (sometimes it shows the app icon, sometimes only background color),
the issue is also reproducible with emulator Pixel 4 - API 31 and Android 12 when I first time start the app:
But when I start it second time, it shows something different (but not the picture assets/logo_lockup_flutter_vertical.png)
flutter_native_splash:
color: "#e1f5fe"
image: assets/logo_lockup_flutter_vertical.png
android_12:
image: assets/logo_lockup_flutter_vertical.png
color: "#42a5f5"
fullscreen: true
Have the same issue on Samsung S10e and Samsung S21. On x86 emulator works fine.
@romantitov
It is working on my S10e after adding this to android\app\src\main\AndroidManifest.xml:
<meta-data
android:name="io.flutter.embedding.android.SplashScreenDrawable"
android:resource="@drawable/launch_background"
/>
I think this should be added automatically with create script
Yo @romantitov,
This is the result from Galaxy S10e (sometimes it shows the app icon, sometimes only background color),
This is the default behavior for android 12 splash screen. Know more here.
the issue is also reproducible with emulator Pixel 4 - API 31 and Android 12 when I first time start the app:
That is android 12 emulator issue, I'm facing it too. Not related with the package itself.
But when I start it second time, it shows something different (but not the picture
assets/logo_lockup_flutter_vertical.png)
Android 12 splash screen logo have strict dimension constraints. Know more here.
It is working on my S10e after adding this to android\app\src\main\AndroidManifest.xml:
<meta-data android:name="io.flutter.embedding.android.SplashScreenDrawable" android:resource="@drawable/launch_background" />I think this should be added automatically with create script
Isn't this deprecated? Source
For those who have had this problem: maybe your projects were created with Flutter < 2.5 and now need to be migrated. Can you follow the steps in the migration instructions and see if it resolves the problem? If this is the case, perhaps the migration steps can be integrated into this package.
@jonbhanson same problem here.
I've created a new project, everything went ok with flutter pub run flutter_native_splash:create
kelwk.zip
but nothing appears on pixel 3a api 31
Everything is ok on nexus 7 api 30
@romantitov
It is working on my S10e after adding this to android\app\src\main\AndroidManifest.xml:
<meta-data android:name="io.flutter.embedding.android.SplashScreenDrawable" android:resource="@drawable/launch_background" />I think this should be added automatically with create script
Even adding this code didn't fix the issue on api 31
testing using 1.2.4, 1.3.0, 2.0.4, 2.1.5, 2.2.2 and 2.2.8 and the problem is still here
So it doesn't Iook like a regression
api 32 doesnt work either. On the other hand iOS was without any adjustments fully working.
I have the same problem. I am using Flutter version: 2.10.4 as well as your package version: 2.1.6
Have you any news ?
This ticket was opened as an issue with Android 11 (API 30). A lot of the responses have been regarding API 31 and API 32, which is Android 12. You should know that the native Android 12 splash screen works completely differently than previous versions, and it is handled differently in the configuration of this package. In addition, this package's readme documents a couple cases where your Android 12 splash may not appear correctly:
PLEASE NOTE: The splash screen may not appear when you launch the app from Android Studio. However, it should appear when you launch by clicking on the launch icon in Android.
PLEASE NOTE: There are a number of reports that non-Google launchers do not display the launch image correctly. If the launch image does not display correctly, please try the Google launcher to confirm that this package is working.
Unfortunately this ticket has become such a mix of problems (I suspect most of which are related to the two notes above), that I cannot give a reply that applies to both the original problem and the replies, so I have to close it. If you still have a problem feel free to reopen a ticket with your specific problem. Please include your API level, configuration, and steps to reproduce the problem.
@jonbhanson Is t possible at least to add an example to the example project which works with Android 12?
@jonbhanson closing this ticket the way it was doesn't help us users of the package. There's no sample project on how to do it the right way (if this is the solution), there's no return from your side if it exists an error on neither android APIs and there wasn't any creation of more api specific issues to track and solve the problem.
@romantitov yes, next time I work on this package I will update the example to include Android 12.
@Macacoazul01 I'm happy to help the users of this package, but it is not practical to have a ticket that was opened with one problem, and have other users adding comments that are related to different problems. It is my fault - I should have redirected the first comment that related to API 31, but this is something I do on the side so I can't respond right away all the time. If you are still having trouble, feel free to open a detailed ticket and I'll do the best I can to help you.
Have you read 1. Setting the splash screen in the readme? You can copy the example config, paste them in your pubspec.yaml, remove the comments for the parameters you want to enable, and supply the images you want to use.
but it is not practical to have a ticket that was opened with one problem, and have other users adding comments that are related to different problems. It is my fault - I should have redirected the first comment that related to API 31, but this is something I do on the side so I can't respond right away all the time. If you are still having trouble, feel free to open a detailed ticket and I'll do the best I can to help you.
I totally agree with you trying to keep everything clean and focused on one problem and api at a time, and I suposed that this isn`t your main job (as most of the packages are developed for fun or to help a project or people).
I`m not complaining about this part... the problem here is that the issue was closed and not replaced, so now the bug is untracked and us users (and our users) will still see this happenning in our apps.
Have you read 1. Setting the splash screen in the readme? You can copy the example config, paste them in your pubspec.yaml, remove the comments for the parameters you want to enable, and supply the images you want to use.
It didn`t solve the problem