Flutter报错：MediaQuery.of()调用上下文无MediaQuery，求排查解决

这个问题我之前也碰到过！核心原因是上下文层级的问题，咱们一步步来拆解和解决：

为什么会报错？ #

你当前调用MediaQuery.of(context)时用的是MyApp组件的context，但MediaQuery是由MaterialApp组件注入到它的子树中的——简单说就是，MyApp的上下文在MaterialApp的“外面”，根本拿不到MaterialApp提供的MediaQuery数据，所以才会抛出这个错误。哪怕换成StatefulWidget，只要还是在这个层级的上下文调用，同样会报错。

两种可行的解决方案 #

方案1：将尺寸获取逻辑放到MaterialApp的子组件中 #

把获取屏幕尺寸的代码移到MaterialApp的子页面里（比如自定义的Home页面），这样就能拿到正确的上下文了：

import 'package:flutter/material.dart';
void main => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 这里的context是MaterialApp子树的上下文，可以正常获取MediaQuery
    final size = MediaQuery.of(context).size;
    return new Scaffold(
      body: Center(
        child: Text("屏幕宽度: ${size.width}, 屏幕高度: ${size.height}"),
      ),
    );
  }
}

方案2：使用Builder组件获取子树上下文 #

如果不想单独拆出一个组件，也可以用Builder组件包裹Scaffold，Builder会提供一个属于MaterialApp子树的上下文：

import 'package:flutter/material.dart';
void main => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: Builder(
        builder: (innerContext) {
          // 这里用innerContext就能拿到正确的MediaQuery
          final size = MediaQuery.of(innerContext).size;
          return Scaffold(
            body: Center(
              child: Text("屏幕宽度: ${size.width}, 屏幕高度: ${size.height}"),
            ),
          );
        },
      ),
    );
  }
}

总结 #

本质上就是要确保调用MediaQuery.of(context)时，这个context是MaterialApp（或者WidgetsApp）子树中的上下文——只有这样，上下文里才包含MediaQuery的信息。

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