Flutter web - splash screen - weird behavior

user_4127610 0
Viewed 714

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?

10x in advance for any help.

flutter-web flutter splash-screen
2 Answers

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.

user_138615130

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;">
user_83718250
Related