Flutter Web项目部署至Firebase后出现空白白屏问题

一、代码层面的核心问题 #

你的buildCard方法返回了Expanded组件，但该组件被放在ListView.separated的itemBuilder中——ListView的子组件不能直接使用Expanded，因为ListView本身已为子元素提供滚动空间，Expanded会强制子元素填充父级剩余空间，引发布局约束冲突，在Web环境下直接导致渲染错误，最终表现为白屏。

解决方案： #

移除buildCard外层的Expanded，直接返回Container即可：

// 修正后的buildCard方法
Widget buildCard({
  required CardItem item,
  required BuildContext context,
}) =>
    Container(
      height: 100,
      width: 200,
      child: Column(
        children: [
          Expanded(
            child: AspectRatio(
              aspectRatio: 4 / 3,
              child: ClipRRect(
                borderRadius: BorderRadius.circular(40),
                child: Material(
                  child: Ink.image(
                    image: NetworkImage(item.urlImage),
                    fit: BoxFit.cover,
                  ),
                ),
              ),
            ),
          ),
          SizedBox(height: 4),
          Text(
            item.title,
            style: TextStyle(
                fontSize: 24,
                fontWeight: FontWeight.w300,
                color: Colors.black),
          ),
          Text(
            item.subtitle,
            style: TextStyle(fontSize: 20, color: Colors.black),
          )
        ],
      ),
    );

二、部署流程相关问题 #

1. 未构建生产版本就部署 #

直接部署开发版本代码时，Flutter Web的开发构建包含大量调试代码，可能在Firebase环境下出现兼容性问题导致白屏。

解决方案： #

先执行生产构建命令：

flutter build web --release

再用Firebase CLI部署build/web目录内容：

firebase deploy

2. Firebase未配置单页应用路由重写 #

Flutter Web是单页应用(SPA)，用户刷新页面或直接访问子路由时，Firebase Hosting会返回404，也可能表现为白屏。

解决方案： #

在项目根目录的firebase.json中添加rewrites配置：

{
  "hosting": {
    "public": "build/web",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

三、其他潜在问题 #

1. 图片资源的CORS限制 #

卡片使用的第三方图片链接，如果对应服务器未配置跨域访问(CORS)，浏览器会阻止图片加载，引发渲染错误导致白屏。

解决方案： #

• 直接在浏览器中访问图片URL，检查是否能正常显示；
• 替换为支持CORS的图片源，或下载图片到本地项目，通过本地资源引用。

2. 浏览器控制台报错排查 #

部署后打开浏览器开发者工具(F12)，查看Console和Network标签页，确认是否存在JS错误、资源加载失败等信息，这是定位白屏问题的核心依据。

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