Flutter项目本地运行正常，Firebase托管后出现白屏报错求助

问题概述 #

本地执行flutter run时功能完全正常，但通过Firebase托管部署后出现白屏，浏览器报错如下：

相关组件与代码说明 #

CustomDialogoTarjeta弹窗调用方式 #

CustomDialogoTarjeta类代码 #

buildCard2方法代码 #

Widget buildCard2(BuildContext context) {
    String color = "Rosa";
    return Positioned(
      top: 50,
      left: Consts.padding,
      right: Consts.padding * 2,
      bottom: 0,
      child: Container(
        decoration: BoxDecoration(
          color: secondBgColor,
          shape: BoxShape.rectangle,
          borderRadius: BorderRadius.circular(Consts.padding),
          boxShadow: [
            BoxShadow(
              color: Color.fromARGB(66, 0, 0, 0),
              blurRadius: 10.0,
              offset: const Offset(0.0, 10.0),
            ),
          ],
        ),
        padding: const EdgeInsets.only(
          top: Consts.avatarRadius + Consts.padding,
          bottom: 0, //Consts.avatarRadius + Consts.padding,
          left: Consts.avatarRadius + Consts.padding,
          right: Consts.avatarRadius + Consts.padding,
        ),
        margin: const EdgeInsets.only(top: Consts.avatarRadius, bottom: 0),
        child: Column(
          mainAxisSize: MainAxisSize.min, // To make the card compact
          children: <Widget>[
            const Text(
              "Añade una tarea",
              style: TextStyle(
                fontSize: 24.0,
                fontWeight: FontWeight.w700,
              ),
            ),
            const SizedBox(height: 16.0),
            TextFormField(
              controller: nombreController,
              decoration: const InputDecoration(
                hintText: 'Introduzca el nombre de la tarea',
              ),
            ),
            TextFormField(
              controller: fechaController,
              decoration: const InputDecoration(
                hintText: 'Introduzca la fecha de finalización de la tarea',
              ),
            ),
            RadioButtonWidget(
              // dont use const
              onRadioButtonChanged: (value) {
                color = value!;
              },
            ),
            const SizedBox(height: 16.0),
            Align(
              alignment: Alignment.bottomLeft,
              child: TextButton(
                onPressed: () {
                  Navigator.of(context).pop();
                },
                child: const Text('Cancelar'),
              ),
            ),
            Align(
              alignment: Alignment.bottomRight,
              child: TextButton(
                onPressed: () async {
                  //here I do the search in firebase database
                  MenuController m = MenuController();
                  Navigator.of(context).push(
                      // Pass ViewModel down to EditScreen

                      MaterialPageRoute(builder: (context) {
                    return MaterialApp(
                        debugShowCheckedModeBanner: false,
                        title: 'iOrganize',
                        theme: ThemeData.dark().copyWith(
                          scaffoldBackgroundColor: secondBgColor,
                          textTheme: GoogleFonts.poppinsTextTheme(
                                  Theme.of(context).textTheme)
                              .apply(bodyColor: Colors.white),
                          canvasColor: fisrtBgColor,
                        ),
                        home: ChangeNotifierProvider.value(
                          value: m,
                          child: PrincipalView(usuario: usuario),
                        ));
                  }));
                },
                child: const Text('Añadir'),
              ),
            ),
          ],
        ),
      ),
    );

  }

解决办法 #

针对Flutter Web部署Firebase后白屏报错的问题，按以下步骤排查修复：

1. 用生产模式构建Web包
   部署前必须执行flutter build web --release，debug模式的Web包带大量调试代码，生产环境兼容性差，直接部署大概率出问题。

2. 修复嵌套MaterialApp的错误
   代码中点击"Añadir"时，新创建了一个MaterialApp推入路由——Flutter应用只能有一个顶层MaterialApp，嵌套会彻底打乱路由、主题的上下文逻辑，这是Web生产环境白屏的常见诱因。
   修改为以下代码：

   Navigator.of(context).push(
     MaterialPageRoute(builder: (context) {
       return ChangeNotifierProvider.value(
         value: m,
         child: PrincipalView(usuario: usuario),
       );
     })
   );
   

3. 核对Firebase托管配置
   打开firebase.json，确认rewrites配置正确，处理单页应用的路由重定向：

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

   同时确认部署的是build/web目录下的最新编译文件，避免上传旧缓存文件。

4. 定位Dart代码的错误根源
   虽然报错显示在编译后的JS文件，但可以通过Source Maps映射回Dart代码：

   • 打开Chrome开发者工具 → 设置 → 勾选"Enable JavaScript source maps"，刷新页面后报错会指向对应Dart代码行，便于定位具体问题（比如代码中的value!强制解包，如果value为null，生产环境会直接抛出错误）。

5. 清理编译与缓存

   • 先执行flutter clean，再重新构建Web包，避免旧编译残留。
   • 部署后清除浏览器缓存，或者在Firebase控制台中手动刷新缓存。

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