How to use JS with Flutter Web

Flutter Web opens the door to building progressive web apps (PWAs) entirely in Dart. However, your Dart code will likely need to interop with JavaScript at some point to access browser APIs and/or your own custom JS apps. The following snippet demonstrates how access JS from a Flutter web app.

Using JavaScript in Dart & Flutter

Dart.js is a built-in library that can interop with JavaScript.

Add a Script

Create a JS file in the web directory and add some functions to it. It calls the function from the global Window execution context. You can define a top level function, or define values directly on window.

web/app.js

function alertMessage(text) {
    alert(text)
}

window.logger = (flutter_value) => {
   console.log({ js_context: this, flutter_value });
}

Make JS available globally via a script tag in the head of the HTML document. Use defer to ensure it loads after the HTML body.

web/index.html

<head>
    <script src="app.js" defer></script>
</head>

Call JS Functions with Dart.js

Flutter can now access your global JS functions and variables. Call a function by name with callMethod and optionally pass it a list of arguments.

main.dart

import 'dart:js' as js;

js.context.callMethod('alertMessage', ['Flutter is calling upon JavaScript!']);

You can now pass values from Flutter to JS by including them as arguments.

js.context.callMethod('logger', [_someFlutterState]);

Access JS Objects in Flutter

Imagine you have some data in JavaScript that you want to access in Flutter. You can take a JSON-serializable JS object and covert it for use in Dart like so.

web/app.js

window.state = {
    hello: 'world'
}

Now make use of this JS object in Flutter.

main.dart

import 'dart:js' as js;

var state = js.JsObject.fromBrowserObject(js.context['state']);
print(state['hello']);

Questions?

Ask questions via GitHub below OR chat on Slack #questions