Flutter No MediaQuery ancestor could be found starting from the context that was passed to MediaQuer

Posted 2021-09-06 GMCode

Flutter中可以用MediaQuery来获取Widget的宽高，

final size =MediaQuery.of(context).size;
final width =size.width;
final height =size.height; 

但是如果不注意调用位置可能会报错，如下面我最开始的使用：

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    MediaQueryData mediaQuery = MediaQuery.of(context);

    return MaterialApp(
      title: 'Flutter Demo',
      home:Scaffold(
        appBar: TitleView('出差申请',),
      ),
    );
  }
}

这个时候运行会报如下错误：

从错误异常中我们可以大概了解到有两种情况会导致上述异常：

1. 当没有 WidgetsApp or MaterialApp 的时候，我们使用 MediaQuery.of(context) 来获取数据。
2. 当我们在当前小部件中使用了上一个小部件的 context，来使用 MediaQuery.of(context) 获取数据的时候。

我们上述的代码很显然是属于第一种情况，也就是说我们在使用 MediaQuery.of(context) 的地方并没有一个 WidgetsApp or MaterialApp 来提供数据。
解决方法就是将 MediaQuery.of(context) 挪到 MaterialApp 内，如下：

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    MediaQueryData mediaQuery = MediaQuery.of(context);
    ScreenUtil.init(context);
    // TODO: implement build
    return Scaffold(
      appBar: TitleView('出差申请',),
    );
  }
}