Connect Angular, React, HTML, JavaScript with Flutter using webview
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
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.
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.