Enabling smooth communication between JavaScript and Dart in Flutter
This talk is ideal for developers who are already familiar with Flutter and want to explore its potential for web development. We will also learn about state management between Flutter and JavaScript and how to customize Flutter web app initialization.
Using the js package, you can mark any function in your Dart code with the @JSExport attribute and subsequently invoke it from your JavaScript code. This helps to facilitate smooth interoperability between JavaScript and Dart code.
We showcase the power of interoperability and come up with an exciting scenario.
We leverage the potential of interoperability to integrate ChatGPT into Flutter Web. There are three essential steps to follow.
- Set up a localhost server that invokes the OpenAI APIs.
- Create a Flutter web project and develop a plain vanilla Javascript and HTML mock of the ChatGPT UI.
- Integrate the localhost server established in the first step into the Flutter web app.
The 3rd step involves Element embedding
It's a feature introduced in Flutter that allows developers to embed Flutter content into any web application using an HTML element. This feature enables developers to create complex user interfaces by combining the performance of Flutter with the flexibility of the web.
Using JS-Dart interoperability, the ChatGPT UI responds to the queries sent by the Flutter web and returns the corresponding answers.
Takeaways:
- Element Embedding can be particularly useful for web developers with HTML and CSS experience.
- Element embedding allows developers to integrate Flutter content into existing HTML pages or web apps, which can help enhance the user experience and leverage the strengths of both technologies.
- JavaScript can be used to render the web-based component, like ChatGPT, inside the embedded HTML element.
Speaker Works:
- https://flatteredwithflutter.com/
- https://youtube.com/aseemwangoo
- https://medium.com/@aseemwangoo
- Google Singapore Talk: https://events.withgoogle.com/devfest-singapore-2019/speakers/#content
- Geekle 2021: https://youtu.be/kg60JQJ-tBE?t=15620
- Google Singapore Online Dart and CLI Talk: https://youtu.be/_-ruwEdI1B8
- DartUp talk: https://youtu.be/uY3sJk1sT10
Slides:
- Dart CLI Talk: https://docs.google.com/presentation/d/1Dyf6p4ct5-a77rEhwhDIVrZYumwmLYAYgMxCUACp5k0/edit#slide=id.p
- Dart Cloud Run Talk: https://docs.google.com/presentation/d/1HlVZKBHbwzQy0Ubp0HY3vSpD8ZwHDKQY7JDdxhh_W4g/edit#slide=id.g103696ca5af_0_82
- Calling C from Flutter: https://docs.google.com/presentation/d/1jB5xx8yB2iFku9LmtjWR_1cR70a1QFEFIrjKkZ8lQTE/edit#slide=id.p
This talk is completely fresh and has not been delivered previously.
Founder of Flatteredwithflutter. YouTuber, blogger, event speaker and technical writer. Working with SouthEast Asia’s largest online loyalty platform, ShopBack
Ranked in the Top 30 best flutter blogs. Speaker at Google Singapore and tech events based in Singapore (eg Flutter Meetups etc). Given online talks with Geekle, DartUp and other tech communities.
