5

I've seen that calling js is definitely possible from dart web using the dart js package, however haven't found a way to do this from dart native. For some more context - I have an npm package written in javascript and I would like to invoke this from a flutter mobile app. Calling the javascript directly or somehow wrapping it in dart or some other way are all fine for me, however rewriting it in dart is not possible as said npm package depends on a very specific cryptography javascript package to which no equivalent exists in dart, and recreating said cryptography package would bear a huge workload and significant security risks. Thank you in advance!

4
  • 3
    It's not possible. You can either port the library to Dart (which cryptography function is missing?) or find the same in C and call it via FFI. Commented May 10, 2022 at 17:50
  • What's the "very specific crypto package"? Commented May 19, 2022 at 1:12
  • snarkJS, circomlib, and the circom compiler Commented May 19, 2022 at 9:08
  • It looks like FFI to the C++ equivalents might be possible. Commented May 19, 2022 at 12:56

2 Answers 2

4
+50

Embed a WebView in your app and use it to run JavaScript:

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

main() {
  runApp(_Test());
}

class _Test extends StatelessWidget {
  final completer = Completer<WebViewController>();

  @override
  Widget build(BuildContext context) {
    var js = '1+1';
    return MaterialApp(
      home: Scaffold(
        body: Stack(
          children: [
            WebView(
              javascriptMode: JavascriptMode.unrestricted,
              onWebViewCreated: (controller) {
                if (!completer.isCompleted) completer.complete(controller);
              },
            ),
            Center(
              child: FutureBuilder(
                future: completer.future.then((controller) {
                  return controller.runJavascriptReturningResult(js);
                }),
                builder: (context, snapshot) {
                  if (snapshot.hasError) throw snapshot.error!;
                  if (!snapshot.hasData) return Container();
                  return Text('$js=${snapshot.data}', style: Theme.of(context).textTheme.headline2);
                },
              ),
            ),
          ],
        ),
      ),
    );
  }
}
Sign up to request clarification or add additional context in comments.

Comments

0

If all you need is the Circom library, someone has already implemented it in Dart. You can check out the Hermez SDK package and see how they did it. Specifically, in this file.

3 Comments

Good to know in case we do decide on a future rewrite - upvoted!
Personally, I would avoid spinning up a web view just so I can run some arbitrary code in it. It's just opening myself to potential memory and security leaks, and it just "feels wrong". You know?
Absolutely agree, I definitely also view this more as a short-term fix now that I know that a rewrite is possible thanks to this package - thanks again!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.