【错误记录】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.报错如何解决-优雅草卓伊凡
307 1
|
缓存 监控 前端开发
优化 Flutter 应用启动速度的策略,涵盖理解启动过程、资源加载优化、减少初始化工作、界面布局优化、异步初始化、预加载关键数据、性能监控与分析等方面
本文探讨了优化 Flutter 应用启动速度的策略,涵盖理解启动过程、资源加载优化、减少初始化工作、界面布局优化、异步初始化、预加载关键数据、性能监控与分析等方面,并通过案例分析展示了具体措施和效果,强调了持续优化的重要性及未来优化方向。
889 10
|
容器
Flutter Widget 解析
Flutter Widget 解析
272 2
|
开发框架 Dart 前端开发
Flutter 是谷歌推出的一款高效跨平台移动应用开发框架,使用 Dart 语言,具备快速开发、跨平台支持、高性能、热重载及美观界面等特点。
Flutter 是谷歌推出的一款高效跨平台移动应用开发框架,使用 Dart 语言,具备快速开发、跨平台支持、高性能、热重载及美观界面等特点。本文从 Flutter 简介、特点、开发环境搭建、应用架构、组件详解、路由管理、状态管理、与原生代码交互、性能优化、应用发布与部署及未来趋势等方面,全面解析 Flutter 技术,助你掌握这一前沿开发工具。
1381 8
|
存储 测试技术 Shell
Flutter UT太多导致跑覆盖率报错
Flutter UT太多导致跑覆盖率报错
296 2
|
容器
flutter&鸿蒙next 使用 InheritedWidget 实现跨 Widget 传递状态
在 Flutter 中,状态管理至关重要。本文详细介绍了如何使用 InheritedWidget 实现跨 Widget 的状态传递。InheritedWidget 允许数据在 Widget 树中向下传递,适用于多层嵌套的场景。通过一个简单的计数器示例,展示了如何创建和使用 InheritedWidget,包括其基础概念、工作原理及代码实现。虽然 InheritedWidget 较底层,但它是许多高级状态管理解决方案的基础。
394 2
|
存储 容器
Flutter 有状态Widget 和 无状态Widget
Flutter 有状态Widget 和 无状态Widget
575 0
|
Dart JavaScript 前端开发
Flutter 的 Widget 概述与常用 Widgets 与鸿蒙 Next 的对比
Flutter 是 Google 开发的开源 UI 框架,用于快速构建高性能的移动、Web 和桌面应用。Flutter 通过 Widget 构建 UI,每个 UI 元素都是 Widget,包括文本、按钮、图片等。Widget 不仅描述外观,还描述行为,是不可变的。常见的 Widget 包括结构型(Container、Column、Row)、呈现型(Text、Image)、交互型(ElevatedButton)和状态管理型(StatefulWidget)。Flutter 与鸿蒙 Next 在组件化架构、开发语言、布局系统、性能和跨平台支持方面各有优势
531 0
|
Android开发
【错误记录】Flutter 报错 ( Could not resolve io.flutter:flutter_embedding_debug:1.0.0. )(一)
【错误记录】Flutter 报错 ( Could not resolve io.flutter:flutter_embedding_debug:1.0.0. )(一)
1513 0
【错误记录】Flutter 报错 ( Could not resolve io.flutter:flutter_embedding_debug:1.0.0. )(一)
|
前端开发 安全 开发工具
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
1113 90
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex