首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

在使用不包含MediaQuery的上下文调用flutter MediaQuery.of()时出错

在使用不包含MediaQuery的上下文调用flutter MediaQuery.of()时出错是因为在Flutter中,MediaQuery是通过Widget树来传递的,而不是通过上下文。当调用MediaQuery.of(context)时,它会沿着Widget树向上查找最近的包含MediaQuery的父级Widget,并返回该Widget的MediaQueryData。

如果在调用MediaQuery.of()时出现错误,可能有以下几种原因:

  1. 上下文中没有包含MediaQuery的父级Widget:在调用MediaQuery.of()之前,确保在上下文中存在一个包含MediaQuery的父级Widget。可以通过在Widget树中添加一个包含MediaQuery的Widget来解决此问题。
  2. 上下文传递错误:确保将正确的上下文传递给MediaQuery.of()。如果上下文传递错误,可能无法找到包含MediaQuery的父级Widget。
  3. 上下文不在Widget树中:如果上下文不在Widget树中,调用MediaQuery.of()将无法找到包含MediaQuery的父级Widget。确保在正确的位置调用MediaQuery.of(),并且上下文在Widget树中。

解决此问题的一种方法是在调用MediaQuery.of()之前,先检查上下文中是否存在包含MediaQuery的父级Widget。可以使用以下代码示例:

代码语言:txt
复制
MediaQueryData mediaQueryData;
if (MediaQuery.of(context, nullOk: true) != null) {
  mediaQueryData = MediaQuery.of(context);
} else {
  // 上下文中没有包含MediaQuery的父级Widget,进行相应处理
}

在上述代码中,我们首先使用MediaQuery.of(context, nullOk: true)来检查上下文中是否存在包含MediaQuery的父级Widget。如果存在,我们将调用MediaQuery.of(context)来获取MediaQueryData。否则,可以根据实际需求进行相应的处理。

希望以上解答对您有帮助!如果您需要更多关于Flutter或其他云计算领域的问题,请随时提问。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

端开发技术——解密Flutter响应式布局

Flutter是一个跨平台的应用开发框架,支持各种屏幕大小的设备,它可以在智能手表这样的小设备上运行,也可以在电视这样的大设备上运行。使用相同的代码来适应不同的屏幕大小和像素密度是一个挑战。...Flutter响应式布局的设计没有硬性的规则。在本文中,我将向您展示在设计响应式布局时可以遵循的一些方法。...记住,在Flutter中,每个屏幕和整个应用程序也是一个widget! widget本质上是可重用的,因此在Flutter中构建响应式布局时,您不需要学习任何其他概念。...请记住:MediaQuery和LayoutBuilder之间的主要区别在于,MediaQuery使用屏幕的完整上下文,而不仅仅是特定小部件的大小。...与此同时,您还将学习为大屏幕构建布局的另一个重要概念,即分屏视图(一个屏幕上显示多个页面)。 响应式布局:在不同大小的屏幕上使用不同的布局。 我们将建立一个名叫Flow的聊天应用程序。

2.3K00

抖音的强大对手来了,用Flutter手撸一个抖音国际版,看看有多炫

/telsacoin/telsavideo 后端需要的话请留下邮箱 本期最大的优化就是国际化,flutter国家化按以下步骤 在pubspec.yaml文件加上 flutter: sdk:...flutter flutter_localizations: sdk: flutter intl: ^0.17.0 # Add this line ffi: ^1.1.2 在底部的flutter...文件引用: import 'package:flutter_gen/gen_l10n/app_localizations.dart'; 在build里加入多语言检测及支持的代码: return MaterialApp..., ); }, ); 然后在需要引用的位置加入: import 'package:flutter_gen/gen_l10n/app_localizations.dart'; 调用的位置...,则显示加载的图标loading 当snapshot.connectionState == ConnectionState.done 时,此时数据已经加载完毕,但是加载完毕有可能也没有数据,所以需要判断不同的情况

1.1K20
  • Flutter 中键盘弹起时,Scaffold 发生了什么变化

    最近刚好有网友咨询一个问题,那就顺便借着这个问题给大家深入介绍下 Flutter 中键盘弹起时,Scaffold 的内部发生了什么变化,让大家更好理解 Flutter 中的输入键盘和 Scaffold...image Scaffold 的 resize Scaffold 是 Flutter 中最常用的页面脚手架,前面知道了通过 resizeToAvoidBottomInset ,我们可以配置在键盘弹起时页面的底部按键和...首先如下图所示,我们在 Scaffold 的源码里可以看到,当resizeToAvoidBottomInset 为 true 时,会使用 mediaQuery.viewInsets.bottom 作为...MainWidget 里被使用; 分别在这两个 Widget 的build 方法里打印出对应的 MediaQuery.of(context).padding 和 MediaQuery.of(context...MainWidget 使用的 MediaQuery.of(context) 得到的 MediaQueryData 是上级往下传递的,里面包含了 top:47 的状态栏高度和 bottom:34 的底部安全区域高度

    2.1K20

    Flutter之GetX集成及使用详解

    ever 当数据发生改变时触发 everAll 和 "ever "很像,只是监听的是多个响应式变量的变化,当其中一个发生变化就会触发回调 once 只在变量第一次被改变时被调用 debounce 防抖,...ever(count, (newValue) => print("$newValue has been changed")); ///只有在变量count在第一次被改变时才会被调用。...,大部分情况下不需要手动调用该方法,GetX 内部会自动处理,当不需要时自动移除 Get.delete(); 3.路由管理 路由也是 Flutter 项目重要的一环...GetPlatform.isWeb // 相当于.MediaQuery.of(context).size.height,//但不可改变。Get.heightGet.width // 提供当前上下文。...Get.contextOverlay // 注意:以下方法是对上下文的扩展。// 因为在你的UI的任何地方都可以访问上下文,你可以在UI代码的任何地方使用它。

    10.4K45

    flutter系列之:查询设备信息的利器:MediaQuery

    不用怕,在flutter中为我们提供了一个叫做MediaQuery的利器,大家一起来看看吧。 MediaQuery详解 MediaQuery从名字上来看,它的意思是媒体查询。...在InheritedWidget中可以实现of方法,通过调用BuildContext.dependOnInheritedWidgetOfExactType来从context中获取最临近的InheritedWidget...我们可以看到返回了一个新的MediaQuery,其中data部分使用了MediaQuery.of(context)来获取context最近的MediaQuery,然后调用它的removePadding方法将对应的...总结 MediaQuery是flutter中一个非常方便的工具,用来检测media的属性情况,根据MediaQuery,我们可以做出更加富有交互性的APP。...更多内容请参考 http://www.flydean.com/50-flutter-mediaquery/ 最通俗的解读,最深刻的干货,最简洁的教程,众多你不知道的小技巧等你来发现!

    85620

    Flutter 系列之GetX的学习(3) --> 其他实用功能

    // 你可以判断是否在浏览器中运行 // 在 Windows、iOS、OSX、Android 等上 GetPlatform.isWeb // 相当于:MediaQuery.of(context).size.height..., // 但不可变 Get.height Get.width // 获取当前导航器的上下文 Get.context // 获取前景中 snackbar/对话框/底部表单的上下文,可以在代码中的任何地方使用...Get.contextOverlay // 注意:以下方法是上下文的扩展。...因为你在 UI 的任何地方都有上下文的访问权限,所以可以在 UI 代码的任何地方使用它 // 如果你需要可变的高度/宽度(如桌面或可以缩放的浏览器窗口),你需要使用上下文 context.width...() /// 类似于 MediaQuery.of(context).viewPadding context.mediaQueryViewPadding() /// 类似于 MediaQuery.of

    26910

    如何在flutter中构建响应式布局(第五节)

    使用相同的代码库使您的应用程序适应如此多样的屏幕尺寸和像素密度始终是一个挑战。在 Flutter 中设计响应式布局没有硬性规定。在本文中,我将向您展示一些在设计此类布局时可以遵循的方法。...在继续在 Flutter 中构建响应式布局之前,我想说明一下 Android和iOS如何处理不同屏幕尺寸的原生布局。...小部件本质上是可重用的,因此您在 Flutter 中构建响应式布局时无需学习任何其他概念。...扩展性和灵活性 在 aColumn或 aRow中特别有用的小部件是Expandedand Flexible。该?扩展插件扩展行,列的孩子,或Flex使孩子充满可用空间,而?...您仍然可以对此应用程序进行许多改进,其中之一可能是根据不同的屏幕尺寸定义不同的fontSize。在使用响应能力时,您可以使用的一些令人惊叹的 Flutter 插件如下: ?

    2.9K10

    Flutter 小技巧之 MediaQuery 和 build 优化你不知道的秘密

    Flutter 里大家应该都离不开 MediaQuery ,比如通过 MediaQuery.of(context).size 获取屏幕大小 ,或者通过 MediaQuery.of(context).padding.top...又和键盘状态有关系,所以:键盘的弹出可能会导致使用 MediaQuery.of(context) 的地方触发 rebuild,举个例子:如下代码所示,我们在 MyHomePage 里使用了 MediaQuery.of...试想一下,如果你在每个页面开始的位置都是用了 MediaQuery.of(context) ,然后打开了 5 个页面,这时候你在第 5 个页面弹出键盘时,也触发了前面 4 个页面 rebuild,自然而然可能就会出现卡顿...,那么弹出键盘时就会导致页面 rebuild MediaQuery.of 用的是 Scaffold 内的 context ,那么获取到的是 Scaffold 对于区域内的 MediaQueryData...MediaQuery 和键盘状态的关系MediaQuery.of 使用不同 context 对性能的影响通过 Scaffold 内的 context 获取到的 MediaQueryData

    1.2K20

    flutter制作具有自定义导航栏的渐进式 Web 应用程序

    在“ NavBarItem ”部分之后 NavigationBar/src/NavBar.dart import 'package:flutter/material.dart'; import 'package...我们可以假设,这些是按钮,所以我们可以使用 - “InkWell” - 小部件,它具有 Ontap() 函数,它被包裹着 - “材料”小部件,并取消材料小部件的默认颜色我们手动使颜色透明。...当构造函数获得活动的 bool 变量值时,我们可以使用它来为主体 - “AnimatedContainer”设置动画,就像我在下面的代码中所做的那样。...,它可以由圆角矩形容器创建,并创建一个包含文本 1、2、3 的列,并用 Row() 将其包裹起来,并添加如下所示的 ProgressIndicator, Dashboard/src/ProjectStatisticsCards.dart...使阴影看起来不错 CalenderSpace/src/CalendarPellet .dart import 'package:flutter/material.dart'; import 'package

    3K00

    Flutter 旋转轮

    它显示了如何在flutter应用程序中使用「flutter_spinwheel」软件包运行「旋转轮」,并显示了当您点击该项目时,旋转器将移动。同样,您将沿顺时针/逆时针的任何方向移动微调器。...**onChanged:**此 属性用于在每次更改选择时从微调器菜单返回所选值的回调。 「select」:此 属性用于选择(突出显示)圆的扇区。范围是0(项目大小)。想象它就像一个数组。...在itemBuilder中,我们将导航容器小部件。在小部件内,我们将添加一个边距,即容器的高度。他的子属性,我们将添加一个列小部件。在此小部件中,我们将添加两个文本,分别是问题和答案。..., itemBuilder: (context, index) => Container( margin: EdgeInsets.all(30.0), height: MediaQuery.of...项「以外的所有选项,应当绘制边框」指令**确定是否应绘制边框,「onChanged」表示每次更改选择时从微调器菜单返回所选值的回调。

    8.9K20

    Flutter 组件 | Builder 构造器与 BuildContext 认知

    比如下面通过 MediaQuery.of(context) 可以获取 MediaQueryData 数据,从而拿到 屏幕尺寸、设备分辨率等数据信息,这里核心方法 BuildContext 的 dependOnInheritedWidgetOfExactType...,因为MediaQuery 是在 MaterialApp 内部包含的,这时 context 中是找不到的,所以想要使用 MediaQuery,那就必需将 context 下移到 MaterialApp...也就说明使用 Builder 回调的上下文,是可以使用 MediaQuery.of(ctx) 获取到媒体信息的。 ? ? 到这里,你应该对上下文的层级有了一定的认识。...在使用 MaterialApp 组件时,可以通过 builder 属性,实现和 Builder 组件一样的效果,不过追其本质也还是 Builder 组件的功劳。 ?...---- 在 IconTheme 中的 merge 方法里也使用了 Builder 组件,这是为了在没有上下文的时候拿到上下文,这样就不需要在 merge 方法中传入上下文了,这也是上下文无中生有的使用方式

    2.3K21

    【Flutter 专题】94 初识 MediaQuery

    ,但一般通过 MediaQuery.of(context) 来获取相关信息; 当相关信息发生变化,例如屏幕旋转等时,屏幕中 Widget 会重新构建,以保持最新状态;我们可以通过 MediaQuery...false, bool removeBottom = false, @required Widget child, }) MediaQueryData MediaQueryData 包含关于媒介的相关信息...13. viewInsets viewInsets 为键盘弹出时等遮挡屏幕边距,其中 viewInsets.bottom 为键盘高度; print('键盘遮挡内边距 -> ${MediaQuery.of...Tips 和尚在尝试获取其他子 Widget Size 时,有两点需要注意,首先要设置一个全局的 GlobalKey 来获取当前位置,key 需要为唯一的;第二通过 GlobalKey()....currentContext 获取 BuildContext 上下文环境,从而获取对应尺寸; var _itemExpandedKey = GlobalKey(); var _itemTextKey =

    1K31

    flutter制作具有自定义导航栏的渐进式 Web 应用程序

    (context).size.height, width: MediaQuery.of(context).size.width, child: Stack(...在“ NavBarItem ”部分之后 NavigationBar/src/NavBar.dart import 'package:flutter/material.dart'; import 'package...我们可以假设,这些是按钮,所以我们可以使用 - “InkWell” - 小部件,它具有 Ontap() 函数,它被包裹着 - “材料”小部件,并取消材料小部件的默认颜色我们手动使颜色透明。...当构造函数获得活动的 bool 变量值时,我们可以使用它来为主体 - “AnimatedContainer”设置动画,就像我在下面的代码中所做的那样。...使阴影看起来不错 CalenderSpace/src/CalendarPellet .dart import 'package:flutter/material.dart'; import 'package

    2.6K20
    领券