Load HTML file and display in Flutter Web

Question

I have a single HTML file that contains some JS functions and CSS styling.

Is it possible to load my html file into an embedded widget on Flutter Web? I've successfully accomplished this on iOS and Android using the flutter_webview pacakge, but haven't found a solution for Flutter Web.

Answer 1

There is a HTMLElementView widget which can help you embed Html in flutter web. This widget can take an Iframe and render it. If you don't prefer Iframe then you can embed simply a BodyElement from the dart:html library directly.

An example of embedding Iframe is availabel here. Eventhough its from an old repo, the code is valid and I couldn't find a latest one.

If you don't want do go the tough way, there is simplified widget from Rodydavis which is available here called easy_web_view.

Still if you need code sample a create simple dart pad and share the MRE, I will try to help. :)

Answer 2

For the Iframe example, you can do something like this

First, import 'ui' library, and 'html' library.

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

Second, register your 'Iframe' with viewType 'test-view-type' just for example.

ui.platformViewRegistry.registerViewFactory(
    'test-view-type',
    (int viewId) => IFrameElement()
      ..width = '640'
      ..height = '360'
      ..src = "https://www.youtube.com/embed/5VbAwhBBHsg"
      ..style.border = 'none');

Note: you will notice that the compiler can't find platformViewRegistry method but it's okay if you choose to Debug anyway and it will run correctly without any problems.

Finally, use HtmlElementView widget to run this Iframe

return Scaffold(
    body: Column(
  children: [
    Text('Testing Iframe with Flutter'),
    HtmlElementView(viewType: 'test-view-type'),
  ],
));

Answer 3

You can use this package flutter_widget_from_html
While defining the widget you need to set webView: true to get iFrame support

I just tested and it is working fine on web, and this package supports local assets too