How to use JS with Flutter Web

By

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.

file_type_js_official 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.

file_type_html 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.

file_type_dartlang 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.

file_type_js_official web/app.js
window.state = {
    hello: 'world'
}

Now make use of this JS object in Flutter.

file_type_dartlang main.dart
import 'dart:js' as js;

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

Q&A Chat