Flutter (Web) how to listen to javascript event or pass javascript data to flutter?

Question

I am currently writing a flutter web application and am creating a fullscreen button that makes the page fullscreen and edits the page so that a container is maximized upon clicking. This button works by tracking a boolean called "isfullscreen", which edits the ui in flutter and maximizing the browser window by calling a javascript function with dart:js. This button works fine, and allows the user to exit out of fullscreen when clicking as well, and everything is reset to default. However, if the user clicks on the fullscreen button and then manually leaves fullscreen (f11 key, esc key on browser), flutter doesn't pick up the event and the contents of the webpage are mangled (isfullscreen=true but browser is not fullscreen). Is it possible to a) listen to a javascript event within flutter, or b) listen to the javascript event and then somehow pass the data to the flutter web page so that the boolean isfullscreen=false when the user manually exits fullscreen without clicking the button? Thanks for helping.

Answer 1

you can post a message in your js code when the event occures

window.parent.postMessage('any message', "*");

and listen to it in your dart code

@override
void initState() {
  super.initState();

  //setup listener ---------------------------------
  window.addEventListener("message", (event) {
    MessageEvent event2 = event;
    print(event2.data);
  });
  //------------------------------------------------

}