CODEWITHSUNDEEP
fluttersplash-screenflutter-web
Boni Machado
Boni Machado

Reputation: 197

Web - splash screen - weird behavior

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:

Animated gif reproducing the weird behavior

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

Animated git showing the issue

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?

Upvotes: 6

Views: 1941

Answers (1)

jxstxn __
jxstxn __

Reputation: 107

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.

Upvotes: 6

Related Questions