首页
学习
活动
专区
工具
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 ,此时数据已经加载完毕,但是加载完毕有可能也没有数据,所以需要判断不同情况

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 底部安全区域高度

    1.8K20

    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代码任何地方使用它。

    10K45

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

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

    79820

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

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

    2.8K10

    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.1K20

    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

    2.9K00

    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.1K21

    Flutter 旋转轮

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

    8.8K20

    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.5K20

    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 =

    98531
    领券