web_flutter_connect

Web-Flutter connect package

Flutter

0. In Client side

///Javascript
const {connectFlutter} = require("web_flutter_connect")
const {WebView, Flutter} = connectFlutter(window)

1. Call Flutter

///Javascript
await Flutter.call(hanlderName: string, ...params: any[])

2. Send message to Flutter

///Javascript
await Flutter.send(data: any)
--> await Flutter.call("onMessage", data)

In Flutter: Needs execute Listen event "onMessage" from WebView

///Dart
///Listen message from web
this.controller?.addJavaScriptHandler(
    handlerName: WebviewModuleKeys.onMessage,
    callback: (List<dynamic> params) async {
      if (widget.onMessage != null) {
        widget.onMessage!(params[0]);
      }
    });

3. Close webview

///Javascript
 await Flutter.close()
--> await Flutter.call("closeWebview", data)

4. Notify Web content did load

///Javascript
 await Flutter.setDidLoad()
--> await Flutter.call("onContentDidLoad", data)

5. Print to Flutter console

///Javascript
 await Flutter.print(data)
--> await Flutter.call("onWebViewPrint", data)

In Flutter:

///Dart
        ///Listen print from web
        this.controller?.addJavaScriptHandler(
            handlerName: WebviewModuleKeys.onPrint,
            callback: (List<dynamic> params) async {
              print("*** PRINT FROM WEBVIEW: ***");
              if (params.isNotEmpty) {
                print("${params.first}");
              }
              print("*** END PRINT FROM WEBVIEW ***");
            });

WebView

1. WebView.listenFromFlutter: Listen message from Flutter

///Javascript
const subscription = WebView.listenFromFlutter((message: any) => {
    Flutter.print({
        "title": "Receive message from Flutter",
        "data": message,
    });
})
....
//Unsubscribe
subscription.unsubscribe();

2. WebView.send(message: any)

• Call in Flutter to send a message to WEB

///Dart
try {
  final strMessage = jsonEncode(message);
  this.controller?.evaluateJavascript(source: """
    window.WebView.send('$strMessage');
  """);
} catch (e) {
  throw {
    "error": "Cannot send unencodable message to WebView",
    "message": message,
  };
}