【错误记录】Flutter 界面报错 ( No MediaQuery widget ancestor found. | Scaffold widgets require a MediaQuery )

简介: 【错误记录】Flutter 界面报错 ( No MediaQuery widget ancestor found. | Scaffold widgets require a MediaQuery )

文章目录

一、报错信息

二、解决方案





一、报错信息


Flutter 应用运行时报如下错误 :


Launching lib\main.dart on Pixel 2 in debug mode...
Running Gradle task 'assembleDebug'...
√ Built build\app\outputs\flutter-apk\app-debug.apk.
Installing build\app\outputs\flutter-apk\app.apk...
Uninstalling old version...
Error: ADB exited with exit code 1
Performing Streamed Install
adb: failed to install D:\002_Project\002_Android_Learn\flutter_animation\build\app\outputs\flutter-apk\app.apk: Failure [INSTALL_FAILED_UPDATE_INCOMPATIBLE: Package kim.hsl.flutter_animation signatures do not match previously installed version; ignoring!]
Installing build\app\outputs\flutter-apk\app.apk...
Debug service listening on ws://127.0.0.1:59548/20KwYgDmkUc=/ws
Syncing files to device Pixel 2...
======== Exception caught by widgets library =======================================================
The following assertion was thrown building HeroAnimation:
No MediaQuery widget ancestor found.
Scaffold widgets require a MediaQuery widget ancestor.
The specific widget that could not find a MediaQuery ancestor was: Scaffold
  dirty
  state: ScaffoldState#6ef6f(lifecycle state: initialized, tickers: tracking 2 tickers)
The ownership chain for the affected widget is: "Scaffold ← HeroAnimation ← [root]"
No MediaQuery ancestor could be found starting from the context that was passed to MediaQuery.of(). This can happen because you have not added a WidgetsApp, CupertinoApp, or MaterialApp widget (those widgets introduce a MediaQuery), or it can happen if the context you use comes from a widget above those widgets.
The relevant error-causing widget was: 
  HeroAnimation file:///D:/002_Project/002_Android_Learn/flutter_animation/lib/main.dart:5:10
When the exception was thrown, this was the stack: 
#0      debugCheckHasMediaQuery.<anonymous closure> (package:flutter/src/widgets/debug.dart:219:7)
#1      debugCheckHasMediaQuery (package:flutter/src/widgets/debug.dart:234:4)
#2      MediaQuery.of (package:flutter/src/widgets/media_query.dart:820:12)
#3      ScaffoldState.didChangeDependencies (package:flutter/src/material/scaffold.dart:2820:50)
#4      StatefulElement._firstBuild (package:flutter/src/widgets/framework.dart:4725:11)
...
====================================================================================================


image.png

image.png


出错代码 :


void main() {
  runApp(HeroAnimation());
}
class HeroAnimation extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // 时间膨胀系数 , 用于降低动画运行速度
    timeDilation = 10.0;
    return Scaffold(
      appBar: AppBar(
        title: Text("Hero 动画演示( 跳转前页面 )"),
      ),
      body: Center(
        child: HeroWidget(
          imageUrl: "https://ucc.alicdn.com/images/user-upload-01/20210329101628636.jpg",
          width: 300,
        ),
      ),
    );
  }
}






二、解决方案


出现上述问题 , 是因为在界面的根组件 , 没有使用 MaterialApp 组件 , 在 main.dart 中的 main 函数中 , 运行的组件的根组件必须是 MaterialApp ;


在 Scaffold 组件的外层包裹一层 MaterialApp , 即可解决问题 ;


class HeroAnimation extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // 时间膨胀系数 , 用于降低动画运行速度
    timeDilation = 10.0;
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Hero 动画演示( 跳转前页面 )"),
        ),
        body: ,
      ),
    );
  }
}



目录
相关文章
flutter开发中Use ‘const’ with the constructor to improve performance. Try adding the ‘const’ keyword to the constructor invocation.报错如何解决-优雅草卓伊凡
flutter开发中Use ‘const’ with the constructor to improve performance. Try adding the ‘const’ keyword to the constructor invocation.报错如何解决-优雅草卓伊凡
241 1
|
缓存 监控 前端开发
优化 Flutter 应用启动速度的策略,涵盖理解启动过程、资源加载优化、减少初始化工作、界面布局优化、异步初始化、预加载关键数据、性能监控与分析等方面
本文探讨了优化 Flutter 应用启动速度的策略,涵盖理解启动过程、资源加载优化、减少初始化工作、界面布局优化、异步初始化、预加载关键数据、性能监控与分析等方面,并通过案例分析展示了具体措施和效果,强调了持续优化的重要性及未来优化方向。
696 10
|
Dart 前端开发
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
490 75
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
|
容器
Flutter Widget 解析
Flutter Widget 解析
212 2
|
开发框架 Dart 前端开发
Flutter 是谷歌推出的一款高效跨平台移动应用开发框架,使用 Dart 语言,具备快速开发、跨平台支持、高性能、热重载及美观界面等特点。
Flutter 是谷歌推出的一款高效跨平台移动应用开发框架,使用 Dart 语言,具备快速开发、跨平台支持、高性能、热重载及美观界面等特点。本文从 Flutter 简介、特点、开发环境搭建、应用架构、组件详解、路由管理、状态管理、与原生代码交互、性能优化、应用发布与部署及未来趋势等方面,全面解析 Flutter 技术,助你掌握这一前沿开发工具。
1232 8
深入理解Flutter鸿蒙next版本 中的Widget继承:使用extends获取数据与父类约束
本文详细介绍了Flutter中如何通过继承其他Widget来创建自定义组件。首先解释了Widget继承的基本概念,包括StatelessWidget和StatefulWidget的区别。接着通过具体示例展示了如何继承StatelessWidget和StatefulWidget,并在子类中访问父类的build方法和状态。最后,结合多个自定义Widget展示了如何在实际应用中灵活使用继承和组合来构建复杂的UI。
304 8
|
存储 测试技术 Shell
Flutter UT太多导致跑覆盖率报错
Flutter UT太多导致跑覆盖率报错
172 2
|
容器
flutter&鸿蒙next 使用 InheritedWidget 实现跨 Widget 传递状态
在 Flutter 中,状态管理至关重要。本文详细介绍了如何使用 InheritedWidget 实现跨 Widget 的状态传递。InheritedWidget 允许数据在 Widget 树中向下传递,适用于多层嵌套的场景。通过一个简单的计数器示例,展示了如何创建和使用 InheritedWidget,包括其基础概念、工作原理及代码实现。虽然 InheritedWidget 较底层,但它是许多高级状态管理解决方案的基础。
330 2
|
存储 容器
Flutter 有状态Widget 和 无状态Widget
Flutter 有状态Widget 和 无状态Widget
457 0
|
容器
flutter:第一个flutter&Widget的使用 (二)
本文介绍了Flutter框架下的基本组件及其用法,包括简单的 Stateless Widget 如文本和按钮,以及更复杂的 StatefulWidget 示例。详细解释了如何使用 `context` 获取祖先小部件的信息,并展示了 `MaterialApp` 的属性及用途。此外,还探讨了 `StatefulWidget` 与 `StatelessWidget` 的区别,以及 `AppBar` 的常见属性配置方法。适合Flutter初学者参考学习。
226 2

热门文章

最新文章