The Flutter plugin webview_flutter uses the finger north

The status quo

There are two main plug-ins, Flutter_webview_plugin and webview_flutter. Flutter_webview_plugin is a third-party plugin that is fully documented and has the largest number of stars. But there are two major problems:

• The Flutter method cannot be called in JS
• You cannot intercept H5 before it enters a URL

So this article uses the official Webview_FLUTTER, which is currently in preview release and expects more features

Installing a plug-in

pubspec.yaml

Add webview_flutter to dependencies: ^0.3.13

Dependencies: webview_flutter: ^ 0.3.13Copy the code

info.list

Path: ios/Runner/info.list

<key>io.flutter.embedded_views_preview</key>
<string>YES</string>

<key>NSAppTransportSecurity</key>
<dict>
	<key>NSAllowsArbitraryLoads</key>
	<true/>
	<key>NSAllowsArbitraryLoadsInWebContent</key>
	<true/>
</dict>
Copy the code

use

Parameters in

scenario

Load a URL as easily as possible

WebView(
  initialUrl: "https://flutterchina.club/".// Whether JS execution mode allows JS execution
  javascriptMode: JavascriptMode.unrestricted
)
Copy the code

H5 calls flutter — JavascriptChannel

// Insert the global Toaster method into the h5 window
JavascriptChannel _toastJavascriptChannel(BuildContext context) {
  return JavascriptChannel(
    name: 'Toaster',
    onMessageReceived: (JavascriptMessage message) {
      print(message);
      Fluttertoast.showToast(
        msg: message.message
      );
    });
}

// register javascriptChannels with the Webview component
new WebView(
  ...
  javascriptChannels: <JavascriptChannel>[ //javascriptChannels is the intermodulation method provided by the API,
    _toastJavascriptChannel(context),
  ].toSet()
)

/ / js calls
Toaster.postMessage('js call flutter success!! ')
Copy the code

H5 calls flutter — navigationDelegate

new WebView(
  ...
  navigationDelegate: (NavigationRequest request) {
  // print('navigationDelegate: ${request.url}');
  if(request.url.indexOf('m=webview') > - 1) {
    String _url = helper.addUrlParam(request.url.replaceAll('&m=webview'.' '));
    Navigator.of(context).push(new MaterialPageRoute(builder: (_) {
      return Browser(
        title: ' '.url: _url
      );
    }));
    returnNavigationDecision.prevent; })Copy the code

Flutter call h5

// After the page is loaded, modify the Webview title
new WebView(
  ...
  onPageFinished: (url) {
    // Set the title
    _controller.evaluateJavascript("document.title").then((result){
      print(result); setState(() { widget.title = result; }); }); },)Copy the code

A complete component

import 'dart:convert';

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

import '.. /helper/index.dart' as helper;

class Browser extends StatefulWidget {
  String url;
  String title;

  Browser({this.url, this.title});

  @override
  _BrowserState createState() => _BrowserState();
}

class _BrowserState extends State<Browser> {
  dynamic _controller;

  @override
  void initState() {
    super.initState();
  }

  @override
  void dispose() {

    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    JavascriptChannel _toastJavascriptChannel(BuildContext context) {
      return JavascriptChannel(
        name: 'Toaster',
        onMessageReceived: (JavascriptMessage message) {
          print(message);
          Fluttertoast.showToast(
            msg: message.message
          );
        });
    }

    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Stack(
        children: <Widget>[
          new WebView(
            initialUrl: widget.url,
            javascriptMode: JavascriptMode.unrestricted,
            onWebViewCreated: (controller) {
              _controller = controller;
            },
            / * ** When the URL has 'm= webView ', a new webView is opened
* /
            navigationDelegate: (NavigationRequest request) {
              // print('navigationDelegate: ${request.url}');
              if(request.url.indexOf('m=webview') > - 1) {
                String _url = helper.addUrlParam(request.url.replaceAll('&m=webview'.' '));
                Navigator.of(context).push(new MaterialPageRoute(builder: (_) {
                  return Browser(
                    title: ' ',
                    url: _url
                  );
                }));
                return NavigationDecision.prevent;
              }

              return NavigationDecision.navigate;
            },
            onPageFinished: (url) {
              // Set the title
              _controller.evaluateJavascript("document.title").then((result){
                print(result);
                setState(() {
                  widget.title = result;
                });
              });

              // var a = '123';
              // print(a+1);

              // Test the method that flutter calls my page
              // _controller.evaluateJavascript("callJSFunc();" ).then((result){
              // // print('callJSFunc has called: $result');
              // });
            },
            javascriptChannels: <JavascriptChannel>[ //javascriptChannels is the intermodulation method provided by the API,_toastJavascriptChannel(context), ].toSet() ) ], ), ); }}Copy the code

todo

• Access cordova
• Obtain the network status of the device

Refer to the article

• Flutter Hybrid Development (Interactive Communication)
• Easy guide to Flutter WebView and JS interaction
• Use WebView in Flutter