How to Connect Flutter to JS

We all know that Flutter is amazing .light-weightet , fast , easy to learn , cross-platform and …

although with flutter for Android or IOS you can do pretty much anything, there’s tones of tutorials on how to connect flutter to native Java/Kotlin or Swift. But despite lack of lots of web features on flutter web ,there isn’t lots fo tutorials on how to connect flutter to JS. So here we are with a starter tutorial :-D

In this tutorial we are going to create a simple app that shows a confirm dialog ,then displays the user’s answer on the screen.

In order to start we need import this library :

js: ^0.6.2'

This library helps us define functions in JS and call them from Flutter ,define functions in JS and call them from Flutter ,and even use some of JS’s libraries directly with Dart

First of all if web development is not activated on you’re device run the below code to switch to beta mode and activate Flutter web development tools.

flutter channel beta
flutter config --enable-web

then create a new project, or you can recreate your existing project by going to your project’s directory and entering this command :

flutter create .

Now we should have the web folder. go to this folder and create a JS file named my_js_code.js(or any name you want) near index.html.

Now in the JS file we write some code that shows a simple confirm dialog:

then we should include this code in our index.html file:

<script defer src="my_js_code.js"></script>

your index.html file should like this :

now we head to main.dart and add the following code.

alright first of all we have

@js()
library stringify

Why? you may ask. Emm honestly I don’t know but if we don’t load a library from JS(could be any library) our functions wouldn’t load and we get an exception. Trust me it took me hours to figure it out

@JS('showMyPopup') //exactly what we defined in JS
external void showPopup(String message);//

in the first line we introduce the function defined in JS to dart. then in the next line we define a function which is callable from dart, and if we call this function the other one in JS will be called.

@JS('okClicked')//in JS we can call the function with this name
external set _okClicked(void Function() f);

@JS('cancelClicked')
external set _cancelClicked(void Function() f);
void cancelClicked() {
   myState.setState(() {
   toShow = "Cancel";
   });
}
void okClicked() {
    myState.setState(() {
    toShow = "OK";}
    );}
void main() {
_okClicked = allowInterop(() => okClicked());
_cancelClicked = allowInterop(() => cancelClicked());
}

This part is a bit tricky. here we define some dart functions ,then introduce a function name to JS. Then connect these two with allowInterloop() in the main function. Now if we call a function in JS the other one in Dart will be called.

The rest is just a super simple UI:

I hope that it helped you get started with JS library. For more advanced features head to the official doc on pub

js | Dart Package