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

Question

我是飘飘的新手，所以也许这个问题被反复问了。基本上我正在使用网络视图进行颤振。版本网页视图： 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/颤振 ( 753(： ═══ 控件库捕获的异常 ╞══════════════════════════════════════════════════════════════ I/flutter ( 753(： 在构建 WebViewTest(状态： _WebViewTestState#72524( 时抛出以下断言： I/flutter ( 753(： MediaQuery.of(( 使用不包含 MediaQuery 的上下文调用。 I/flutter ( 753(：从传递给 MediaQuery.of(( 的上下文开始，找不到 MediaQuery 祖先。 I/颤振 (753(：这可能是因为您没有 WidgetsApp 或 MaterialApp 小部件(这些小部件引入了 I/flutter ( 753(：一个 MediaQuery(，或者如果您使用的上下文来自这些小部件上方的小部件，则可能会发生这种情况。 I/颤振 (753(：使用的上下文是： I/颤振 ( 753(： 基架(脏，状态：基架状态 #58c7d(生命周期状态：已初始化，股票代码：跟踪 2 I/颤振 ( 753(： 代码((
I/颤振 ( 753(： 当引发异常时，这是堆栈： I/flutter ( 753(： #0 MediaQuery.of (package：flutter/src/widgets/media_query.dart：798：5( I/flutter ( 753(： #1 ScaffoldState.didChangeDependencies (package：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(

Answer 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 的应用程序