Flutter web - splash screen - weird behavior

flutter splash-screen flutter-web

277

Solution 1

Try adding this in the of your index.html file:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

I got this from another post with the same problem, it works for me, the splash screen doesn't get bigger at the end of the loading phase. The Flutter compiler will complain about it with the following message:

WARNING: found an existing <meta name="viewport"> tag. Flutter Web uses its own viewport configuration for better compatibility with Flutter. This tag will be replaced.

But keep it with the meta tag and you will see it works.

Solution 2

The javascript is changing the body style as the Flutter framework loads, which is causing the page to render differently midway through the splash screen. You can solve this by setting up the body to Flutter's settings ahead of time so that there is no change. Try replacing your <body> tag with this pre-styled body tag:

<body style="position: fixed; inset: 0px; overflow: hidden; padding: 0px; margin: 0px; user-select: none; touch-action: none; font: 14px sans-serif; color: red;">

277

Author by

Boni Machado

Updated on December 31, 2022

Comments

Boni Machado over 1 year
As a flutter web app usually takes a bit of time to be loaded for the first time, I'm trying to show a message in its splash screen to notify the user that the thing is not frozen e that time is a regular behavior.

To achieve that, I just put these few lines of code on web/index.html
```
  <div style="text-align: center; position: absolute; top: 40%; width: 100%">
    <center>
      <p style="font-weight: bolder;">Carregando o catálogo...</p>
      <p>Na primeira execução, isso pode demorar cerca de 20 a 30 segundos.<br/>Seja paciente! ;-)</p>
    </center>
  </div>
```
It's a matter of fact that message is shown, but, it's color/size changes in a mysterious way in the process, and I just can't figure out the reason. Take a look at this:

I've tried to add a spinner and the thing just gets worse. Take a look:

Now, not only text changes but the while screen components, including the spinner, looks affected.

Does anyone have any clue of how to solve it?

10x in advance for any help.