How to use JavaScript libraries in your Dart applications

Jermaine Oppong on August 22, 2018

Ever experienced the fear of leaving your favourite JS libraries behind should you include Dart with your dev stack? Well fear no more, because t... [Read Full]
markdown guide
 
 

This only works with browser-based packages. The only way I see this useful in a Flutter app is if rendering content in a web view.

 

Well there are tons of JS libraries that aren't ui related where we wouldn't have to reinvent the wheel

Sorry, not sure I follow what you mean here. Could you expand on this?

Let's say I want to use the moments.js library in my flutter application. Since it's already written, could I include this in my Flutter application and then call the functions in the moments library, or does it only work for interacting with the JS Window object?

Ahhh, thanks for clarifying. Only works with packages that are accessible via the window object, which will cover most browser-based JS packages. This is by design.

Out of interest, do you have a particular use case that warrants using a JS package in Flutter?

well there was an IMEI/credit card validator that was written in JS that I needed in one of my apps. I ended up converting it to dart code and then used it, but it would have been nice if I didn't need to. JS is so mature already I don't want to reinvent wheels I don't need to.

Oh right, got you. I tried a quick search on Pub that brought me across these two:

Haven't tried it myself, but would those have worked for your use case?

Awesome Jonathan! I'm glad you contributed in this way. I count this a victory. This also has the added benefit of not needing any JS interop, which helps with performance. Now I know where to look should I need credit card validation ;)

 

Hi, How can i implement this in angularDart, Tried following your approach but nothing is happening in my component.

 

Could you shed a bit more light on what you wish to achieve? You don't need interop if using AngularDart itself.

 

I am trying to use jQuery With AngularDart, to animate some components. Angular has a BrowserAnimationsModule but couldn't find something similar in AngularDart so decided to use jQuery.

May investigate this as part of my video series on AngularDart. In the meantime, have you tried with CSS animations?

Css animations was my last resort, i will try and use css. Thank you.

You're welcome. Just released a video today demonstrating interop with Toastr.js in an AngularDart web app → youtu.be/xegpncRwqGw Let me know what you think.

 

Hi, I'm new in web dev, and your aqueduct videos really help me, thx:)

I wanna ask is there a way to use javascript file in aqueduct project? I mean there's no index.html in project...

 

Hi Mandui, not in an Aqueduct project. Aqueduct is used to build serverside backends. You could serve index.html and js files with Aqueduct, but I'm assuming that ain't what you're asking.

Could you expand on what you wish to do?

code of conduct - report abuse