Bridging the Gap: Seamless Two-Way Communication in Flutter WebViews

Context: The Hybrid Architecture Recently, our team was working on a Flutter application that relies heavily on WebViews to display dynamic web content. In such a hybrid architecture, simply rendering a web page is never enough.

The Challenge: The Communication Bottleneck The most crucial — and often the most frustrating — feature in WebView integration is establishing a reliable, bidirectional communication channel between the native app and the web application. Using the standard solutions often involves setting up complex message channels, dealing with cumbersome string serialization, and writing a lot of unmaintainable boilerplate code just to pass simple data back and forth.

The Decision: Why flutter_inappwebview? To overcome this bottleneck, I decided to employ the flutter_inappwebview package. Instead of fighting with raw message channels, this plugin provides a highly intuitive API and a clean, human-readable codebase. It dramatically reduces boilerplate and makes injecting JavaScript handlers incredibly straightforward.

Here is how elegantly you can implement two-way communication using this package:

1. Web → App (JavaScript Handlers)

Instead of parsing raw strings, the app listens to a specific handler, and the web side can directly pass arguments and even receive a Promise-like response.

App Side (Setting the listener in Flutter):

Dart

onWebViewCreated: (controller) {
  controller.addJavaScriptHandler(handlerName: 'myHandlerName', callback: (args) {
    print("data from web: ${args[0]}");
    return {'status': 'success'};
  });
},

Web Side (Sending data from JavaScript):

JavaScript

window.flutter_inappwebview.callHandler('myHandlerName', 'hello app')
  .then(function(result) {
    console.log(result.status); 
  });

2. App → Web (Evaluating JavaScript)

When the app needs to drive the web UI, it can directly evaluate JS functions and await the execution result natively.

Web Side (Setting the listener in JavaScript):

JavaScript

window.receiveFromApp = function(data) {
  console.log("data from app: " + data);
  document.getElementById("display").innerText = data;
  return "received";
};

App Side (Sending data from Flutter):

Dart

var result = await webViewController?.evaluateJavascript(
  source: "window.receiveFromApp('data from app')"
);
print("response from web: $result");

The Result: With these highly readable and straightforward implementations, we achieved smooth, reliable bidirectional communication between our Flutter app and the Web app. By choosing the right tool for the job, we eliminated maintenance overhead and kept our architecture clean.