如何解决 Flutter Web 应用程序在移动浏览器上的白屏问题？

Question

我正在尝试构建一个 flutter 网络应用程序。在 Windows 10 上本地开发时一切正常，但是当我构建和部署应用程序时，它只能在我的桌面 Chrome 浏览器中运行。从 Android 或 iOS 浏览器访问它会出现白屏。

运行 flutter channel master.
运行 flutter upgrade.
运行 flutter config --enable-web.
运行 flutter create mywebapp.
运行 cd webapp.
运行 flutter build web.
在本地部署到服务器或主机（例如 cd build\web 和 `http-server）。
从移动设备上的浏览器连接到服务器 (Android/iOS)。

是我做错了什么，还是 flutter 坏了？

flutter doctor -v 输出：

[√] Flutter (Channel master, 1.19.0-4.0.pre.67, on Microsoft Windows [Version 10.0.18362.836], locale en-CA)
    • Flutter version 1.19.0-4.0.pre.67 at C:\_code\sdks\flutter
    • Framework revision f2320c3b7a (14 hours ago), 2020-06-04 14:45:17 -0700
    • Engine revision 859d892f1f
    • Dart version 2.9.0 (build 2.9.0-13.0.dev 54adfeb93f)


[√] Android toolchain - develop for Android devices (Android SDK version 29.0.3)
    • Android SDK at C:\_code\sdks\android
    • Platform android-29, build-tools 29.0.3
    • ANDROID_HOME = C:\_code\sdks\android
    • Java binary at: C:\Program Files\Android\Android Studio\jre\bin\java
    • Java version OpenJDK Runtime Environment (build 1.8.0_212-release-1586-b04)
    • All Android licenses accepted.

[√] Chrome - develop for the web
    • Chrome at C:\Program Files (x86)\Google\Chrome\Application\chrome.exe

[√] Android Studio (version 3.6)
    • Android Studio at C:\Program Files\Android\Android Studio
    • Flutter plugin version 44.0.2
    • Dart plugin version 192.7761
    • Java version OpenJDK Runtime Environment (build 1.8.0_212-release-1586-b04)

[√] VS Code (version 1.45.1)
    • VS Code at C:\Users\Brent\AppData\Local\Programs\Microsoft VS Code
    • Flutter extension version 3.11.0

[√] Connected device (2 available)
    • Web Server • web-server • web-javascript • Flutter Tools
    • Chrome     • chrome     • web-javascript • Google Chrome 83.0.4103.97

• No issues found!

Answer 1

切换到 beta 频道解决了这个问题。切换回 master 后，问题没有 return。

我也清理了我的 flutter 安装，但似乎没有任何问题，所以不确定是否有任何影响：

git clean -xfd
git pull
flutter doctor

Answer 2

尝试将 master 频道更改为 dev:

flutter channel dev
flutter upgrade
flutter run -d chrome
// or flutter run -d chrome --release

如何解决 Flutter Web 应用程序在移动浏览器上的白屏问题？

How do I resolve white screen on mobile browsers for flutter web app?

android

ios

flutter

flutter-web