JavaScript Interop in Flutter Web

Поделиться
HTML-код
  • Опубликовано: 17 ноя 2024

Комментарии • 25

  • @nickyfranshel1210
    @nickyfranshel1210 Месяц назад +1

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

  • @eduardoholzmann853
    @eduardoholzmann853 Месяц назад

    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
    @JonasLissborg Месяц назад

    This is absolutely amazing, thank you so much!

  • @shmighty6681
    @shmighty6681 6 месяцев назад +1

    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
      @TylerCodes  6 месяцев назад

      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> ruclips.net/video/Nq5bPx1bmCU/видео.html
      (part 3 of this video)

  • @robertorampazzo7510
    @robertorampazzo7510 2 месяца назад

    Hi, can all of this work for a webview?

  • @chandusai7881
    @chandusai7881 5 месяцев назад

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

    • @TylerCodes
      @TylerCodes  5 месяцев назад

      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
    @justincoding 6 месяцев назад

    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
      @TylerCodes  6 месяцев назад +1

      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
      @justincoding 6 месяцев назад

      @@TylerCodes Oh great!

    • @kaki993Co
      @kaki993Co 3 дня назад

      Good thing with js_interop, we do not need Makefile :)

  • @MrApoloVictor
    @MrApoloVictor 6 месяцев назад

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

    • @TylerCodes
      @TylerCodes  5 месяцев назад

      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?

  • @devfordevs
    @devfordevs 3 месяца назад

    which auto code complete extension you are using

  • @Arpit_Batra
    @Arpit_Batra 6 месяцев назад

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

    • @TylerCodes
      @TylerCodes  6 месяцев назад +1

      Mobile web, yes.

    • @wobsoriano
      @wobsoriano 2 месяца назад

      ⁠@@TylerCodes dont get this. What’s flutter web mobile? So does that mean interop in “just mobile” doesnt work?

  • @shahmirzali_huseynov
    @shahmirzali_huseynov 8 месяцев назад

    👍👍

  • @meek6836
    @meek6836 7 месяцев назад

    great

  • @Snggle
    @Snggle 6 месяцев назад

    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
      @TylerCodes  6 месяцев назад

      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
      @Snggle 6 месяцев назад

      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
      @TylerCodes  6 месяцев назад

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