Build your own web plugin with JS interop

on YouTube ↗37m

" summary

Shows how to call real JavaScript libraries from Flutter web to mount Stripe’s PaymentElement, using the @JS annotation to declare external getters/methods, allowInterop to hand Dart callbacks to JS, and an HTML element view with registerViewFactory to render the element inside Flutter. Tests run in a browser by injecting a script tag. Covers limitations and future work: static interop / Wasm support and inline types to make JS bindings faster and safer.

AI-written summary · about

" chapters (6)

1. 0:00Introduction and motivation
2. 10:32JavaScript interop basics
3. 16:24Calling Dart from JavaScript
4. 20:56Testing JavaScript interop
5. 27:58Real-world Stripe integration demo
6. 34:18Future of Flutter web with Wasm

" related talks

• 27mJavaScript Plugin Architecture for Single-Page ApplicationsBala Dutt · JSFoo 2015
• 22mBuilding JavaScript for JavaScriptersCassidy Williams · DinosaurJS 2019
• 53mDeveloping WebAssembly Rust plugins for ZellijAram Drevekenin · RustLab 2023
• 29mYour Own Build Tool Agnostic Web-Plugin? Easy as 1 2 3(D)Thorsten Seyschab · Frontend Nation 2025
• 11mUI Plugin DevelopmentDaniel Peach · Spinnaker Summit 2020
• 23mThe Next Wave of Web Frameworks is BYOJSBrandon Roberts · JSNation Conference 2022
• 27mGetting to know js_interopKali · Fluttercon USA 2025
• 37mElevating JavaScript interoperability with DartJaime Blasco · Fluttercon Europe 2024