MaterialApp 作为 MediaQuery 小部件的祖先。但是怎么做？答案

【问题标题】：MaterialApp as ancestor of MediaQuery widget. But how?MaterialApp 作为 MediaQuery 小部件的祖先。但是怎么做？
【发布时间】：2021-10-12 18:43:36
【问题描述】：

我正在尝试根据窗口/屏幕的宽度制作三种不同的布局。我收到错误 “未找到 MediaQuery 小部件祖先。” 由于有很多示例表明人们对 MediaQuery 小部件祖先有疑问，我想，我必须给 MediaQuery 小部件一个 MaterialApp 作为祖先.但我无法绕过它，我怎么能做到这一点？有人可以帮帮我吗？

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    var screenSize = MediaQuery.of(context).size;
    if (screenSize.width < 600) {
      return lay1();
    } else if (screenSize.width < 800) {
      return lay2();
    } else {
      return lay3();
    }
  }
}

Widget lay1() {
  return Container(
    color: Colors.lightGreenAccent,
  );
}

Widget lay2() {
  return Container(
    color: Colors.lightBlueAccent,
  );
}

Widget lay3() {
  return Container(
    color: Colors.orangeAccent,
  );
}

【问题讨论】：

您的 MyApp 不是 MaterialApp。您需要将 MaterialApp 返回给 run() 函数。

标签： flutter media-queries flutter-web

【解决方案1】：

您应该像这样将MyApp 小部件包装在MaterialApp 小部件中：

void main() {
  runApp(const MaterialApp(
    home: MyApp(),
  ));
}

MediaQuery 实例由MaterialApp 提供。这就是为什么在获取MediaQuery 的当前实例时需要调用MediaQuery.of(context)，并从那里提取视图的大小

【讨论】：