在 MaterialApp 内部。 使用不包含 MediaQuery 的上下文调用 MediaQuery.of()

Question

我正在尝试动态设置抽屉大小。

import 'package:flutter/material.dart';
import './screens/tab_screen.dart';

//widgets
import './widgets/main_drawer.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: TabWidget(),
        endDrawer: Container(
          width: MediaQuery.of(context).size.width * 0.65,
          child: MainDrawer(),
        ),
      ),
      title: "Ali Azad",
      // routes: {
      //   '/': (_) => TabWidget(),
      // },
    );
  }
}

但我得到了这个错误 = MediaQuery.of() 调用的上下文不包含 MediaQuery。;

Answer 1

如果你仔细看一下你的代码，你会看到你的 build 方法是用上下文调用的，到那个调用的时候，没有任何以前的 Widget，这意味着你的 MaterialApp 还不存在build 被调用，因此 BuildContext 没有任何以前的 MaterialApp，您可以通过拆分代码来解决这个问题：

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Home(),
      title: "Ali Azad",
    );
  }
}

// This Home Widget will be a child of MaterialApp, and the BuildContext has access to this Material widget.
class Home extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return Scaffold(
      body: TabWidget(),
      endDrawer: Container(
         width: MediaQuery.of(context).size.width * 0.65,
         child: MainDrawer(),
      )
    );
  }
}

或者，如果您不想创建另一个 Widget，那么您应该使用Builder小部件，它将为您生成一个新的 BuildContext。 您的小部件将如下所示：

MaterialApp(
  home: Builder(
    build: (BuildContext context) {
      return Scaffold(
        body: TabWidget(),
        endDrawer: Container(
           width: MediaQuery.of(context).size.width * 0.65,
           child: MainDrawer(),
        )
      );
    }
  ),
  title: "Ali Azad",
);

Answer 2

将您的Container小部件放在Builder小部件中或创建一个单独的小部件并将其分配给MaterialApp home参数，这样您就可以获得MaterialApp小部件的context ，您现在使用的context没有MaterialApp 。