Estoy usando flutter para web. Quiero procesar un evento personalizado en mi código javascript flutter. Abro una ventana emergente desde flutter:

 import 'dart:js' as js; js.context.callMethod('open', ['http://localhost:8083/popup-page.html?params', 'loginWindow', 'width=600,height=600,left=600,top=200']);

popup-page.html es parte de mi aplicación web flutter. Durante su ciclo de vida popup-page.html se vuelve a cargar varias veces, por lo que no puedo simplemente asignar mi función de devolución de llamada a algún objeto dom.window específico. Entonces, en popup-page.html tengo el siguiente javascript para recuperar mi código de aleteo cuando sea necesario:

 opener.parent.dispatchEvent(new CustomEvent('myCallback', {detail: callbackDetailsObj}));

Ahora quiero obtener y procesar callbackDetailsObj en mi aplicación flutter.

Mi idea inicial era usar window.addEventListener('myCallback', callback) o window.on['myCallback'].listen(callback) del paquete dart:html . En este y este ejemplo, las personas solo usan CustomEvent como argumento de la función de devolución de llamada y emiten event.detail a la clase de dardo personalizada. Pero para mí eso no funciona. Primero: en mi devolución de llamada, obtengo una instancia de JavaScriptObject para el evento arg. Ese JavaScriptObject no se puede convertir en CustomEvent ni en event Event (a pesar de que EventListener arg es typedef EventListener(Event event) ). Por lo tanto, no pude emitir o convertir JavaScriptObject en nada útil (incluido JsObject del paquete dart:js ) y tampoco pude obtener ningún campo de ese objeto, por ejemplo, tipo, destino, detalles.

Entonces, para crear una solución funcional, utilicé context.callMethod + allowInterop :

 import 'dart:js' as js; void addListener() { var callbackPopupJs = js.allowInterop(callbackPopup); js.JsObject options = js.JsObject.jsify({'once': true}); js.context.callMethod('addEventListener', ['myCallback', callbackPopupJs, options]); } void callbackPopup(js.JsObject ev) { developer.log('Browser Callback'); developer.log('Event type: ${ev['type']}, runtime: ${ev.runtimeType}, target: ${ev['target']}'); developer.log('Detail : ${ev['detail']}'); }

Y ahora puedo obtener CustomEvent.detail . Pero no lo soy si este método es óptimo y no es posible usar window.addEventListener() y CustomEvent para procesar las devoluciones de llamada de ventana.