Flutter webview and web page communication interaction implementation

Preface

In app development, we have JSBridge to implement app and web communication. Now we refer to JSBridge to implement Flutter webview and web communication.

Preview

flutter

import 'package:ds_bridge/ds_bridge.dart';
class JsBridgeUtil {
  // Call the interface to H5  static executeMethod(flutterWebViewPlugin, String jsonStr) async{
    DsBridge dsBridge = DsBridge(flutterWebViewPlugin);
    Result result = (jsonStr);
    if( == 'share'){
      ('Received the webpageshareevent，The content is${}and return this text to the web page');
    }
    if( == 'share1'){
      ('Received the share1 event on the web page');
    }
  }
}

Web page

import 'dsbridge_flutter'
('share', { name: 'woyehaizaixiang' }, function (res) {
  alert(res)
})

Specific implementation

Used in flutterds_bridge

This package isflutter_webview_pluginThe toolkit for interacting with webview and web pages needs to be added firstflutter_webview_pluginComponents, specificflutter_webview_pluginPlease go to the official website to view the components and add themflutter_webview_pluginAfter the component, addds_bridgeComponents

1. Configure dependency packages

dependencies:
    ds_bridge: ^0.0.1

2. Add JavascriptChannel to the webview page

import 'dart:async';
import 'package:flutter/';
import 'package:yundk_app/routes/';
import 'package:flutter_webview_plugin/flutter_webview_plugin.dart';
import '../../utils/';

class WebviewPage extends StatefulWidget {
  final String url;
  final VoidCallback backCallback;

  WebviewPage({
    Key key,
    @required ,
    ,
  }) : super(key: key);

  @override
  _WebviewPageState createState() =&gt; _WebviewPageState();
}

class _WebviewPageState extends State&lt;WebviewPage&gt; {
  String _title = '';
  final flutterWebViewPlugin = FlutterWebviewPlugin();
  final Set&lt;JavascriptChannel&gt; jsChannels = [
    JavascriptChannel(
        name: 'DsBridgeApp',
        onMessageReceived: (JavascriptMessage msg) {
          String jsonStr = ;
          (FlutterWebviewPlugin(), jsonStr);
        }),
  ].toSet();

  StreamSubscription&lt;String&gt; _onUrlChanged;

  @override
  void initState() {
    ();
    ();

    // Listen url changed    _onUrlChanged =
    ((String url) async {

    });

    // Listen to the page onload    ((viewState) async {
      if ( == ) {
        ('').then((result) =&gt; {
          setState(() {
            _title = result;
          })
        });
      }
    });

  }

  @override
  void dispose() {
    _onUrlChanged.cancel();
    ();
    ();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: WebviewScaffold(
        appBar: new AppBar(
          leading: IconButton(
            hoverColor: ,
            highlightColor: ,
            icon: Icon(const IconData(0xe61b, fontFamily: 'IconFont'), color: Color(0xff333333), size: 18),
            onPressed: (){
              ();
              (context);
            },
          ),
          title: new Text(
            _title,
            style: TextStyle(color: Color(0xff333333), fontSize: 17),
          ),
          actions: [
            new IconButton(
              icon: new Icon(
                Icons.refresh_outlined,
                color: Color(0xff333333),
                size: 20
              ),
              onPressed: () {
                ();
              }
            ),
          ],
          centerTitle: true,
          elevation: 0,
        ),
        url: ,
        javascriptChannels: jsChannels,
        mediaPlaybackRequiresUserGesture: false,
        withZoom: true,
        withLocalStorage: true,
        hidden: true,
      )
    );
  }
}

3. In JsBridgeUtil class

utils/

import 'package:ds_bridge/ds_bridge.dart';
class JsBridgeUtil {
  // Call the interface to H5  static executeMethod(flutterWebViewPlugin, String jsonStr) async{
    DsBridge dsBridge = DsBridge(flutterWebViewPlugin);
    Result result = (jsonStr);
    if( == 'share'){
      ('Received the webpageshareevent，The content is${}and return this text to the web page');
    }
    if( == 'share1'){
      ('Received the share1 event on the web page');
    }
  }
}

Web page usedsbridge_flutter

This plug-in is a web-side plug-in, combined with flutter-sideds_bridgeUse together

1. Installation

npm install dsbridge_flutter

2. Use

import 'dsbridge_flutter'
(<String> method, <Object> data, <Function> callback)

3. Example

import 'dsbridge_flutter'
('share', { name: 'woyehaizaixiang' }, function (res) {
  alert(res)
})

Summarize

In this article, referring to JSBridge, Flutter webview and webpage interaction is implemented. The specific plug-ins used are Flutterflutter_webview_pluginandds_bridge, web pages havedsbridge_flutter。

This is the article about the interaction between Flutter webview and web communication. For more information about Flutter webview and web communication, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!