How to make a web-based Flutter application fullscreen on iOS

Question

I have a web-based Flutter application and after clicking a button, I want to make the application fullscreen. I use the following code snippet for this

import 'dart:html';
            
if (document.documentElement == null) {
   print("DEBUG document.documentElement == null");
} else {
   document.documentElement.requestFullscreen();
}

This code works fine in Chrome on Linux, in Safari on Mac, on Android, but not on iOS (15.1). There I get the following error

NoSuchMethodError: method not found: 'webkitRequestFullscreen' (s.webkitRequestFullscreen is not a function. (In 's.webkitRequestFullscreen()', 's.webkitRequestFullscreen' is undefined))

Any ideas/tips how to get this working on iOS?

Answer 1

That is due to iOS safari not having fullscreen API. I believe the problem only arises on iphones and not on ipads. A workaround would be adding the bottom line. But still it will only work if the page is launched as a bookmark from home screen.

<meta name="apple-mobile-web-app-capable" content="yes">

For more info check the following links-

https://developers.google.com/web/fundamentals/native-hardware/fullscreen#request_the_browser_go_fullscreen_in_response_to_a_user_gesture

https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API#element.requestfullscreen