{"id":21089759,"url":"https://github.com/hituziando/kamome_flutter","last_synced_at":"2026-05-08T07:35:00.747Z","repository":{"id":40629810,"uuid":"467862999","full_name":"HituziANDO/kamome_flutter","owner":"HituziANDO","description":"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.","archived":false,"fork":false,"pushed_at":"2023-02-28T02:46:26.000Z","size":2893,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-14T06:14:10.123Z","etag":null,"topics":["android","dart","flutter","ios","javascript","webview"],"latest_commit_sha":null,"homepage":"","language":"Dart","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/HituziANDO.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-03-09T09:37:16.000Z","updated_at":"2024-05-18T13:27:21.000Z","dependencies_parsed_at":"2024-08-23T06:15:51.218Z","dependency_job_id":null,"html_url":"https://github.com/HituziANDO/kamome_flutter","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"purl":"pkg:github/HituziANDO/kamome_flutter","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HituziANDO%2Fkamome_flutter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HituziANDO%2Fkamome_flutter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HituziANDO%2Fkamome_flutter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HituziANDO%2Fkamome_flutter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/HituziANDO","download_url":"https://codeload.github.com/HituziANDO/kamome_flutter/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HituziANDO%2Fkamome_flutter/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260924507,"owners_count":23083523,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["android","dart","flutter","ios","javascript","webview"],"created_at":"2024-11-19T21:31:09.916Z","updated_at":"2026-05-08T07:35:00.704Z","avatar_url":"https://github.com/HituziANDO.png","language":"Dart","funding_links":[],"categories":[],"sub_categories":[],"readme":"# kamome_flutter\n\n![tag](https://img.shields.io/github/v/tag/HituziANDO/kamome_flutter)\n[![npm](https://img.shields.io/npm/v/kamome)](https://www.npmjs.com/package/kamome)\n\nkamome_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\nin Dart.\n\n\u003cimg src=\"https://hituziando.github.io/kamome_flutter/README/illustration_flutter.png\" width=\"400\" /\u003e\n\n**[NOTE]**\nkamome_flutter requires the WebView plugin such as [flutter_inappwebview](https://pub.dev/packages/flutter_inappwebview)(recommended), [webview_flutter](https://pub.dev/packages/webview_flutter), and [webview_flutter_plus](https://pub.dev/packages/webview_flutter_plus).\n\n## Include Library in Your Project\n\n### 1. Flutter\n\nSee [Installing](https://pub.dev/packages/kamome_flutter/install).\n\n### 2. JavaScript\n\n#### npm\n\n1. npm install\n\t\n\t```\n\tnpm install kamome\n\t```\n\n1. Write following import statement in JavaScript\n\t\n\t```javascript\n\timport { KM } from \"kamome\"\n\t```\n\n#### Manual Installation\n\nIf you manually install the JavaScript library, see [this page](https://github.com/HituziANDO/kamome#manual-installation).\n\n## Usage\n\n### Send a message from the JS code to the Dart code\n\n1. Send a message from the JavaScript code\n\t\n\t```javascript\n\t// JavaScript\n\n\timport { KM } from \"kamome\"\n\n\t// Uses async/await.\n\ttry {\n\t    // Sends `echo` command.\n\t    const result = await KM.send('echo', { message: 'Hello' });\n\t    // Receives a result from the native code if succeeded.\n\t    console.log(result.message);\n\t} catch(error) {\n\t    // Receives an error from the native code if failed.\n\t    console.log(error);\n\t}\n\t```\n\n1. Receive a message on Flutter using [flutter_inappwebview](https://pub.dev/packages/flutter_inappwebview)\n\n\tImplement the JavaScriptRunner for flutter_inappwebview.\n\t\n\t```dart\n\t// Dart\n\n\tclass _InAppWebViewJavaScriptRunner implements JavaScriptRunner {\n\t  final InAppWebViewController _controller;\n\n\t  _InAppWebViewJavaScriptRunner(this._controller);\n\n\t  @override\n\t  void runJavaScript(String js) async {\n\t    await _controller.evaluateJavascript(source: js);\n\t  }\n\t}\n\t```\n\n\tBuild a WebView widget using flutter_inappwebview.\n\n\t```dart\n\t// Dart\n\n\t// Using flutter_inappwebview plugin.\n\tclass InAppWebViewPage extends StatefulWidget {\n\t  const InAppWebViewPage({Key? key}) : super(key: key);\n\n\t  @override\n\t  InAppWebViewPageState createState() =\u003e InAppWebViewPageState();\n\t}\n\n\tclass InAppWebViewPageState extends State\u003cInAppWebViewPage\u003e {\n\t  late KamomeClient _client;\n\n\t  @override\n\t  void initState() {\n\t    super.initState();\n\t  }\n\n\t  @override\n\t  Widget build(BuildContext context) {\n\t    return Scaffold(\n\t      appBar: AppBar(\n\t        title: const Text('Sample'),\n\t      ),\n\t      body: Column(\n\t        children: [\n\t          Expanded(\n\t            child: InAppWebView(\n\t              initialFile: 'assets/index.html',\n\t              onWebViewCreated: (InAppWebViewController controller) {\n\t                // Creates the Client object.\n\t                _client = KamomeClient(_InAppWebViewJavaScriptRunner(controller));\n\t                _client\n\t                  ..add(Command('echo', (commandName, data, completion) {\n\t                    // Received `echo` command.\n\t                    // Then sends resolved result to the JavaScript callback function.\n\t                    completion.resolve(data: {\n\t                      'message': data!['message'],\n\t                    });\n\t                    // Or, sends rejected result if failed.\n\t                    //completion.reject(errorMessage: 'Echo Error!');\n\t                  }));\n\n\t                // Adds the JS handler of Kamome plugin.\n\t                // Copy following code to yours.\n\t                controller.addJavaScriptHandler(\n\t                  handlerName: KamomeClient.apiName,\n\t                  callback: (args) {\n\t                    _client.onMessageReceived(args[0]);\n\t                  });\n\t              },\n\t            ),\t// InAppWebView\n\t          )\t// Expanded\n\t        ],\n\t      ),\t// Column\n\t    );\t// Scaffold\n\t  }\n\t}\n\t```\n\n### Send a message from the Dart code to the JS code\n\n1. Send a message from the Dart code on Flutter\n\n\t```dart\n\t// Dart\n\n\t// Sends a data to the JS code.\n\t_client.send('greeting', data: {\n\t  'greeting': 'Hello! by InAppWebView'\n\t}, callback: (commandName, result, error) {\n\t  // Received a result from the JS code.\n\t  print(result);\n\t});\n\t```\n\n1. Receive a message on the JavaScript code\n\n\t```javascript\n\t// JavaScript\n\n\t// Adds a receiver that receives a message sent by the native client.\n\tKM.addReceiver('greeting', (data, resolve, reject) =\u003e {\n\t    // The data is the object sent by the native client.\n\t    console.log(data.greeting);\n\n\t    // Runs asynchronous something to do...\n\t    setTimeout(() =\u003e {\n\n\t        // Returns a result as any object or null to the native client.\n\t        resolve('OK!');\n\t        // If the task is failed, call `reject()` function.\n\t        //reject('Error message');\n\t    }, 1000);\n\t});\n\t```\n\n## Configuration\n\n### JavaScript configuration\n\nSee [this page](https://github.com/HituziANDO/kamome#configuration).\n\n## Browser Alone\n\nWhen there is no kamome_flutter client, that is, when you run with a browser alone, you can register the processing of each command.\n\n```javascript\n// JavaScript\n\nKM.browser\n    .addCommand(\"echo\", function (data, resolve, reject) {\n        // Received `echo` command.\n        // Then sends resolved result to the JavaScript callback function.\n        resolve({ message: data[\"message\"] });\n        // Or, sends rejected result if failed.\n        //reject(\"Echo Error!\");\n    });\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhituziando%2Fkamome_flutter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhituziando%2Fkamome_flutter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhituziando%2Fkamome_flutter/lists"}