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

1
votes

I'm trying to build a flutter web app. Everything works fine while developing locally on Windows 10, but when I build and deploy the app, it only works in my desktop Chrome browser. Accessing it from Android or iOS browsers gives a white screen.

  1. Run flutter channel master.
  2. Run flutter upgrade.
  3. Run flutter config --enable-web.
  4. Run flutter create mywebapp.
  5. Run cd webapp.
  6. Run flutter build web.
  7. Deploy to server or host locally (e.g. cd build\web and `http-server).
  8. Connect to server from browser on mobile device (Android/iOS).

Am I doing something wrong, or is flutter just broken?

flutter doctor -v output:

[√] 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!

2
androidiosflutterflutter-web

2 Answers

0
votes

Switching to beta channel resolved the issue. After switching back to master, the issue did not return.

I also cleaned my flutter installation, but it didn't seem to have any problems, so not sure if that had any effect:

git clean -xfd
git pull
flutter doctor
0
votes

Try changing master channel to dev:

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