How to fix Chrome showing an empty / transprarent window for a Flutter web app on Linux?

Question

When I run a Flutter web app in Chrome using Android Studio I only get an empty / transparent window on my Linux Mint 20.2 system.

empty / transparent chrome window of flutter web app

I have already tried reinstalling Chrome, which did not help. I have tried different Flutter projects including a fresh demo project (with web support), but the transparent screen shows up regardless. The same result shows up when I run flutter run -d chrome.

Anyone know how to fix this?

These are the results of flutter doctor -v:

flutter doctor -v
[✓] Flutter (Channel stable, 2.10.3, on Linux Mint 20.2 5.14.0-1032-oem, locale en_US.UTF-8)
    • Flutter version 2.10.3 at /home/janik/snap/flutter/common/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 7e9793dee1 (5 weeks ago), 2022-03-02 11:23:12 -0600
    • Engine revision bd539267b4
    • Dart version 2.16.1
    • DevTools version 2.9.2

[✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
    • Android SDK at /home/janik/Android/Sdk
    • Platform android-31, build-tools 31.0.0
    • Java binary at: /opt/android-studio/jre/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.11+0-b60-7590822)
    • All Android licenses accepted.

[✓] Chrome - develop for the web
    • Chrome at google-chrome

[✓] Android Studio (version 2021.1)
    • Android Studio at /opt/android-studio
    • Flutter plugin version 66.0.1
    • Dart plugin version 211.7811
    • Java version OpenJDK Runtime Environment (build 11.0.11+0-b60-7590822)

[✓] IntelliJ IDEA Ultimate Edition (version 2021.2)
    • IntelliJ at /opt/idea-IU-203.7148.57
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart

[✓] VS Code (version 1.66.1)
    • VS Code at /usr/share/code
    • Flutter extension can be installed from:
      🔨 https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter

[✓] Connected device (1 available)
    • Chrome (web) • chrome • web-javascript • Google Chrome 100.0.4896.75

[✓] HTTP Host Availability
    • All required HTTP hosts are available


• No issues found!

Answer 1

I don't have answer, only similar problem. Mint 20.2 Ryzen 3 2200G with Radeon Vega Graphics. Transparent window in Chrome using Android Studio AND ALSO in Visual Studio Code, even when creating a new (demo) project without any own code. But Pixel mobile emulator works, no problem in 'virtual' phone!! So, is this chrome-related problem? This problem emerged a few weeks ago.

Answer 2

this seems like an issue with the latest chrome update so I expect this to be fixed soon, meanwhile as a workaround what it worked for me and I suggest you do is to use chromium instead, which works.

Install chromium and find its executable which chromium, for me is use/bin/chromium and the version of chromium installed is: Version 83.0.4103.116 (Developer Build) built on Debian bullseye/sid, running on Debian bullseye/sid (64-bit), I am running Pop O.S 20.04, Dart 2.16.1 • DevTools 2.9.2, Flutter 2.10.2 • channel stable.

In the terminal where you will run the flutter app export a variable pointing to chromium: export CHROME_EXECUTABLE=/usr/bin/chromium, now you can run:

flutter run -d chrome and it will actually use chromium which renders the window properly.

I would expect this to be fixed soon, I will open an issue on the flutter repo if it's not there yet.

Good luck.