在 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 。