Flutter Embedded Web App with JavaScript Interop

A working example demonstrating how to embed a Flutter web application into an existing HTML page and enable bidirectional communication between JavaScript and Flutter using modern dart:js_interop.

Overview

This project showcases:

• Embedding Flutter web apps into existing HTML pages
• JavaScript → Flutter communication using postMessage API
• Flutter → JavaScript communication using @JS() annotations
• Async JavaScript calls from Flutter (Promises, async/await)
• JSON data exchange between JavaScript and Flutter

Features

JavaScript Functions Callable from Flutter

The example includes several JavaScript functions that can be called from Flutter:

• showAlert(message) - Display browser alert dialogs
• getData() - Return simple string data
• getJsonData() - Return JSON-encoded data
• getAsyncData() - Return Promise-based async string data
• getAsyncJsonData() - Fetch and return JSON from a local file

Flutter Message Handling

The Flutter app listens for messages from the host page using the window.onmessage API, demonstrating how to receive data from JavaScript.

Getting Started

Prerequisites

• Flutter SDK (^3.10.0)
• A web browser

Installation

1. Clone this repository:

git clone <your-repo-url>
cd embedded_project

2. Install dependencies:

flutter pub get

3. Run the application:

flutter run -d chrome

Or build for production:

flutter build web

Project Structure

lib/
  ├── main.dart                    # Main Flutter app with message listener
  └── services/
      └── js_interop_service.dart  # JavaScript interop service layer
web/
  └── index.html                   # Host HTML page with JS functions

How It Works

1. Flutter to JavaScript Communication

Flutter uses dart:js_interop to call JavaScript functions:

@JS()
external void _showAlert(String message);

void showAlert(String message) {
  _showAlert(message);
}

2. JavaScript to Flutter Communication

The host page sends messages using postMessage:

window.postMessage({
  type: 'FROM_JS',
  payload: 'Your message here'
}, '*');

Flutter listens for these messages:

window.onmessage = (JSAny event) {
  final messageEvent = event as JSMessageEvent;
  final data = (messageEvent.data.dartify() as Map).cast<String, dynamic>();
  // Handle the data
}.toJS;

3. Async JavaScript Calls

Flutter can await JavaScript Promises:

Future<String> getAsyncData() async {
  final promiseResult = await _getAsyncData().toDart;
  return (promiseResult as JSString).toDart;
}

Key Technologies

• dart:js_interop - Modern Flutter web JavaScript interop (replaces deprecated dart:js)
• JSPromise - For handling JavaScript async operations
• postMessage API - For JavaScript → Flutter messaging
• Extension types - Type-safe JavaScript object access

Notes

This project was created by adapting deprecated JavaScript interop code to work with modern Flutter web standards. It serves as a reference for developers needing bidirectional communication between Flutter web apps and their host pages.

License

MIT License - See LICENSE file for details.

Contributing

Contributions, issues, and feature requests are welcome! Feel free to check the issues page or submit a pull request.