Flutter设置背景图片时触发MediaQuery.of()错误求助

嘿，一看这个错误我就明白问题出在哪了——你的组件层级结构不对！

错误根源 #

Scaffold 组件内部需要调用 MediaQuery.of(context) 来获取屏幕尺寸、布局方向等关键信息，但 MediaQuery 是由 MaterialApp（或 WidgetsApp）这类根组件提供的。你现在直接把 Scaffold 作为 runApp 的顶层组件，导致它找不到任何 MediaQuery 祖先，所以才抛出这个报错。

修复后的代码 #

只需要把你的 Scaffold 嵌套到 MaterialApp 内部就行，修改后的完整代码如下：

import 'package:flutter/material.dart';

void main() => runApp(Calculator());

class Calculator extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 用MaterialApp包裹Scaffold，提供必要的全局上下文环境
    return MaterialApp(
      home: Scaffold(
        body: Container(
          decoration: BoxDecoration(
            image: DecorationImage(
              image: AssetImage("assets/Background_1.jpg"),
              fit: BoxFit.cover,
            ),
          ),
        ),
      ),
    );
  }
}

为什么这样改？ #

• MaterialApp 是Flutter Material组件库的核心根组件，它会自动创建 MediaQuery、Theme 等全局依赖的底层组件，让所有子组件都能通过 context 获取这些必要信息。
• 原来的代码中，Scaffold 是应用的最顶层组件，没有上层组件提供 MediaQuery 上下文，自然会调用失败。

既然你已经确认 pubspec.yaml 的资源配置没问题，修改完组件层级后，应该就能正常显示背景图片了！

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