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

Question

I am new to flutter so maybe this question is repetitively asked. Basically i am using webview for flutter. Version webview: webview_flutter: ^0.3.16 My code is:

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();
    },
  ),
 
)
);
  }
}

Note: Sometime it runs successfully but most of time gives me error like mentioned. And why its high in size 100MB just for this code?

Error is:

I/flutter ( 753): ══╡ EXCEPTION CAUGHT BY WIDGETS LIBRARY ╞═══════════════════════════════════════════════════════════ I/flutter ( 753): The following assertion was thrown building WebViewTest(state: _WebViewTestState#72524): I/flutter ( 753): MediaQuery.of() called with a context that does not contain a MediaQuery. I/flutter ( 753): No MediaQuery ancestor could be found starting from the context that was passed to MediaQuery.of(). I/flutter ( 753): This can happen because you do not have a WidgetsApp or MaterialApp widget (those widgets introduce I/flutter ( 753): a MediaQuery), or it can happen if the context you use comes from a widget above those widgets. I/flutter ( 753): The context used was: I/flutter ( 753): Scaffold(dirty, state: ScaffoldState#58c7d(lifecycle state: initialized, tickers: tracking 2 I/flutter ( 753): tickers))
I/flutter ( 753): When the exception was thrown, this was the stack: 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 is an inherited widget, in the example, it is taking the context of WebViewTest, not the MaterialApp. MaterialApp needs to be the parent of your class to provide it with a context. This will work:

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();
    },


)
);
  }
}

As for the size of the app, in debug mode all the necessary components for Just-In-Time (JIT) are loaded, so the debug mode has a large size, but as soon as you create the release mode, you will see that in code example will have an application with about 2.87mb