I'm trying to use InAppWebView (v6 latest beta because I'm trying to get this to work on the web platform) to display an embedded vimeo player. In a new flutter app, this works fine:
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
final GlobalKey webViewKey = GlobalKey();
InAppWebViewSettings settings = InAppWebViewSettings(
useShouldOverrideUrlLoading: true,
mediaPlaybackRequiresUserGesture: false,
allowsInlineMediaPlayback: true,
iframeAllowFullscreen: true);
return Scaffold(
body: InAppWebView(
key: webViewKey,
initialSettings: settings,
initialUrlRequest: URLRequest(
url: WebUri(Uri.dataFromString(
'<html><div style="position:relative;padding-top:56.25%;"><iframe src="https://player.vimeo.com/video/689902544?h=1c8590a277" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" style="position:absolute;top:0;left:0;width:100%;height:100%; allowfullscreen></iframe><p><a href="https://vimeo.com/689902544">Eternal Spring</a> from <a href="https://vimeo.com/christopherdormoy">Christopher Dormoy</a> on <a href="https://vimeo.com">Vimeo</a>.</p></div></html>',
mimeType: 'text/html')
.toString())
//url: WebUri("https://orf.at")
)),
);
}
}
When I click on the fullscreen icon in the Vimeo player, my browser correctly switches to fullscreen.
However, in my actual application, my widget is wrapped inside a LayoutBuilder and it seems, whenever the InAppWebView enters fullscreen, the LayoutBuilder triggers a rebuild of the child widget tree and thus immediately I'm thrown out of the fullscreen again.
What can I do to make fullscreen work also within a LayoutBuilder?
The problem seems to be in your usage of the
GlobalKey- it's created every timebuildfunction is called This, in turn causes re-initialization of theInAppWebView, which will probably cause it to exit full-screen.Simple solution is to create the
GlobalKeyonce (or just completely omit it if you don't need it for anything else):