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

Not working on web #324

Closed RednibCoding closed 1 year ago

RednibCoding commented 2 years ago

Describe the bug After setting up a splash screen, and launching the web app, it still shows the blue flutter loading bar ontop of the page while loading but it now shows a black background instead of the usual white background. But no image.

In the debug console i get the following warning: WARNING: found an existing tag. Flutter Web uses its own viewport configuration for better compatibility with Flutter. This tag will be replaced.

I am using:

Flutter doctor [√] Flutter (Channel stable, 2.10.3, on Microsoft Windows [Version 10.0.19042.1586], locale de-DE) [√] Android toolchain - develop for Android devices (Android SDK version 31.0.0-rc1) [√] Chrome - develop for the web [!] Visual Studio - develop for Windows (Visual Studio Professional 2022 17.0.7) X Visual Studio is missing necessary components. Please re-run the Visual Studio installer for the "Desktop development with C++" workload, and include these components: MSVC v142 - VS 2019 C++ x64/x86 build tools

jonbhanson commented 2 years ago

@RednibCoding please give steps to reproduce.

Did you run flutter pub run flutter_native_splash:create?

Please post your config.

jonbhanson commented 2 years ago

Closing due to inactivity. Feel free to reopen with the requested information if you are still having trouble.

spanky411 commented 1 year ago

This seems to only be present with a background image on web. The height isnt filling out the viewport. The following at the top of splash/splash.css seems to do the trick:

html, body {
    height:100%;
}

Also, the background color in body is set to black. It probably should be omitted or set to white in light mode. That doesn't matter too much since the image should take up the whole view area.

Bungeefan commented 1 year ago

@jonbhanson This issue seems to be still active, can you reopen this issue or should we open a new one?

jonbhanson commented 1 year ago

@Bungeefan can you give steps to reproduce?

Bungeefan commented 1 year ago

Config as from https://github.com/jonbhanson/flutter_native_splash/issues/429

To Reproduce Steps to reproduce the behavior:

  1. Set the config
  2. Run flutter pub run flutter_native_splash:create
  3. Run flutter in browser, splash should be with the image but black background. (I tried Edge and Chrome)

Also I am using Flutter 3.3.3

jonbhanson commented 1 year ago

I will soon push an update that should fix this.

Bungeefan commented 1 year ago

@jonbhanson Any updates on this? It still seems to be broken in the latest version (2.2.14).

jonbhanson commented 1 year ago

This should be fixed by b662516. Feel free to reopen if you are still having a problem.

Bungeefan commented 1 year ago

@jonbhanson Thanks for looking into this again! Sadly it didn't fix it, as the html and body elements are still having a height of 0px.

Any reasons against the snippet from @spanky411? This seems to reliably fix it in Firefox and Chromium.

Also it seems like you are using black (#000000) as the default LIGHTBACKGROUNDCOLOR, wouldn't it be better to use white for light mode?

Bungeefan commented 1 year ago

This seems to be an even better approach:

html {
  height: 100%
}

body {
  min-height: 100%;
}

Side note: I noticed that in the prefers-dark block, exactly the same properties (margin, height) are overwritten again.