search

jonbhanson / flutter_native_splash

Automatically generates native code for adding splash screens in Android and iOS. Customize with specific platform, background color and splash image.
https://pub.dev/packages/flutter_native_splash
MIT License
1.29k stars 202 forks source link

iOS - when os is in dark mode, splash shows light before dark #121

Closed molesquirrel closed 3 years ago

molesquirrel commented 3 years ago

Issue: when using 0.2.6 (not tested with other versions), the following occurs:

  1. Open app
  2. color and image for "light" splash screen is shown
  3. almost immediately, it tweens over to the dark mode image and background color
  4. App continues to load

All relevant data shown below. I have done flutter clean prior to creating the splash and building the app. This occurs regardless as to if the app has been previously installed or not. Occurs both on initial opening and subsequent openings of app.

Does not happen with Android.

Flutter doctor. -v

[✓] Flutter (Channel stable, 1.22.5, on macOS 11.1 20C69 darwin-arm, locale en-US) • Flutter version 1.22.5 at /Users/user/development/flutter • Framework revision 7891006299 (6 weeks ago), 2020-12-10 11:54:40 -0800 • Engine revision ae90085a84 • Dart version 2.10.4

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.2) • Android SDK at /Users/user/Library/Android/sdk • Platform android-30, build-tools 30.0.2 • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6915495) • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 12.3) • Xcode at /Applications/Xcode.app/Contents/Developer • Xcode 12.3, Build version 12C33 • CocoaPods version 1.10.0

[!] Android Studio (version 4.1) • Android Studio at /Applications/Android Studio.app/Contents ✗ Flutter plugin not installed; this adds Flutter specific functionality. ✗ Dart plugin not installed; this adds Dart specific functionality. • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6915495)

[✓] Connected device (2 available) • Michael’s iPad (mobile) • 01f6475ffb7ecf4609ac52c06a32b21217f8ef71 • ios • iOS 14.3 • iPhone 12 Pro Max (mobile) • 5409CE42-040E-45FB-AAE1-3DFB5D2E7CC6 • ios • com.apple.CoreSimulator.SimRuntime.iOS-14-3 (simulator)

flutter_native_splash.yaml flutter_native_splash: image: assets/images/splash.png color: "FFFFFF" color_dark : "1E3B70" image_dark: assets/images/splash_dark.png

Output of splash creation [Android] Creating splash images [Android] Creating dark mode splash images [Android] Updating android/app/src/main/res/drawable/launch_background.xml with splash image path [Android] Updating android/app/src/main/res/values/colors.xml with color for splash screen background [Android] Updating android/app/src/main/res/drawable-night/launch_background.xml with splash image path [Android] Updating android/app/src/main/res/values-night/colors.xml with color for splash screen background [Android] Updating android/app/src/main/res/drawable-v21/launch_background.xml with splash image path [Android] Updating android/app/src/main/res/drawable-night-v21/launch_background.xml with splash image path [Android] Updating styles.xml with full screen mode setting [iOS] Creating splash images [iOS] Creating dark mode splash images [iOS] Updating LaunchScreen.storyboard with width, and height

I'll be happy to provide anything else required if it'll help.

jonbhanson commented 3 years ago

I tried this configuration with a new Flutter project, but I was not able to replicate what you describe. I think on iOS there may be a brief animation upon launch from you app icon to the splash screen. Could this be what you are seeing? It is very fast, though. Can you try it with a blank project and see if you are seeing the same thing?

molesquirrel commented 3 years ago

Thanks for the reply!

It is certainly possible that something else in the app is causing it, but can any of the vanilla code in flutter get access to the splash screen actions?

I added a short movie that hopefully will display the issue. Unfortunately, it is not the app icon (which is a completely different image). In particular, you should be able to see the following:

  1. Initially, both the color (white) and the image for light mode is displayed.
  2. It then transitions to the dark mode data. Both the background changes to the dark blue, and the image swaps as well. The drawn portion of the image is the same, but the text below changes colors.

So, it is indeed showing, in order, both sets of data.

If you can point me to any other config files that you'd like to look into, I can post them as well.

Thanks again!

Splash screen video

jonbhanson commented 3 years ago

Try uninstalling the app from your device and make a clean install. I think this may happen when the app is updated with dark mode... somewhere in the device something is cached that is creating this effect. Or, an even better test would be to install the app on a device that hasn't had the app previously.

molesquirrel commented 3 years ago

Unfortunately, no dice. Did the full clean: no app, flutter clean, and it resulted in the same issue. I have confirmed this both on the simulator as well as an attached device (iPad).

jonbhanson commented 3 years ago

Hmm... I was hoping that was the solution. In answer to your earlier question, none of the Flutter code should come into play here because the native splash is displayed while the flutter framework boots up. The only Flutter code that I can think of that could have this effect would be if you had a second Flutter splash screen that displayed while your app resources loaded. I assume that is not the case here.

I'm stumped at the moment. Can you strip out your code and send me the shell of the app so I can do some testing?

molesquirrel commented 3 years ago

I'd be happy to do so. Almost done stripping it down, issue still occurring. Is.. /lib /assets (for splash images) pubspec.yaml flutter_native_spaslh.yaml

enough? How should I send it to you?

molesquirrel commented 3 years ago

Both the simulator on my M1 mac and the iPad I'm using are on 14.3.

jonbhanson commented 3 years ago

Thanks. Sorry I deleted the question when I saw that it was answered by your flutter doctor info.

jonbhanson commented 3 years ago

@molesquirrel I used your full app shell, added flutter's default demo main.dart, swapped out the developer credentials, and ran it on my physical iPhone SE 2020 as well as an emulated iPhone 12 Pro. I was not able to reproduce the flash that is appearing on your device. I'm afraid I am stumped. 🤔

https://user-images.githubusercontent.com/32202698/105364054-b4d03f00-5bca-11eb-9d24-80579f03643a.mov

molesquirrel commented 3 years ago

Thanks for continuing to look into this.

I tried on a non M1 machine just to make sure there wasn't something with Apple Silicon causing it, but I was able to replicate it there as well.

Interestingly, on my original M1 machine, I spun up a iOS 13.7 copy of the simulator, and it did work. So, all other things being equal, I can at least say that the problem comes up for me on 14.x.

Unfortunately, I am not sure what to make of this situation in terms of what to do next. Thanks again for all of your help, though!

jonbhanson commented 3 years ago

@molesquirrel I think this is the solution to your question: https://stackoverflow.com/questions/33002829/ios-keeping-old-launch-screen-and-app-icon-after-update

molesquirrel commented 3 years ago

Well, that amazingly fixed it! Thank you so much for continuing to look into it. It wasn't even a consideration that it was an issue with iOS itself, I just presumed it was something between Flutter and iOS.

Thank you again.