Flutter iFrame Web

How to use iFrame in Flutter Web?

by

In the world of web app development, you may need to load content from another site within the page. Using an iframe is the right way to go about it. This blog post aims to show you how you can implement iFrame in a Flutter Web App.

What is iFrame?

An iFrame also known as inline frame is a HTML element that loads another HTML page within the document. It essentially puts another webpage within the parent page. They are commonly used for advertisements, embedded videos, web analytics, and interactive content. It is also the accepted way to embed a YouTube video or Google Maps content.

Features and Benefits of Using iFrame in Flutter

iFrame is the only way in a Flutter web app you can embed a Youtube video or Google Maps content. Also, if you need to embed untrusted content. iFrame is sandboxed and runs in a separate process, making it secure as well.

To summarise the features and benefits it offers:

  • Ease of Use: With just a few lines of code, you can embed content from another source, such as a YouTube video, web analytics or a Google Map.
  • Security: iFrame is sandboxed and runs in a separate process, making it a safer option for embedding untrusted content’s.

Implementing iFrame in Flutter for Your Web Project

To correctly implement a iFrame in Flutter, you should ensure that you import dart:html, dart:ui as ui; ,which will be needed in our whole code.

Creating a iFrame Widget

Lets create a widget called _iframeWidget which will be our iFrame widget.Below is the code implementation.

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

Lets wrap it with a SizedBox widget which will help us assign height and width for the widget.

  SizedBox(
            height: MediaQuery.of(context).size.height,
            width: MediaQuery.of(context).size.width,
            child: _iframeWidget,
          )

Here, we wrapped the widget by using SizedBox and set the height and width of the widget using MediaQuery such that it adjusts itself according to the devices screen size.

Customizing the iFrame in Flutter

You can customize by its height, width ,image source and many other properties.Lets see how we do it.

_iFrameElement.style.height = '80%';
_iFrameElement.style.width = '80%';
_iFrameElement.src = 'https://flutter.dev/';
_iFrameElement.style.border = 'none';

We had initialized a iFrameElement before in the code.We use that instance inside initCall() to access its properties such as height and width to 80%.We use the src property to set it to a URL you wanna embed the content for your website.In our case we use flutter’s officially website.

The border property is set to none since we don’t want to show a border.

Don’t forget to add the following code after the above code.

   ui.platformViewRegistry.registerViewFactory(
      'iframeElement',
      (int viewId) => _iFrameElement,
    );

The following code registers a custom platform view for iframes in Flutter web.

Here’s a glimpse of what the code does:

  • ui.platformViewRegistry.registerViewFactory: This method is used to register a factory function for creating custom platform views in Flutter web. Platform views allow you to embed native UI elements from the platform (web in this case) within your Flutter app.
  • 'iframeElement': This is the key of the platform view. It acts as an identifier for your custom view type.
  • (int viewId) => _iFrameElement: This is the factory function that will be called whenever a view with the key 'iframeElement' is requested. The function takes an int argument (the view ID) and is expected to return the actual platform view widget. In this case, it returns an instance of a variable named _iFrameElement.pen_spark

Complete Implementation

import 'dart:html';
import 'dart:ui' as ui;

import 'package:flutter/material.dart';

class IframeScreen extends StatefulWidget {
  @override
  State<IframeScreen> createState() => _IframeScreenState();
}

class _IframeScreenState extends State<IframeScreen> {
  final IFrameElement _iFrameElement = IFrameElement();

  @override
  void initState() {
    _iFrameElement.style.height = '80%';
    _iFrameElement.style.width = '80%';
    _iFrameElement.src = 'https://flutter.dev/';
    _iFrameElement.style.border = 'none';

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

    super.initState();
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          SizedBox(
            height: MediaQuery.of(context).size.height,
            width: MediaQuery.of(context).size.width,
            child: _iframeWidget,
          )
        ],
      ),
    );
  }
}

Conclusion

In conclusion, an iFrame is a HTML element that loads another HTML page within the document. It essentially puts another webpage within the parent page. They are commonly used for advertisements, embedded videos, web analytics, and interactive content.

By following the guidelines outlined in this blog, you can seamlessly incorporate the iFrame in Flutter for your Web App project, tailor it to meet your specific needs.

Wanna Level up Your Flutter game? Then you can check out our ebook The Complete Guide to Flutter Developement where we teach you how to build production grade cross platform apps from scratch.Do check it out to completely Master Flutter framework from basic to advanced level.

Also Read

How to disable text field in flutter

Expansion Tile in Flutter

Leave a comment