加载HTML文件并在Flutter Web中显示

Question

我有一个HTML文件，其中包含一些JS函数和CSS样式。

有可能将我的html文件加载到Flutter Web上的嵌入式小部件中吗？我已经在iOS和Android上使用flatter_webview pacakge成功地完成了这项工作，但还没有找到flutter Web的解决方案。

Answer 1

有一个HTMLElementView小部件可以帮助您在flutter web中嵌入Html。这个小部件可以获取Iframe并渲染它。如果你不喜欢Iframe，那么你可以直接从dart:html库嵌入一个BodyElement。

此处提供了嵌入Iframe的示例。尽管它来自旧的回购，但代码是有效的，我找不到最新的。

如果你不想走艰难的路，Rodydavis有一个简化的小部件，它在这里叫做easy_web_view。

不过，如果你需要一个创建简单飞镖垫的代码示例并共享MRE，我会尽力提供帮助。：(

Answer 2

对于Iframe示例，您可以执行类似以下的操作

首先，导入"ui"库和"html"库

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

其次，例如，使用viewType"test view type"注册"Iframe">

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

注意：您会注意到编译器找不到platformViewRegistry方法，但如果您选择Debug anyway，它也可以正常运行，不会出现任何问题。

最后，使用HtmlElementView小部件运行此Iframe

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

Answer 3

您可以使用此软件包flatter_widget_from_html
在定义小部件时，您需要设置webView: true以获得iFrame支持

我刚刚测试过，它在网络上运行良好，这个包也支持本地资产