网络 - 启动画面 - 奇怪的行为

Question

由于 Flutter Web 应用程序首次加载通常需要一些时间，因此我尝试在其启动屏幕中显示一条消息，以通知用户该事物并未冻结，即时间是一种常规行为。

\n

为了实现这一点，我只需将这几行代码放在 web/index.html 上

\n

  <div style="text-align: center; position: absolute; top: 40%; width: 100%">\n    <center>\n      <p style="font-weight: bolder;">Carregando o cat\xc3\xa1logo...</p>\n      <p>Na primeira execu\xc3\xa7\xc3\xa3o, isso pode demorar cerca de 20 a 30 segundos.<br/>Seja paciente! ;-)</p>\n    </center>\n  </div>\n

\n

事实上，显示了消息，但是，在此过程中它的颜色/大小以一种神秘的方式发生了变化，我只是无法弄清楚原因。看看这个：

\n

\n

我尝试添加一个旋转器，但事情变得更糟。看一看：

\n

\n

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

\n

有谁知道如何解决它？

\n

Answer 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.

但是将其与元标记一起保留，您会看到它的工作原理。