JavaScript Interop in Flutter Web

Let's look at how to communicate with external Javascript files in a Flutter web app! This is a must-have skill if you are building a web app in Flutter and need to use an existing JavaScript library.

Tutorial Source Code:

[nickyfranshel]

came for the code, stuck around for the fun experiments hehe thx a lot :D

[eduardoholzmann]

the make file was the thing i never think i will learn, thankyou so much! the way i do is directly place de js code sinde de web folder and no use it with assets when develop.

[JonasLissborg]

This is absolutely amazing, thank you so much! <3

[rainking-jxew]

Amazing content, but how about if I wanna use an http request in js interlop using axios or something and return the entire response in flutter?

[darshanpatel-rxlk]

to integrate zoom meeting sdk in flutter web it is not working giving CORS error

[robertorampazzo]

Hi, can all of this work for a webview?

[shmighty]

Rare information, thank you for the tutorial. I implemented this with the new js_interop package which is very similar in a project that uses iOS, Android, and the web. When I attempted to build iOS, I received an error:

'Error: Dart library 'dart:js_interop' is not available on this platform'.

Do you know if there is a way to conditionally import or only use this when the running platform is web? It seems I may not be able to use this at all in a multi platform Flutter project.

[justincoding]

Flutter with the new version 3.22.0 migrated the JS package to dart:js_interop. Do you think what you showed us works using the js_interop package?

[SaiChandra_Murthy]

Let say i have some animations done with js, how can i make it render in my flutter desktop applications

[MrApoloVictor]

I missed one example method. The data stream with UI reactivity.

[devfordevs]

which auto code complete extension you are using

[Arpit_Batra]

Can we do this in mobile also? Is it possible to run js on mobile

[Snggle]

I could marry you from this tutorial.

Now, i need to figure how to load data created from a transcationBuilder from an JS SDK, to flutter, and use flutter web3 to send the transaction and broadcast it. (data is the only field I require from the SDK)

This tutorial reminds me, when I was having fun putting a whole dart app and turning it into a chrome extensions. Similar to like a metamask extension.

Hopefully, i can somehow preload a whole JS SDK into browser or something.