aseem wangoo

Posted on Mar 22, 2020 • Edited on Sep 22, 2020

Flutter web and iframe

#flutter #productivity #webdev #dart

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

In case it helped :)

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…

Article here: https://flatteredwithflutter.com/flutter-web-and-iframe/

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>

Steps :

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

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 :

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 :

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

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

/embed endpoint allows outside requests…..

In case it helped :)

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

Source code for Flutter Web App..

Is Your CI/CD Server a Prime Target for Attack?

57% of organizations have suffered from a security incident related to DevOps toolchain exposures. It makes sense—CI/CD servers have access to source code, a highly valuable asset. Is yours secure? Check out nine practical tips to protect your CI/CD.

Learn more