Connect Angular, React, HTML, JavaScript with Flutter using webview

Amit Shukla
2 min readMar 17, 2022

Angular framework is no doubt a champion in building web, mobile apps for desktop and mobile. However, recent development in Flutter has made it’s preferred choice for native mobile app development.

Approaches like Apache Cordova, Phone-Gap, Ionic, React and Native Script are preferred approaches for converting web apps to iOS, Android, PWA apps.

In this blog, I am proposing an alternate approach of using Flutter to include web apps and easily publish as iOS and Android apps. These web apps can also be added as part of existing Flutter based apps.

LOOM video messaging app — A working code example
Source code :
GitHub

if you prefer a YouTube Video Tutorial, please visit this link below.

Flutter App

start with adding webview dart package to pubspec.yaml

pubspec.yaml

In this tutorials, we are building an app where a patient can record and send video message to healthcare provider. This app is built using Loom SDK, which is NPM Javascript package. So, first we will create one dart view, which will be included inside Material App Widget.

Flutter code
Flutter Code

About CORS and Authentication

passing user ID (UID) in url to validate user is really bad practice, instead in production app, app should either ask user to re-authenticate credentials (not very convenient) or pass appropriate JWT or alternate Auth Tokens to validate user credentials.

Also, app must implement CORs to whitelist authorized domains.

Angular App

Now, include below code to Angular HTML and Type Script Files.

Angular HTML Component
Angular HTML Component
Angular Type Script Component
Angular TypeScript Component

--

--

Amit Shukla

Build and Share Quality code for Desktop and Mobile App Software development using Web, AI, Machine Learning, Deep Learning algorithms. Learn, Share & Grow.