Flutter 3.3.6开发美食菜单遇No MediaQuery祖先缺失错误求助

这个错误的核心原因是：Scaffold等Material组件依赖MediaQuery来获取屏幕布局相关的上下文信息，而你的代码里直接将返回Scaffold的FoodList作为runApp的根组件，缺少了能提供MediaQuery的顶层容器组件（比如MaterialApp）。

修复后的完整代码 #

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    // 用MaterialApp作为根组件，它会自动提供MediaQuery等必要上下文
    return MaterialApp(
      title: 'Food Menu',
      home: const FoodList(),
    );
  }
}

class FoodList extends StatelessWidget {
  const FoodList({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Food List"),
      ),
      body: ListView(
        children: const <Widget>[
          ListTile(
            title: Text("Food Item 1"),
            trailing: Checkbox(value: false, onChanged: null),
          ),
          ListTile(
            title: Text("Food Item 2"),
            trailing: Checkbox(value: false, onChanged: null),
          ),
          ListTile(
            title: Text("Food Item 3"),
            trailing: Checkbox(value: false, onChanged: null),
          ),
          ListTile(
            title: Text("Food Item 4"),
            trailing: Checkbox(value: false, onChanged: null),
          ),
          ListTile(
            title: Text("Food Item 5"),
            trailing: Checkbox(value: false, onChanged: null),
          ),
          ElevatedButton(
            onPressed: null,
            child: Text('Submit'),
          )
        ],
      ),
    );
  }
}

关键说明 #

• MaterialApp是Material组件库的顶层容器，它会在内部创建MediaQuery、Theme等核心上下文对象，所有依赖这些对象的Material组件（如Scaffold、AppBar）必须处于它的子树中。
• 你之前的代码直接把FoodList（返回Scaffold）作为根组件，导致Scaffold无法找到上层的MediaQuery，从而抛出错误。

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