DSBridge Annatation for Flutter

Modern cross-platform JavaScript bridge, through which you can invoke each other's functions synchronously or asynchronously between JavaScript and Flutter applications.

Overview

flutter_dsbridge_annotation for Flutter is fully compatible with Android and iOS DSBridge's dsbridge.js.

No need to modify any code in your existing web projects which using dsbridge.js.

DSBridge for Flutter is based on Flutter official webview_flutter.

Installation

  1. Add the dependency

    dependencies:
  ...
  flutter_dsbridge_annotation: x.y.z
  flutter_dsbridge: x.y.z

simple you can use this to add dependency:


flutter pub add flutter_dsbridge_annotation dsbridge_flutter
  1. run builder
  dart run build_runner watch --delete-conflicting-outputs
  
  or

  dart run build_runner build --delete-conflicting-outputs

Examples

See the example package. run the example project and to see it in action.

To use flutter_dsbridge_annotation in your own project, just see the example.

Simple use

export object as JavaScriptObject


import 'package:dsbridge_flutter/dsbridge_flutter.dart';
import 'package:flutter_dsbridge_annotation/flutter_dsbridge_annotation.dart';

@DSBridge(enableDebug: true)
class JsApi  extends _$JsApi {
  @dsBridge()
  String testSyn(dynamic msg) {
    print('msg=$msg');
    return "$msg［syn call］";
  }

  @dsBridge(async: true)
  void testAsyn(dynamic msg, CompletionHandler handler) {
    handler.complete("$msg [ asyn call]");
  }

  @dsBridge()
  String testNoArgSyn(dynamic arg) {
    return "testNoArgSyn called [ syn call]";
  }

  @dsBridge(async: true)
  void testNoArgAsyn(dynamic arg, CompletionHandler handler) {
    handler.complete("testNoArgAsyn called [ asyn call]");
  }

  @dsBridge(async: true)
  void callProgress(dynamic args, CompletionHandler handler) {
    var i = 10;
    final timer = Timer.periodic(const Duration(seconds: 1), (timer) {
      if (i == 0) {
        timer.cancel();
        handler.complete(0);
      } else {
        handler.setProgressData(i--);
      }
    });
  }
}

Inject the JSObject into webView

    final DWebViewController controller =
        DWebViewController.fromPlatformCreationParams(params);
    // #enddocregion platform_features

    controller
      ..setBackgroundColor(Colors.white)
      ..loadFlutterAsset('assets/js-call-dart.html')
      ..addJavaScriptObject(JsApi())
      ..addJavaScriptObject(JsEchoApi(), namespace: 'echo')
      ..setNavigationDelegate(
        NavigationDelegate(
          onProgress: (progress) {
            print('process=$progress');
          },
          onPageStarted: (url) {
            print('url onPageStarted');
          },
          onPageFinished: (url) {
            print('url onPageFinished');
          },
        ),
      );

this will export an object as the bridge between JS and Native, then you can get JS callback (sync or async) by this bridge

use as this addJavaScriptObject(JsApi()) to register the bridge, it is very important ！！！！

The other import is that: you need import header in the bridge file:


import 'package:dsbridge_flutter/dsbridge_flutter.dart';
import 'package:flutter_dsbridge_annotation/flutter_dsbridge_annotation.dart';

So you can simple call item as follow case:

FilledButton(
                child: const Text('addValue(3,4)'),
                onPressed: () {
                  _controller.callHandler(
                    'addValue',
                    args: [3, 4],
                    handler: (retValue) {
                      Fluttertoast.showToast(msg: retValue.toString());
                    },
                  );
                },
              ),
              FilledButton(
                child: const Text("append('I','love','you')"),
                onPressed: () {
                  _controller.callHandler(
                    'append',
                    args: ["I", "love", "you"],
                    handler: (retValue) {
                      Fluttertoast.showToast(msg: retValue.toString());
                    },
                  );
                },
              ),

and the equal js as are these:

 dsBridge.register('addValue', function (r, l) {
        return r + l;
    })

    dsBridge.registerAsyn('append', function (arg1, arg2, arg3, responseCallback) {
        responseCallback(arg1 + " " + arg2 + " " + arg3);
    })

more examples are in the example demo . you can download to enjoy it.

Finally

If you like DSBridge for Flutter, please click star/like to let more people know it, Thanks!

Libraries

flutter_dsbridge_annotation