Flutter web and iframe

Reframing the problem…

This article combines the power of Flutter web and iframe together…

Pre-Requisite…

As of 1.12, Flutter has early support for running web applications, but you need to be running the beta channel of Flutter…

Upgrade to Flutter beta channel as :

flutter channel beta
flutter upgrade
flutter config --enable-web

Once web is enabled, run the flutter devices command…you should see something like this :

flutter devices
2 connected device:
Chrome     • chrome     • web-javascript • Google Chrome 78.0.3904.108
Web Server • web-server • web-javascript • Flutter Tools

---

Run your app as localhost in Chrome, by the following

flutter run -d chrome

---

Begin…

Lets see first, what’s an iframe

An inline frame is used to embed another document within the current HTML document.

All the iframe properties in modern web, here

To include an iframe in web, we use the below syntax

<iframe src="https://www.google.com"></iframe>

Flutter web and iframe

For including iframes in Flutter Web, we need to use a widget called IFrameElement.

What this widget does, as per documentation:

factory IFrameElement() => JS(    'returns:IFrameElement;creates:IFrameElement;new:true',    '#.createElement(#)',    document,    "iframe");

Steps : 

Tip :(Create a Stateful widget and do all these steps inside initState)

1. We initialize our widget as 

final IFrameElement _iframeElement = IFrameElement();

2. Next we use the properties as exposed by this _iframeElement . 

_iframeElement.height = '500';
_iframeElement.width = '500';
_iframeElement.src = 'https://www.youtube.com/embed/RQzhAQlg2JQ';
_iframeElement.style.border = 'none';

height and width are self-explanatory. This src paramater states the document which we want to embed and style parameter is for applying css to the iframe window…

Note : Properties for exploring: allow, allowFullScreen, contentWindow, csp, srcdoc etc..

3. Including _iframeElement as Flutter Widget

This _iframeElement is not a widget, hence we require something to register this.

We take the help of dart:ui

import 'dart:ui' as ui;
ui.platformViewRegistry.registerViewFactory();

As of now, if you copy paste the second line, you will probably get an error. This is a known issue, check here.

Workaround :

// ignore: undefined_prefixed_name
ui.platformViewRegistry.registerViewFactory();

Finally, we register our _iframeElement like this :

// ignore: undefined_prefixed_name
ui.platformViewRegistry.registerViewFactory(
   'iframeElement',
 (int viewId) => _iframeElement,
);

Note : Parameter ‘iframeElement’ is important, we will see below…

4. Showing the _iframeElement 

We will use a widget called HtmlElementView. As per the docs :

Embeds an HTML element in the Widget hierarchy in Flutter Web. The platform view’s lifetime is the same as the lifetime of the State object for this widget. When the State is disposed the platform view (and auxiliary resources) are lazily released.

This widget has a required property named viewType . We will set its value to the one in Step3 i.e (iframeElement)

Widget _iframeWidget;
_iframeWidget = HtmlElementView(
   key: UniqueKey(),
   viewType: 'iframeElement',
);

---

Note: the param viewType has the same name as the one in Step3

---

WE can use this _iframeWidget now inside our build method 

SizedBox(
    height: _height,
    width: _width,
    child: _iframeWidget,
)

YouTube Video in IFrame…

To show the youtube video in iframe, we need to follow some rules.

Steps :

1. Don’t directly copy paste the link and assign as src to iframe.

Reason : 

If we copy paste any youtube link, we see an endpoint (/watch) like this :

https://www.youtube.com/watch?v=RQzhAQlg2JQ

This /watch endpoint does not allow outside requests, and you may get an error like : X-Frame-Options to SAMEORIGIN…

See SO here.

2. Right click on any YouTube video and click ‘Copy Embed Code’….

You will get something like this :

<iframe width=”424″ height=”238″ src=”https://www.youtube.com/embed/RQzhAQlg2JQ” frameborder=”0″ allow=”accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture” allowfullscreen></iframe>

Extract out the src param value and paste into your iframe src

https://www.youtube.com/embed/RQzhAQlg2JQ

/embed endpoint allows outside requests…..

Hosted URL : https://fir-signin-4477d.firebaseapp.com/#/

Source code for Flutter Web App..