flutterandroid-webview

How to call a JavaScript method in a Flutter WebViewWidget with the "webview_flutter" plugin?


In Flutter I have a simple stateful widget that displays a website in fullscreen. For that I'm using the webview_flutter plugin. Here's a simplified version of the widget where I removed irrelevant variables and functions. As an example the widget shows the Google website in fullscreen:

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

class WebViewScreen extends StatefulWidget {
  const WebViewScreen({
    Key? key,
  }) : super(key: key);

  @override
  State<WebViewScreen> createState() => _WebViewScreenState();
}

class _WebViewScreenState extends State<WebViewScreen> {
  @override
  void initState() {
    super.initState();
  }

  late WebViewController webViewController = WebViewController()
    ..setJavaScriptMode(JavaScriptMode.unrestricted)
    ..setBackgroundColor(const Color(0x00000000))
    ..setNavigationDelegate(
      NavigationDelegate(
        onProgress: (int progress) {},
        onPageStarted: (String url) {},
        onPageFinished: (String url) {},
        onWebResourceError: (WebResourceError error) {},
        onNavigationRequest: (NavigationRequest request) {
          return NavigationDecision.navigate;
        },
      ),
    )
    ..loadRequest(Uri.parse('https://www.google.com/'));

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          Expanded(
            child: WebViewWidget(
              controller: webViewController,
            ),
          ),
        ],
      ),
    );
  }
}

What I now want to do is to call a JavaScript function (for testing purposes let's just make it alert('Hello World');) right when the webview loaded (onPageFinished). How can I achieve this?

I asked ChatGPT-4 this exact question. Its answer was to add

webViewController.evaluateJavascript("alert('Hello World');");

within the onPageFinished method. So:

//...
//onPageFinished: (String url) {
   webViewController.evaluateJavascript("alert('Hello World');");
//},
//...

But this results in a problem:

The method 'evaluateJavascript' isn't defined for the type 'WebViewController'. Try correcting the name to the name of an existing method, or defining a method named 'evaluateJavascript'.

When I ask ChatGPT-4 about this problem it only provides answers which make no sense. I assume that has to do with the fact that ChatGPT has less knowledge about more recent developments.

I also found a similar question here but it doesn't seem right because here a "WebView" widget is used instead of the "WebViewWidget" widget that I'm using.


Solution

  • For this library, in order to call javascript functions, you may use

    webViewController.runJavaScriptReturningResult(String)