Flutter Web使用await语句异常：页面无显示且报错

问题分析 #

你碰到的ChromeProxyService: Failed to evaluate expression...错误，核心原因是Flutter Web调试器目前不支持在异步栈帧中评估表达式，带async标记的main函数刚好触发了这个兼容性问题。而浏览器空白大概率是Firebase初始化过程中出现异常，但因为没有错误处理逻辑，导致页面无法正常渲染。

解决方案 #

把Firebase初始化逻辑从main函数移到页面组件内，用FutureBuilder处理初始化状态，同时取消main函数的异步标记：

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(const MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  // 存储Firebase初始化任务
  Future<void>? _firebaseInitFuture;

  @override
  void initState() {
    super.initState();
    // 初始化Firebase，需传入Web端配置参数
    _firebaseInitFuture = Firebase.initializeApp(
      options: const FirebaseOptions(
        apiKey: "你的API_KEY",
        authDomain: "你的AUTH_DOMAIN",
        projectId: "你的PROJECT_ID",
        storageBucket: "你的STORAGE_BUCKET",
        messagingSenderId: "你的SENDER_ID",
        appId: "你的APP_ID"
      )
    );
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: FutureBuilder(
        future: _firebaseInitFuture,
        builder: (context, snapshot) {
          // 初始化完成
          if (snapshot.connectionState == ConnectionState.done) {
            if (snapshot.hasError) {
              // 显示初始化错误信息
              return Scaffold(
                body: Center(
                  child: Text('Firebase初始化失败: ${snapshot.error}'),
                ),
              );
            }
            // 渲染主页面
            return const HomePage();
          }
          // 加载中状态
          return const Scaffold(
            body: Center(
              child: CircularProgressIndicator(),
            ),
          );
        },
      ),
    );
  }
}

// 示例主页组件
class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('主页')),
      body: const Center(child: Text('Firebase初始化完成')),
    );
  }
}

关键注意事项 #

• 移除main函数的async标记：彻底规避调试器对异步栈帧的兼容性问题，解决ChromeProxyService报错。
• 添加错误处理逻辑：通过FutureBuilder的快照捕获初始化异常，避免浏览器空白，同时快速定位问题根源。
• 确认Firebase Web配置：必须在initializeApp中传入从Firebase控制台获取的Web端专属配置参数，否则初始化必然失败。

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