JavaScript Interop in Flutter Web

Подписаться 1,9 тыс.

Просмотров 1,4 тыс.

50% 1

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:
github.com/tylersavery/flutte...

Наука

Опубликовано:

18 мар 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 18

@devfordevs 8 дней назад

which auto code complete extension you are using

@meek6836 4 месяца назад

great

@shmighty6681 2 месяца назад

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.

@TylerCodes 2 месяца назад

Yes. This is a common thing I have to do. I'm like 90% sure I've covered this in a video already. Let me try and track it down! EDIT: Found it> ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-Nq5bPx1bmCU.html (part 3 of this video)

@shahmirzali_huseynov 4 месяца назад

👍👍

@chandusai7881 2 месяца назад

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

@TylerCodes 2 месяца назад

If it were me, i'd rebuild the animation in flutter. You could use a webview, but that's going to not be a performant as using flutter's native engine. Too many layers of separation.

@justincoding 2 месяца назад

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?

@TylerCodes 2 месяца назад

Good inquiry! I'm actually planning on digging into some of the latest stuff with web assembly. So perhaps a follow up video is in the works for this.

@justincoding 2 месяца назад

@@TylerCodes Oh great!

@MrApoloVictor 2 месяца назад

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

@TylerCodes 2 месяца назад

Not sure if I follow. Do you mean JS streaming data to flutter and flutter reacting to it? If so, what would be a good use case for this?

@Arpit_Batra 3 месяца назад

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

@TylerCodes 3 месяца назад

Mobile web, yes.

@Snggle 3 месяца назад

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.

@TylerCodes 3 месяца назад

Yep, you sure can. Assuming its a browser based js SDK, just include it near the top of your index.html file. Then, you just need to following more or less what is shown in this video to create the bindings between dart and your global javascript. I've done this exact thing with a crypto library on a flutter web project. The biggest hurdle you will likely run into with crypto is ensuring whatever you make is browser based (and not just node). Many JS libraries don't actually work in the browser but you can use browserify to help with this. GLHF!

@Snggle 3 месяца назад

Turns out I can import then as cdn imports. It felt dirty to metamask connect via js instead flutter web3 packages lol. Now I'm stuck on typescript package, cause that's different and needs to be complied before accessing and importing

@TylerCodes 3 месяца назад

@@Snggle Yeah, you'll need to compile it to plain old javascript and then just put it in your assets folder and load it in the index.html. Then you should be off to the races.