Flutter中No MediaQuery widget ancestor found报错的解决咨询

问题原因 #

你在MyApp的build方法中直接调用MediaQuery.of(context)时，MaterialApp还未完成构建——MediaQuery是由MaterialApp提供的组件，此时当前上下文没有对应的MediaQuery祖先，因此触发报错。

解决方案 #

提供两种可行的修改方式：

方式一：通过Builder获取MaterialApp上下文

将获取屏幕尺寸的逻辑放到MaterialApp内部的Builder中，确保上下文能访问到MediaQuery：

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Die Sache",
      home: Builder(
        builder: (context) {
          double screenheight = MediaQuery.of(context).size.height;
          double screenWidth = MediaQuery.of(context).size.width;
          return Theme(
            data: ThemeData(
              elevatedButtonTheme: ElevatedButtonThemeData(
                style: ElevatedButton.styleFrom(
                  fixedSize: Size(0.3 * screenWidth, 0.2 * screenheight),
                ),
              ),
            ),
            child: MyHomePage(),
          );
        },
      ),
    );
  }
}

方式二：直接通过系统窗口获取屏幕尺寸

不依赖上下文，通过dart:ui的窗口API获取屏幕尺寸：

import 'dart:ui';
import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    final window = WidgetsBinding.instance.window;
    final screenSize = window.physicalSize / window.devicePixelRatio;
    double screenheight = screenSize.height;
    double screenWidth = screenSize.width;

    return MaterialApp(
      title: "Die Sache",
      theme: ThemeData(
          elevatedButtonTheme: ElevatedButtonThemeData(
              style: ElevatedButton.styleFrom(
        fixedSize: Size(0.3 * screenWidth, 0.2 * screenheight),
      ))),
      home: MyHomePage(),
    );
  }
}

说明 #

• 方式一更符合Flutter组件树的依赖逻辑，推荐使用；
• 方式二无需依赖上下文，但需要导入dart:ui包，适合在无法获取有效上下文的场景使用。

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