Flutter中FutureBuilder内用Scaffold报No MediaQuery ancestor错误如何解决

该错误是因为 Scaffold 组件依赖 MediaQuery 组件提供的全局上下文信息，而 MediaQuery 是 MaterialApp/WidgetsApp 初始化时自动注入的。你的代码中 FutureBuilder 放在了 MaterialApp 外层，当Firebase初始化处于加载、报错状态时，返回的 Scaffold 组件没有被 MaterialApp 包裹，无法获取到父节点的 MediaQuery 就触发了崩溃。

将 MaterialApp 移到最外层，把Firebase初始化的 FutureBuilder 放到 MaterialApp 的 home 属性中，保证所有状态下返回的组件都被 MaterialApp 包裹。

修正后代码 #

import 'package:firebase_core/firebase_core.dart';
import 'package:flutter/material.dart';
import 'package:todolist/colorshades/color.dart';
import 'package:todolist/database/services.dart';

import 'Loading.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    // 外层直接返回MaterialApp，保证所有子组件都能拿到MediaQuery
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.pink,
      ),
      home: FutureBuilder(
        future: Firebase.initializeApp(),
        builder: (context, snapshot) {
          if (snapshot.hasError) {
            return Scaffold(
              body: Center(child: Text(snapshot.error.toString())),
            );
          }
          if (snapshot.connectionState == ConnectionState.waiting) {
            return const Loading();
          }
          return const TodoList();
        },
      ),
    );
  }
}

• 调整后所有Firebase初始化的状态分支（加载、报错、成功）返回的组件，都处于 MaterialApp 的上下文环境中，自动具备 MediaQuery 父节点，不会再触发缺失父节点的错误
• 原来的主题配置、调试开关配置直接保留在 MaterialApp 中，不影响原有业务逻辑

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