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.

score 9 · Answer 1 · answered Mar 19 '20 at 13:36

9

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. :)

answered Mar 19 '20 at 13:36

Abhilash Chandran

6,803
3
32
50

I would like to try your answer, can you please provide an example? – wahyu Nov 27 '20 at 07:01
The link for "example of embedding Iframe" is broken! =/ – Leonardo Costa Nov 06 '21 at 21:35
Sorry I couldn't find the latest example quickly. I Will update it when I find one. – Abhilash Chandran Nov 07 '21 at 09:41
Unfortunately easy_web_view has a large list of dependencies, including video, audio, etc. It's something to consider before using it. – Andrei Volgin Aug 17 '22 at 16:00
Couldn't find HTMLElementView, but HtmlElementView works well. – MSquare Sep 12 '22 at 15:42

score 3 · Answer 2 · edited Jan 09 '22 at 16:56

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'),
  ],
));

score 3 · Answer 3 · answered Jan 31 '22 at 13:17

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

answered Jan 31 '22 at 13:17

ajay prabhakar

41
5

thank u wroking in chrome – Abdallah Mahmoud Feb 05 '23 at 07:33

Load HTML file and display in Flutter Web

3 Answers3

Linked