时间戳

首页 > 解决方案 > 在 MaterialApp 内部。使用不包含 MediaQuery 的上下文调用 MediaQuery.of()

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

问题描述

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

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

标签： flutternavigation-drawer

解决方案

如果您仔细查看代码，您会看到您的 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",
);

推荐阅读