【错误记录】Flutter 使用 MediaQuery 适配全面屏报错 ( No MediaQuery widget ancestor found. )

简介: 【错误记录】Flutter 使用 MediaQuery 适配全面屏报错 ( No MediaQuery widget ancestor found. )

文章目录

一、报错信息

二、解决方案





一、报错信息


需要使用 MediaQuery 获取当前的 Padding ;


import 'package:flutter/material.dart';
/// 使用 MediaQuery 进行全面屏适配
void main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    /// 获取当前的 padding 信息 , 报错位置 ; 
    final EdgeInsets edgeInsets = MediaQuery.of(context).padding;
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Container(
        decoration: BoxDecoration(
          color: Colors.white,
        ),
        //padding: EdgeInsets.fromLTRB(0, edgeInsets.top, 0, edgeInsets.bottom),
        child: SafeArea(
          child: Column(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Text("顶部内容"),
                Text("底部内容"),
              ],
            ),
        ),
      ),
    );
  }
}


Performing hot reload...
Syncing files to device TAS AN00...
======== Exception caught by widgets library =======================================================
The following assertion was thrown building MyApp(dirty):
No MediaQuery widget ancestor found.
MyApp widgets require a MediaQuery widget ancestor.
The specific widget that could not find a MediaQuery ancestor was: MyApp
  dirty
The ownership chain for the affected widget is: "MyApp ← [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: 
  MyApp file:///D:/002_Project/002_Android_Learn/flutter_screen_adaption/lib/main.dart:4: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      MyApp.build (package:flutter_screen_adaption/main.dart:14:46)
#4      StatelessElement.build (package:flutter/src/widgets/framework.dart:4648:28)
...
====================================================================================================
Reloaded 1 of 553 libraries in 299ms.


image.png




image.png



二、解决方案


获取 Padding 信息 ,


 

/// 获取当前的 padding 信息 , 报错位置 ; 
    final EdgeInsets edgeInsets = MediaQuery.of(context).padding;


需要在 MaterialApp 中进行获取 , 这里将上述代码重新进行封装 ,


将 MediaQuery 调用的代码 , 封装到 MaterialApp 组件内部 ;


import 'package:flutter/material.dart';
/// 使用 MediaQuery 进行全面屏适配
void main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomePage(),
    );
  }
}
class HomePage extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    /// 获取当前的 padding 信息
    final EdgeInsets edgeInsets = MediaQuery.of(context).padding;
    return Container(
      decoration: BoxDecoration(
        color: Colors.white,
      ),
      padding: EdgeInsets.fromLTRB(0, edgeInsets.top, 0, edgeInsets.bottom),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Text("顶部内容"),
          Text("底部内容"),
        ],
      ),
    );
  }
}


此时报错信息处理完毕 ;


image.png

目录
相关文章
|
24天前
|
容器
Flutter Widget 解析
Flutter Widget 解析
|
24天前
|
存储 容器
Flutter 有状态Widget 和 无状态Widget
Flutter 有状态Widget 和 无状态Widget
|
2月前
|
存储 测试技术 Shell
Flutter UT太多导致跑覆盖率报错
Flutter UT太多导致跑覆盖率报错
34 2
|
2月前
深入理解Flutter鸿蒙next版本 中的Widget继承:使用extends获取数据与父类约束
本文详细介绍了Flutter中如何通过继承其他Widget来创建自定义组件。首先解释了Widget继承的基本概念,包括StatelessWidget和StatefulWidget的区别。接着通过具体示例展示了如何继承StatelessWidget和StatefulWidget,并在子类中访问父类的build方法和状态。最后,结合多个自定义Widget展示了如何在实际应用中灵活使用继承和组合来构建复杂的UI。
95 8
|
2月前
|
容器
flutter&鸿蒙next 使用 InheritedWidget 实现跨 Widget 传递状态
在 Flutter 中,状态管理至关重要。本文详细介绍了如何使用 InheritedWidget 实现跨 Widget 的状态传递。InheritedWidget 允许数据在 Widget 树中向下传递,适用于多层嵌套的场景。通过一个简单的计数器示例,展示了如何创建和使用 InheritedWidget,包括其基础概念、工作原理及代码实现。虽然 InheritedWidget 较底层,但它是许多高级状态管理解决方案的基础。
114 2
|
3月前
|
容器
flutter:第一个flutter&Widget的使用 (二)
本文介绍了Flutter框架下的基本组件及其用法,包括简单的 Stateless Widget 如文本和按钮,以及更复杂的 StatefulWidget 示例。详细解释了如何使用 `context` 获取祖先小部件的信息,并展示了 `MaterialApp` 的属性及用途。此外,还探讨了 `StatefulWidget` 与 `StatelessWidget` 的区别,以及 `AppBar` 的常见属性配置方法。适合Flutter初学者参考学习。
|
2月前
|
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 在组件化架构、开发语言、布局系统、性能和跨平台支持方面各有优势
87 0
|
缓存 Dart
Flutter一切皆widget但是不要将所有东西放入一个widget
当我们在widgets目录中,我们可以看到很多小部件,如Padding,Align,SizedBox,等。我们通过组合它们来创建其他小部件,我发现这种方法可扩展、强大且易于理解。 但是当我阅读 一些我在互联网上找到的或由新采用者编写的源代码时,有一件让我震惊的事情:拥有大量build ` 方法的趋势,实例化很多小部件!我发现这很难阅读、理解和维护。
100 0
|
3月前
|
Android开发 iOS开发 容器
鸿蒙harmonyos next flutter混合开发之开发FFI plugin
鸿蒙harmonyos next flutter混合开发之开发FFI plugin
|
2月前
|
开发框架 Dart 前端开发
Flutter 是谷歌推出的一款高效跨平台移动应用开发框架,使用 Dart 语言,具备快速开发、跨平台支持、高性能、热重载及美观界面等特点。
Flutter 是谷歌推出的一款高效跨平台移动应用开发框架,使用 Dart 语言,具备快速开发、跨平台支持、高性能、热重载及美观界面等特点。本文从 Flutter 简介、特点、开发环境搭建、应用架构、组件详解、路由管理、状态管理、与原生代码交互、性能优化、应用发布与部署及未来趋势等方面,全面解析 Flutter 技术,助你掌握这一前沿开发工具。
76 8