Flutter中MaterialApp内调用MediaQuery.of抛出异常排查

我是Flutter开发新手，编写了一个极简测试应用，相关代码如下：

main.dart #

import 'package:dart_test/views/widgets/items/pack_items.dart';
import 'package:dart_test/views/widgets/items/pack_row.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    print("app build");
    var pdata =
        PackData(packId: 'npack1', name: 'Pack1', name_ru: 'пак 1', nImages: 5);
    //print("~w:$contW");
    return MaterialApp(
        home: PackBody(data: pdata, offset: 0).build(context));
  }
}

PackBody.dart #

class PackBody extends ListItem {
  final PackData data;
  final int offset;
  PackBody({required this.data, required this.offset});

  @override
  Widget build(BuildContext context) {
    var ar = 896.0 / 768;
    //var contWidth=MediaQuery.of(context).size.width;
    return Container(
      width: MediaQuery.of(context).size.width,
      height: 50,
      child: Text('khkljgkjhgkjhg'),
    );
  }
}

运行上述代码时抛出异常，异常截图如下：

我尝试使用MediaQuery组件包裹PackBody但问题未解决。按照Flutter组件机制，MaterialApp本应向子组件树向下传递MediaQuery，不清楚为何出现该错误。

问题原因 #

报错核心原因有两个：

• 错误手动调用组件的.build()方法：Flutter框架中组件的build方法是由框架自动调度调用的，手动调用PackBody(...).build(context)时，传入的context是MyApp的构建上下文，这个上下文属于MaterialApp的父级上下文，根本没有被MaterialApp注入MediaQuery数据，自然无法通过MediaQuery.of(context)获取到实例。
• 根组件位置错误：MaterialApp是应用的根组件，应该放在最外层传给runApp，而不是作为子组件在MyApp里返回。

正确写法 #

调整组件层级，把MaterialApp放到最外层，不要手动调用组件的build方法，直接把组件实例传给home参数即可，框架会自动完成构建和上下文注入：

void main() {
  runApp(MaterialApp(home:MyApp()));
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var pdata = PackData(packId: 'npack1', name: 'Pack1', name_ru: 'пак 1', nImages: 5);
    // 此处context属于MaterialApp的子树，可以正常获取MediaQuery
    return PackBody(data: pdata, offset: 0);
  }
}

额外注意事项 #

• 所有需要依赖框架注入上层数据的组件（包括MediaQuery、Theme、Navigator等），调用对应of(context)方法时传入的context必须是对应根组件的子级上下文
• 非特殊场景不要手动调用任何组件的build方法，直接把组件实例放在组件树对应位置即可，框架会自动处理构建流程
• 手动在子组件外层包裹MediaQuery可以临时解决问题，但属于冗余写法，正确放置根组件位置后不需要额外包裹。

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