Flutter 错误：(Webview) Media Query.of() 使用不包含媒体查询的上下文调用

Posted 2023-02-23

【中文标题】Flutter 错误：(Webview) Media Query.of() 使用不包含媒体查询的上下文调用

【英文标题】：Flutter Error:(Webview) Media Query.of() called with a context that does not contain a media query

【发布时间】：2020-03-28 18:08:07

【问题描述】：

我是 Flutter 的新手，所以这个问题可能会被反复问到。基本上我正在使用 webview 进行颤振。 版本 webview：webview_flutter：^0.3.16 我的代码是：

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
void main() => runApp(WebViewTest());

class WebViewTest extends StatefulWidget 
  @override
  State<StatefulWidget> createState() 
    return _WebViewTestState();
  


class _WebViewTestState extends State<WebViewTest> 

  WebViewController _webViewController;
  // String filePath = 'files/test.html';

  String filePath = 'https://flutter.dev/';

  @override
  Widget build(BuildContext context) 

return MaterialApp(
  home: Scaffold(
  appBar: AppBar(title: Text('Webview Demo')),
  body: WebView(
    initialUrl: filePath,
    javascriptMode: JavascriptMode.unrestricted,
    onWebViewCreated: (WebViewController webViewController) 
      _webViewController = webViewController;
      //_loadHtmlFromAssets();
    ,
  ),
 
)
);
  

注意：有时它会成功运行，但大多数时候会出现上述错误。为什么仅此代码的大小为 100MB？

错误是：

I/flutter (753): ══╡ 小部件库发现异常╞═════════════════════════════════════ ════════════════════════════ I/flutter（753）：在构建 WebViewTest（状态：_WebViewTestState#72524）时引发了以下断言： I/flutter (753)：使用不包含 MediaQuery 的上下文调用 MediaQuery.of()。 I/flutter (753)：从传递给 MediaQuery.of() 的上下文开始，找不到 MediaQuery 祖先。 I/flutter (753)：这可能是因为您没有 WidgetsApp 或 MaterialApp 小部件（这些小部件引入 I/flutter（753）：一个 MediaQuery），或者如果您使用的上下文来自这些小部件上方的小部件，则可能会发生这种情况。 I/flutter（753）：使用的上下文是： I/flutter（753）：脚手架（脏，状态：ScaffoldState#58c7d（生命周期状态：初始化，代码：跟踪 2 我/颤振（753）：股票）） I/flutter (753)：当异常被抛出时，这是堆栈： I/flutter (753):#0 MediaQuery.of (package:flutter/src/widgets/media_query.dart:798:5) I/flutter（753）：#1 ScaffoldState.didChangeDependencies（包：flutter/src/material/scaffold.dart:1972:50） I/flutter (753): #2 StatefulElement._firstBuild (package:flutter/src/widgets/framework.dart:4106:12) I/flutter (753): #3 ComponentElement.mount (package:flutter/src/widgets/framework.dart:3936:5)

【参考方案1】：

MediaQuery 是一个继承的小部件，在示例中，它采用 WebViewTest 的上下文，而不是 MaterialApp。 MaterialApp 需要成为您的类的父类才能为其提供上下文。 这将起作用：

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
void main() => runApp(MyApp());


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

  @override
  Widget build(BuildContext context) 
    return MaterialApp(
      home: WebViewTest(),
    );
  


class WebViewTest extends StatefulWidget 
  @override
  State<StatefulWidget> createState() 
    return _WebViewTestState();
  


class _WebViewTestState extends State<WebViewTest> 

  WebViewController _webViewController;
  // String filePath = 'files/test.html';

  String filePath = 'https://flutter.dev/';

  @override
  Widget build(BuildContext context) 

return  Scaffold(
  appBar: AppBar(title: Text('Webview Demo')),
  body: WebView(
    initialUrl: filePath,
    javascriptMode: JavascriptMode.unrestricted,
    onWebViewCreated: (WebViewController webViewController) 
      _webViewController = webViewController;
      //_loadHtmlFromAssets();
    ,


)
);
  

至于应用程序的大小，在调试模式下，所有即时 (JIT) 所需的组件都已加载，因此调试模式的大小很大，但一旦创建发布模式，您将看到在代码示例中将有一个大约 2.87mb 的应用程序