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

Posted 2021-09-16 韩曙亮

文章目录

• 一、报错信息
• 二、解决方案

一、报错信息

---

需要使用 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.

二、解决方案

---

获取 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("底部内容"),
        ],
      ),
    );
  }
}

此时报错信息处理完毕 ;