关于 displaying-html-in-flutter
这项技能介绍如何在 Flutter 的 Web 和移动端显示并交互 HTML 内容，涵盖平台特定的渲染方式，并提供 easy_web_view 包作为封装实现。
主要功能
- 01在 Flutter Web 显示 HTML
- 02通过 iFrame 渲染网页内容
- 03在移动端使用 WebView
- 04更新 URL 和请求头
适用场景
- 01在 Flutter 应用中显示 HTML
- 02显示 Markdown 或嵌入内容
- 03更新移动端 WebView 的 URL
安装
复制下面的命令，在终端中运行。
npx skills add https:/安装后在 Claude Code 中输入/displaying-html-in-flutter确认已加载。
详细介绍
在 Flutter 中显示 HTML
有时，你需要在 Flutter 中显示并交互处理 HTML 内容。
在线演示：https://rodydavis.github.io/easy_web_view/#/
如果你等不及了，我为你创建了一个软件包，可在此处实现以下所有功能及更多功能：https://pub.dev/packages/easy_web_view
开始使用
创建一个新的 Flutter 项目，名称随意。
如果你计划在 iOS/Android 上显示 HTML 内容，需要将以下内容添加到 pubspec.yaml 中
dependencies:
webview_flutter: ^0.3.15+1
Web
要在 Flutter Web 中显示 HTML，我们需要使用 HTMLElementView。这是一种平台视图，可用于显示原生内容。
首先，我们需要注册 Element 并添加所需的选项。这里我们创建一个 iFrame 元素，并根据内容是 Markdown、HTML 还是 URL 来设置来源。
要显示有效的 HTML，可以将 src 字段设置为以下内容：
_src = "data:text/html;charset=utf-8," + Uri.encodeComponent("HTML_CONTENT_HERE");
对于这个软件包，你也可以将 Markdown 传递给 src，它会为你进行转换。
调用 setup 方法后，就可以显示新的平台视图了：
你需要使用与之前为 “registerViewFactory” 方法注册时相同的 viewType 字符串。
最后，你需要将它放入一个具有明确宽度和高度的容器或定尺寸框中！
移动端
参考：https://github.com/rodydavis/easy_web_view/blob/master/lib/src/mobile.dart
移动端的设置应该更简单。我们来添加一个用于更新 URL 的方法，并将其传递给 Web 视图。
创建控制器：
WebViewController _controller;
每当 src 发生变化时，调用此方法：
_controller.loadUrl(_updateUrl(widget.src), headers: widget.headers);
最后，我们来在 Widget 树中显示 HTML：
总结
如果你想查看完整示例和高级用例，可以在此处查看源代码：https://github.com/rodydavis/easy_web_view
如果你只想直接使用现成的功能，可以使用这个软件包：https://pub.dev/packages/easy_web_view
如果你有任何可以帮助改进它的内容（或者发现了 bug），欢迎提交 PR。
以这种方式显示 HTML 时，你会发现自己可以像在普通网页中那样进行交互、选择文本并操作内容。如果你使用这个软件包，也可以直接传递嵌入内容或 HTML 元素，无需提供完整有效的 HTML 文件（例如 YouTube 视频）。