4.9 KiB
Ты хочешь реализовать взаимодействие между Flutter-приложением, отображающим WebView, и вложенными Flutter-приложениями, которые запускаются внутри WebView. Это можно организовать через мост Flutter ↔ Web (JavaScript) ↔ WebView ↔ Flutter. Вот план реализации:
💡 Что делает JS JS только: перенаправляет события между WebView и Flutter Web. Он не содержит логики, не парсит JSON, не делает маршрутизацию.
🔄 Поток сообщений Flutter Web вызывает Dart-метод sendToHost(payload) Он через dart:js вызывает JS-функцию window.sendToFlutterHost(json) JS вызывает window.flutter_inappwebview.callHandler('fromWebApp', json) Flutter Host получает JSON в Dart, обрабатывает Если нужно ответить — Flutter Host делает evaluateJavascript() с window.dispatchEvent(...) JS ловит и вызывает flutterApp.receiveFromHost(json) через interop Вложенное Flutter Web-приложение обрабатывает всё в Dart
✅ Что реализовать в Dart (на обеих сторонах) sendMessage(type, payload) → сериализация onMessage(type) → маршрутизация поддержка Completer / callback’ов (для "awaitable" запросов) стримы (StreamController) для подписки на обновления очередь сообщений, если WebView не готов (например, при инициализации)
✅ ЭТАП 1: Архитектура и формат сообщений 📋 Задачи: Выбрать схему общения: Flutter Host ↔ JS Bridge ↔ Flutter Web
Определим формат сообщений:
{ "type": "event_name", <- optional "id": "uuid-123", <- optional "data": { ... } <- optional }
Поддерживать request-response и event-notify модели
✅ ЭТАП 2: Настройка WebView в Flutter-хосте 📋 Задачи: Добавить flutter_inappwebview Открыть локальный или удалённый URL с Web-приложением Зарегистрировать обработчик addJavaScriptHandler(name: 'fromWebApp') Готовить метод evaluateJavascript() для отправки сообщений в Web
✅ ЭТАП 3: JS Bridge в HTML/Web оболочке 📋 Задачи: JS-оболочка подписывается на события от Flutter-хоста:
window.addEventListener("fromFlutterHost", (e) => { handleFlutterMessage(e.detail); }); Отправка сообщений в Flutter-хост:
window.flutter_inappwebview.callHandler('fromWebApp', { type, id, payload }); JS → Dart вызов и обратно через dart:js или package:js
✅ ЭТАП 4: Flutter Web приложение внутри WebView 📋 Задачи: Использовать dart:js или js пакеты для общения с JS Создать глобальный объект flutterApp, например:
js.context['flutterApp'] = { 'sendFromHost': (data) { // handle message } }; Для отправки сообщений:
js.context.callMethod('sendMessageToFlutterHost', [messageJson]); ✅ ЭТАП 5: Обработка сообщений в Flutter-хосте 📋 Задачи: Обрабатывать входящие сообщения в JavaScriptHandler
Вызывать нужные методы или бизнес-логику
Отправлять обратно данные через evaluateJavascript():
window.dispatchEvent(new CustomEvent("fromFlutterHost", { detail: ... })); ✅ ЭТАП 6: Поддержка ответа и callback'ов 📋 Задачи: Для каждого сообщения включать поле "id" (UUID)
В Web-приложении вести словарь pendingCallbacks[id] = completer
При получении ответа – вызывать соответствующий callback
✅ ЭТАП 7: Логирование и отладка 📋 Задачи: Логировать каждое сообщение на всех уровнях:
Внутри Flutter-хоста
В JS-оболочке
Во Flutter Web
Добавить утилиту типа log(type, from, data)
🧩 Примеры типов взаимодействий getAppVersion → вернуть версию хост-приложения
selectFile → открыть файловый диалог
vibrate → вызвать HapticFeedback.vibrate()
sendTelemetry → Flutter Web отправляет аналитические данные
requestLocation → Flutter-хост даёт координаты