如何解决Linux Mint 20.2系统中Chrome运行Flutter Web应用时显示空白/透明窗口的问题

我之前在Linux Mint环境里遇到过完全一样的问题——当时flutter doctor全绿，但Chrome就是显示空白窗口，试了好几个方法才解决，给你分享几个亲测有效的思路：

1. 禁用Chrome硬件加速 #

Linux Mint的桌面环境和Chrome的硬件加速有时候会存在兼容冲突，这是最常见的诱因：

• 图形化操作：打开Chrome，进入设置→系统，关闭「使用硬件加速模式（如果可用）」，重启Chrome后再运行Flutter项目。
• 命令行临时生效：直接用带参数的命令启动Chrome运行项目：

  flutter run -d chrome --web-browser-flag="--disable-gpu"
  

2. 切换Flutter Web渲染器为HTML模式 #

Flutter Web默认使用Canvaskit渲染器，在部分Linux环境下会出现渲染异常，换成HTML渲染器大概率能解决问题：

• 临时运行：

  flutter run -d chrome --web-renderer html
  

• 设置为默认（一劳永逸）：编辑你的shell配置文件（比如~/.bashrc或~/.zshrc），添加以下内容：

  export FLUTTER_WEB_RENDERER=html
  

  执行source ~/.bashrc（对应你的配置文件）使设置生效，之后运行Flutter项目就不用每次加参数了。

3. 检查Snap版Flutter的权限 #

看你的Flutter是通过Snap安装的，Snap的沙箱权限可能会限制Flutter访问Chrome的相关资源：
尝试给Flutter Snap添加必要权限：

sudo snap connect flutter:home :home
sudo snap connect flutter:removable-media :removable-media

如果还是不行，可以考虑手动安装Flutter（从官网下载解压到本地目录，配置环境变量），避开Snap的权限限制。

4. 临时调整窗口 compositor #

Linux Mint Cinnamon的窗口 compositor偶尔会和Chrome渲染冲突，试试临时关闭：
按Alt+F2，输入metacity --replace并回车，之后再运行Flutter项目测试。如果有效，可以在Cinnamon的设置里调整compositor的选项（比如关闭垂直同步）。

这些方法里应该有能解决你问题的，我当时是结合禁用硬件加速和切换HTML渲染器搞定的。

内容的提问来源于stack exchange，提问作者janik