kamome_flutter is a plugin for Flutter apps using the WebView. This plugin bridges a gap between JavaScript in the WebView and the native code written in Dart.

NOTE kamome_flutter requires the WebView plugin such as flutter_inappwebview(recommended), webview_flutter, and webview_flutter_plus.

Include Library in Your Project

1. Flutter

See Installing.

2. JavaScript


  1. npm install

    npm install kamome
  2. Write following import statement in JavaScript

    import { KM } from "kamome"

Manual Installation

If you manually install the JavaScript library, see this page.


Send a message from the JS code to the Dart code

  1. Send a message from the JavaScript code

    // JavaScript
    import { KM } from "kamome"
    // Uses async/await.
    try {
        // Sends `echo` command.
        const result = await KM.send('echo', { message: 'Hello' });
        // Receives a result from the native code if succeeded.
    } catch(error) {
        // Receives an error from the native code if failed.
  2. Receive a message on Flutter using flutter_inappwebview

    Implement the JavaScriptRunner for flutter_inappwebview.

    // Dart
    class _InAppWebViewJavaScriptRunner implements JavaScriptRunner {
      final InAppWebViewController _controller;
      void runJavaScript(String js) async {
        await _controller.evaluateJavascript(source: js);

    Build a WebView widget using flutter_inappwebview.

    // Dart
    // Using flutter_inappwebview plugin.
    class InAppWebViewPage extends StatefulWidget {
      const InAppWebViewPage({Key? key}) : super(key: key);
      InAppWebViewPageState createState() => InAppWebViewPageState();
    class InAppWebViewPageState extends State<InAppWebViewPage> {
      late KamomeClient _client;
      void initState() {
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: const Text('Sample'),
          body: Column(
            children: [
                child: InAppWebView(
                  initialFile: 'assets/index.html',
                  onWebViewCreated: (InAppWebViewController controller) {
                    // Creates the Client object.
                    _client = KamomeClient(_InAppWebViewJavaScriptRunner(controller));
                      ..add(Command('echo', (commandName, data, completion) {
                        // Received `echo` command.
                        // Then sends resolved result to the JavaScript callback function.
                        completion.resolve(data: {
                          'message': data!['message'],
                        // Or, sends rejected result if failed.
                        //completion.reject(errorMessage: 'Echo Error!');
                    // Adds the JS handler of Kamome plugin.
                    // Copy following code to yours.
                      handlerName: KamomeClient.apiName,
                      callback: (args) {
                ),	// InAppWebView
              )	// Expanded
          ),	// Column
        );	// Scaffold

Send a message from the Dart code to the JS code

  1. Send a message from the Dart code on Flutter

    // Dart
    // Sends a data to the JS code.
    _client.send('greeting', data: {
      'greeting': 'Hello! by InAppWebView'
    }, callback: (commandName, result, error) {
      // Received a result from the JS code.
  2. Receive a message on the JavaScript code

    // JavaScript
    // Adds a receiver that receives a message sent by the native client.
    KM.addReceiver('greeting', (data, resolve, reject) => {
        // The data is the object sent by the native client.
        // Runs asynchronous something to do...
        setTimeout(() => {
            // Returns a result as any object or null to the native client.
            // If the task is failed, call `reject()` function.
            //reject('Error message');
        }, 1000);


JavaScript configuration

See this page.

Browser Alone

When there is no kamome_flutter client, that is, when you run with a browser alone, you can register the processing of each command.

// JavaScript

    .addCommand("echo", function (data, resolve, reject) {
        // Received `echo` command.
        // Then sends resolved result to the JavaScript callback function.
        resolve({ message: data["message"] });
        // Or, sends rejected result if failed.
        //reject("Echo Error!");