flutter_jsbridge 0.2.0

  • Readme
  • Changelog
  • Example
  • Installing
  • 52

JSBridge for Flutter #

Bridge your JavaScript library for usage in Flutter 🚀

Usage #

import 'package:flutter_jsbridge/jsbridge.dart';

final _libraryCode = """
  window.Foobar = {
    add (a, b) {
      return a + b
    greet (name) {
      return `Hello, \${name}!`
    async fetch (url) {
      const response = await fetch(url)
      const body = await response.text()

      return { status: response.status, body }

class FetchResponse {
  final int status;
  final String body;

  FetchResponse(dynamic data): status = data['status'], body = data['body'];

class Foobar {
  static final _bridge = JSBridge(_libraryCode);

  static Future<int> add(int lhs, int rhs) async {
    return await Foobar._bridge.call("Foobar.add", [lhs, rhs]);

  static Future<String> greet(String name) async {
    return await Foobar._bridge.call("Foobar.greet", [name]);

  static Future<FetchResponse> fetch(String url) async {
    return FetchResponse(await Foobar._bridge.call("Foobar.fetch", [url]));

iOS #

To be able to use JSBridge on iOS, you need to give JSBridge a hook to your view hierarchy. Otherwise the WKWebView will get suspended by the OS, and your Promises will never settle.

This is accomplished by using the setGlobalUIHook function before instantiating any JSBridge instances.


If you have a non-modified Flutter application, this should be added to ios/Runner/AppDelegate.swift, in the application(_:didFinishLaunchingWithOptions:) function.

--- a/ios/Runner/AppDelegate.swift
+++ b/ios/Runner/AppDelegate.swift
@@ -1,5 +1,6 @@
 import UIKit
 import Flutter
+import flutter_jsbridge

 @objc class AppDelegate: FlutterAppDelegate {
   override func application(
     _ application: UIApplication,
     didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?
   ) -> Bool {
+    SwiftFlutterJsbridgePlugin.setGlobalUIHook(window: UIApplication.shared.windows.first!)
     GeneratedPluginRegistrant.register(with: self)
     return super.application(application, didFinishLaunchingWithOptions: launchOptions)


// Can be called from anywhere, e.g. your AppDelegate
SwiftFlutterJsbridgePlugin.setGlobalUIHook(window: UIApplication.shared.windows.first!)

App Extension:

// From within your root view controller
SwiftFlutterJsbridgePlugin.setGlobalUIHook(viewController: self)

0.2.0 #

  • 💥 Avoid app extension restricted APIs

    Migration Guide:

    You now need to specifically need to opt in to registering the WKWebView with the first window of the shared application. The reasoning for this is that it's a restricted API that isn't available when writing an App Extension.

    Look at the added section in the readme for the two lines of code you need to add to your AppDelegate.

0.1.2 #

  • 🎉 Add support for registering functions

0.1.1 #

  • 🎉 Expose all constructor options

0.1.0 #

  • 🎉 Add initial implementation


flutter_jsbridge_example #

Demonstrates how to use the flutter_jsbridge plugin.

Getting Started #

This project is a starting point for a Flutter application.

A few resources to get you started if this is your first Flutter project:

For help getting started with Flutter, view our online documentation, which offers tutorials, samples, guidance on mobile development, and a full API reference.

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:

  flutter_jsbridge: ^0.2.0

2. Install it

You can install packages from the command line:

with Flutter:

$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:

import 'package:flutter_jsbridge/jsbridge.dart';
Describes how popular the package is relative to other packages. [more]
Code health derived from static analysis. [more]
Reflects how tidy and up-to-date the package is. [more]
Weighted score of the above. [more]
Learn more about scoring.

We analyzed this package on Jan 27, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.7.1
  • pana: 0.13.4
  • Flutter: 1.12.13+hotfix.5

Health issues and suggestions

Document public APIs. (-1 points)

7 out of 7 API elements have no dartdoc comment.Providing good documentation for libraries, classes, functions, and other API elements improves code readability and helps developers find and use your API.

Format lib/jsbridge.dart.

Run flutter format to format lib/jsbridge.dart.

Maintenance suggestions

The package description is too short. (-20 points)

Add more detail to the description field of pubspec.yaml. Use 60 to 180 characters to describe the package, what it does, and its target use case.


Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.1.0 <3.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.11 1.14.12
meta 1.1.8
sky_engine 0.0.99
typed_data 1.1.6
vector_math 2.0.8
Dev dependencies