Flutter web - 启动画面 - 奇怪的行为答案

【问题标题】：Flutter web - splash screen - weird behaviorFlutter web - 启动画面 - 奇怪的行为
【发布时间】：2021-09-25 22:13:50
【问题描述】：

由于第一次加载 Flutter Web 应用程序通常需要一些时间，我试图在其初始屏幕中显示一条消息，以通知用户该事物未冻结 e 该时间是常规的行为。

为此，我只是将这几行代码放在 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>

显示消息是事实，但是，它的颜色/大小在此过程中以一种神秘的方式发生变化，我就是不知道原因。看看这个：

我尝试添加一个微调器，但事情变得更糟了。看看：

现在，不仅文本发生变化，而且屏幕组件（包括微调器）看起来也受到了影响。

有人知道如何解决吗？

提前 10 倍寻求帮助。

【问题讨论】：

我不想删除我的加载程序指示器。我只是想避免它在一段时间后改变它的大小。看看我发布的图片。或者（而且总是有这种可能性）我不明白如何应用 Javascript 代码来删除任何加载程序指示器。
您应该为样式添加 !important，例如：style="font-weight: bolder; color: #000 !important;"

标签： flutter splash-screen flutter-web

【解决方案1】：

尝试将其添加到您的 index.html 文件中：

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

我从另一个有同样问题的帖子中得到这个，它对我有用，在加载阶段结束时启动画面没有变大。 Flutter 编译器将通过以下消息抱怨它：

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.

但保留它与元标记，你会看到它的工作原理。

【讨论】：

【解决方案2】：

随着 Flutter 框架的加载，javascript 正在改变 body 样式，这导致页面在启动屏幕的中途呈现不同的方式。你可以通过提前将 body 设置为 Flutter 的设置来解决这个问题，这样就不会发生任何变化。尝试将您的 <body> 标记替换为这个预先设置好的正文标记：

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

【讨论】：