To implement communication between a Flutter application and web content, this guide explains how to configure WebView and a bridge using the webview_flutter package.

This guide provides the basic method for exchanging messages between JavaScript in a WebView and Flutter.

Adding the Package

Add the webview_flutter package to the pubspec.yaml file of your Flutter project:

dependencies:
  flutter:
    sdk: flutter
  webview_flutter: ^3.0.0

Then run the following command to install the package:

flutter pub get

Configuring the WebView Widget

Use WebView in Flutter to load a web page and set up communication with JavaScript.

Sample Code

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

class WebViewExample extends StatefulWidget {
  @override
  _WebViewExampleState createState() => _WebViewExampleState();
}

class _WebViewExampleState extends State<WebViewExample> {
  final Completer<WebViewController> _controller = Completer<WebViewController>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('WebView Example'),
      ),
      body: WebView(
        initialUrl: 'https://yourwebsite.com',
        javascriptMode: JavascriptMode.unrestricted,
        onWebViewCreated: (WebViewController webViewController) {
          _controller.complete(webViewController);
        },
        javascriptChannels: <JavascriptChannel>{
          _createJavascriptChannel(),
        },
      ),
    );
  }

  JavascriptChannel _createJavascriptChannel() {
    return JavascriptChannel(
      name: 'FlutterBridge',
      onMessageReceived: (JavascriptMessage message) {
        print('Message received from web: ${message.message}');
      },
    );
  }
}

Sending Messages from Web Page to Flutter

To send messages from a web page to Flutter, use window.FlutterBridge.postMessage to deliver data through the connected bridge in the WebView.

Sample Code

JavaScript code in the web page:

function sendMessageToFlutter(message) {
  if (window.FlutterBridge) {
    window.FlutterBridge.postMessage(message);
  }
}

Example Behavior

1. Include the JavaScript function in the web page.
2. When calling sendMessageToFlutter('Hello from Web!'), the message is sent to Flutter.
3. Flutter receives the message and prints it to the log.

Sending Messages from Flutter to Web Page

Flutter can send messages to JavaScript within the WebView using the evaluateJavascript method.

Sample Code

void sendMessageToWeb(WebViewController controller) async {
  final url = await controller.currentUrl();
  print('Current URL: $url');
  controller.evaluateJavascript("alert('This is a message from Flutter!')");
}

Example Behavior

1. When the sendMessageToWeb function is called, an alert message is triggered in JavaScript within the WebView.
2. The web page receives the message and displays the alert.

Summary

• Use the webview_flutter package to enable communication between Flutter and WebView.
• Implement two-way messaging between JavaScript and Flutter.
• Use JavascriptChannel to receive messages from the web page in Flutter.
• Use evaluateJavascript to send messages from Flutter to the web page.

Additional Resources

• webview_flutter (pub.dev)