Search code examples
flutterflutter-layoutbuilder

InAppWebView within LayoutBuilder fullscreen issue

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?

Solution

  • The problem seems to be in your usage of the GlobalKey - it's created every time build function is called This, in turn causes re-initialization of the InAppWebView, which will probably cause it to exit full-screen.

    Simple solution is to create the GlobalKey once (or just completely omit it if you don't need it for anything else):

    class _MyHomePageState extends State<MyHomePage> {
  final webViewKey = GlobalKey();

  @override
  Widget build(BuildContext context) {
     ...
  }
}