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.
Add a comment
|
1 Answer
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);
});
//------------------------------------------------
}
4 Comments
Stack Underflow
What is
window in the dart code? What import should I use? Oh, I guess it is dart:html
Franz
@StackUnderflow You are right it is
import 'dart:html';
HardikDabhi
it gives me error on mobile. not able to run code.
Franz
Do you try to run it as android or ios app? Because this is just for flutter web.