Flutter: 内联 Android 和 iOS WebView

为此添加示例用例：

我有一个混合Android 应用程序，其中一些渲染由 WebView 处理，但导航等控件由本机 UI 小部件处理。 我想将一个版本移植到 Flutter，在我的脑海中，让它工作的要求是：

• 一种将 WebView 添加到渲染树中的方法，以便它可以与导航按钮等内容的本机小部件一起使用。
• 一种允许在 WebView 中与 JS 交互的方法（类似这样）。
• 一种拦截来自 WebView 的 HTTP 请求的方法。

这里的最后一项允许我们将 PDF 文件的内容流式传输到 WebView。 当前的 Android 实现会拦截来自 WebView 的 HTTP 请求，并将请求的 PDF 文件的内容传回。 实现可以在这里看到。

我是 Flutter 的新手，所以我可能弄错了一些术语，如果您需要澄清任何内容，请告诉我。

我们目前正在转向一种更容易结合 FlutterView 使用原生视图的方法：
https://docs.google.com/document/d/1DOfwpL6VojCAG_zjjcA_z5ekF7rTIohV8dWn2o7_IME/edit

我认为这更多是关于有一种方法可以将 WebView 放入 Flutter 小部件树中。 正如您在原始评论中所说，我们需要类似的东西来嵌入第三方非 Flutter 库提供的视频或地图。

关于将 webview 与 flutter 集成的任何更新？

看起来有人已经启动了一个插件来做全屏网页视图： https :

我认为做活动子集是一个很好的开始。 它将解锁一整套需要从 Web 登录获取 oauth 令牌的应用程序类型。

FWIW：这里是 webview 插件的 iOS 版本的 PR： https :

由于@toufikzitouni 👍 https://pub.dartlang.org/packages/flutter_webview_plugin，我们现在在 IOS 上有了 webview 插件

这不在我们的短期优先事项清单上。 移动到下一个里程碑。

拥有一个 webview 和一种与之交互的方式会很棒。 我想显示嵌入的 YouTube 视频并控制播放器。 现在我正在使用https://github.com/dart-flitter/flutter_webview_plugin ，但我在某些情况下使用了一些 hack。 例如，我在视频结束后更改 JavaScript 中的 webview URL，以便 flutter 应用程序接收 onUrlChange 事件，然后关闭 webview。

@csbenjamin您是否专门在寻找 YouTube，您更喜欢 https://developers.google.com/youtube/android/player/ 而不是 WebView 来控制？ 或者你还需要一个 WebView？ 如果您正在寻找 YouTube 特定播放器，请提交一个新错误，这绝对是一个合理的要求。 :)

是的，我正在寻找 YouTube 播放器。 我不需要来自 webview 的任何东西，只需要一个 YouTube 播放器。 我将开一个新问题。 谢谢

我们必须打开支付网络表单，这个功能对我们来说是个障碍😢

@megatolya webview 插件不能为你做这项工作？

@lejard-h
抱歉不行。 我们需要有机会在页面的任何位置呈现 Web 表单。 不仅在其他内容的顶部或在单独的页面上。 手动控制滚动（重新定位 webview）对我们来说似乎太复杂了。

我知道这个问题是设计问题，但恕我直言，这个功能非常重要，可以忽略。

这绝对是我们打算做的事情，我们同意这对许多用例至关重要。

遗憾的是，这个问题也会阻碍我们考虑 Flutter，因为我们也有一个与上面@jxson提到的类似的用例，以及 Basecamp 在这里发表的博客内容：
https://m.signalvnoise.com/basecamp-3-for-ios-hybrid-architecture-afc071589c25

单独使用 Flutter 编写一次并部署到两个移动平台已经是一种胜利。 但我们想更进一步，将我们所有的 Web 功能带入一个具有足够原生组件的混合应用程序中，使整个体验尽可能接近原生，而不需要不断跟上我们引入的新功能在我们的网络版本上。

关于与此问题相关的路线图的任何可以共享的内容都将非常有帮助。

我们现在正在进行一些代码更改，我们预计这些更改可能会使内联 WebViews 在 iOS 上与 Flutter 一起使用。 Android 上的 FlutterViews 中的内联 WebViews 有点远。 抱歉，我没有比这更详细的信息。 ：/

这绝对接近我们列表的顶部。

感谢更新。

在这一点上，我们可以判断这是一个测试版还是一个 1.0 版本阻止程序？

自从 Beta 1 发布以来，是否有关于 WebView 小部件支持的任何消息？

谢谢

@eseidelGoogle <<凹凸>>

我推荐关注https://github.com/flutter/flutter/issues/73 ，这两者所需的工作是相似的。 状态和我17天前报告的很相似，抱歉。 WebView 的情况与此处描述的 Maps 几乎相同： https :

当您考虑在 Flutter 中创建一个 Webview 时，允许从字符串加载 html 会很有用，同时为 webview 提供一个基本 url（从该 html 中引用的资源 - .css、.js、图像等 - 将被加载） ，这可以在 iOS（如下所示）和 Android 中完成。
webView.loadHTMLString(htmlString, baseURL: locationWhereResourcesAreLocated);

对我来说，如果没有功能齐全的 WebView 控件，Flutter 也不是一个选择，它可以加载 HTML、本地和远程 URL，执行 JavaScript 并在 WebView 中启用 Flutter 代码和 JavaScript 之间的通信。

关于将 Web View 与 Flutter 集成的任何更新？

是的，这对我也很有帮助。

同意 agreensh - 从字符串加载将是锦上添花。 也许也来自本地文件（至少在 Android 上？）？ 文件：URL 会为此工作吗？ 某种直接从 Assets 文件夹加载的方法？ 谢谢

@IanDarwin https://github.com/dart-flitter/flutter_webview_plugin/issues/23#issuecomment -367618709 包含一些在这里也应该适用的建议

我们计划在我们的应用程序中使用 flutter，但如上所述，当前的 sdks 不支持 webview 和其他 flutter 小部件，这是我们将 flutter 用作移动应用程序开发 sdk 的主要障碍。

在添加 IMO 之前，Flutter 不应达到稳定状态。

关于内联 WebView 的任何更新？

@jaiminmehtadxred我想也许您可以尝试使用不难的特定于平台的代码来实现 webview

@eseidelGoogle 有任何进展吗？ 虽然 flutter_webview_plugin 很棒，但 webview 不是内联的。 请帮助我们:)

我们有一个消息应用程序 (www.touchmoon.com)，它严重依赖可滚动区域内的 WKWebView 和 MKMapView（作为集合视图单元格）。 由于我们的 Android 应用程序落后，因此有一个强有力的举措使用 ReactNative 从头开始​​重写它（就像 Skype、Discord、Instagram 所做的那样）。
我喜欢 Flutter，但缺乏这个功能是一个我没有争论的突破点。
你有什么预测吗，这有可能成为 Flutter 一等公民吗？

在实现 webview 之前无法构建我们想到的应用程序......状态如何？ 这对于许多设计来说似乎非常重要。

没有内联 webview，应用程序看起来像......

https://gfycat.com/LawfulZanyGecko

@eseidelGoogle ，@mit-mit ，我知道我在这里要求很多，但是这是否有最小的机会可以移动到更早的里程碑？ 许多项目需要内联 webview，而当前的插件通常是一个糟糕的选择。 多谢你们！ ps 急切地等待 beta 4 中的帖子:)

我们正在与 WebView 团队一起研究各种解决方案。 然而，这可能需要一段时间。 目前我们没有时间估计，但我们正在努力。 ：/

我注意到 Flutter 发布了预览版。 这是否意味着第一个版本将不包含内联 WebView？

没有此功能的预览对我来说似乎有点不正统：失望：

我们的 1.0 版本中可能没有此功能。 我们正在积极努力，并会尽快以符合我们质量标准的方式提供。

如果您同时需要这样做，您可以从 Java/Kotlin 或 ObjectiveC/Swift 创建一个 OEM Web 视图并将其分层在 Flutter 的视图之上。 不幸的是，这不会与 Flutter 的其余小部件正确组合，这就是我们不提倡将其作为解决方案的原因。

很难预测。

我们正在努力解决的一个问题是支持哪些 Android 版本。 我们支持的版本越多，获得好的解决方案所需的时间就越长。 您对 Web 视图插件需要支持哪些版本的 Android 才可行有意见吗？

对于我们的用例，Android 6+ 应该足够好了。

对我来说，我认为 Android 5+ 还可以。

在我们的例子中也是 5+。 我们正在迅速降低支持 4.x 的开发速度
渴望玩第一个版本！

勒文。 2018 年 6 月 22 日 à 06:27，血心通知@ github.com a écrit：

对我来说，我认为 Android 5+ 还可以。

—
您收到此消息是因为您订阅了此线程。
直接回复本邮件，在GitHub上查看
https://github.com/flutter/flutter/issues/730#issuecomment-399317053 ，
或静音线程
https://github.com/notifications/unsubscribe-auth/AEFUX3nMYsc0KSQerrYlMd0vAkTPlUT4ks5t_HI9gaJpZM4GvC9x
.

Android 5+ 为我们服务

Android 5.x 拥有~20% 的市场份额，且呈强劲下滑趋势。
所以，如果你用 6 个月的时间来开发 5.0（少于 5%），将没有手机可以测试它。
:-)
如果它更容易，为什么不为旗舰机型 (7+) 开发它，发布它（以便我们可以玩它），并且随着我们的发展，您可以扩展对旧版 Android 的支持？

@iostriz不幸的是，根据我们的目标版本，我们必须采用完全不同的方法，因为每个版本引入了不同的 API。 所以如果 X 版本需要 N 个月，X-1 版本需要 N+5 个月，那么 X 版本需要 2N+5 个月，X-1 版本需要 N+5 个月，但版本只需要 N+5 个月X-1 和 X 同时。 如果这是有道理的。

5 及以上会很棒，因为它涵盖了大部分市场。 内联 webview 是许多应用程序的关键要求，请重新考虑此功能的优先级。

在 2018 年 6 月 21 日星期四晚上 10:09:44 -0700，Ian Hickson 写道：

@iostriz不幸的是，这取决于我们的目标版本是什么
采取完全不同的方法，因为不同的 API
每个版本都有介绍。 所以如果做 X 版本需要 N 个月，并且 N+5
几个月做 X-1 版，那么做 X 版需要 2N+5 个月
然后版本 X-1，但只有 N+5 个月才能同时执行版本 X-1 和 X
时间。 如果这是有道理的。

然后我会投票给 6+

5 及以上来自我们这边

5 及以上对我来说很棒

5+ 会很棒！

5+应该没问题

在我看来 5+ 应该是要走的路。

我想要一个非常棒的解决方案，而不是像 WKWebView，所以我准备等待或贡献。

@minikin你能更具体地说明你在 WKWebView 中遇到的问题吗？

我认为将 html 引擎作为 Flutter 二进制文件的一部分嵌入是不合理的。 所以我猜我们最终会得到一个解决方案，该解决方案委托给平台上可用的 html 引擎（在 iOS 上，这可能是 WKWebView）。

安卓 5+

@阿米尔
当然，例如，您目前无法使用适当的方法设置 cookie（iOS11、12beta）。 WKWebView 只是忽略了这一点。 所以你需要使用变通方法。

我想在 Flutter 中看到某种 WebView 的原因是
使用像 d3js 这样的库并呈现一些静态 HTML 页面。

而所有小部件的纯 Flutter 实现是理想的。
我认为我们需要在少数情况下例外，Web 视图就是其中之一。

如果可能的话（我认为应用商店政策可能是一个限制因素），纯 Flutter Web 视图实现（如：一切都在 Dart 中实现）将是一个巨大的项目，我猜至少颤动本身。

一旦解决了#7053，就可以使用嵌入网络浏览器代码（例如cef ）的插件。 我相信这种方法仍然会面临一些应用商店政策的挑战，并且会显着增加二进制文件的大小。

我认为我们对 web view 应该采取的合理和实用的方法是将平台的 web view 嵌入到 Flutter 中。 做我们正在做的事情涉及一些重要的技术挑战。 我认为我们应该使用这个特定问题来跟踪内联 Web 视图的进度。 我认为解决内联问题将解锁大部分 Web 视图用例，但我希望我们将逐步处理一长串 Web 视图问题（支持平台的 Web 视图功能 X），我认为在单独的问题中跟踪将更实用。

@amirh非常感谢您的澄清！

关于将 webview 与 flutter 集成的任何更新？

更新？

我们正在积极努力，您可以关注#19030 的进展。

@amirh ：耶！ ：+1：
@Hixie ：嘿 Hixie :) 我的应用程序也需要它。 Android 4.4 对我来说是必需的，因为许多旧设备都停留在它上面。

FWIW，我希望能够随应用程序一起提供特定的 Web 渲染引擎，将自己与设备附带的各种 WebView 实现以及由此产生的设备相关错误分离。 使用新的 WebView/Chromium 或更好的 GeckoView。 我认为这也应该解决大部分依赖问题？

您也许可以想出一个嵌入 Web 引擎的插件，我猜第一个阻止程序是#7053。 这样做可能会对发行版二进制文件大小产生重大影响（这对于某些应用程序可能没问题）。
我目前正在做的是在 Flutter 中嵌入平台的 web 视图。

是的，WebView 平台是合理的第一步，对于许多应用程序来说已经足够了。

在相关说明中，还有另一种在 flutter 应用程序中执行 JavaScript 代码的方法。 现在我依赖于创建一个 webview 插件并使用它。 问题是它使用平台通道，我必须异步运行 js。 我想在同步函数中运行它，而不必经过未来的构建器。

有任何想法吗？

@manujbahl没有其他办法。

美好的一天，你们都做得很好。 他们是否支持 flutter webView 插件上的 setJavaScriptCanOpenWindowsAutomatically ？

挂在这个列表中:)
我需要一个没有可见控件的简单内联 webview，只显示 html/css 并通过 API 使用 js、uri - 在一个免费大小的等 webview 小部件中：+1：

真正的 webview 对我来说并不有趣，但内联 html/css + js 和加载扩展内容的能力（如来自 google 或 js 库的字体）

有人尝试 #19030 AndroidView for Web View 吗？

@MisterJimson这里有一些 WIP： https :

你现在最多应该把它当作预览，有一些已知的错误，缺少 iOS 支持，API 界面非常小（在这一点上是故意的，直到我们弄清楚 iOS 的故事）。

大家好，我发布了适用于 Android 和 iOS 系统的“InAppBrowser”插件： https :

第一个版本只是流行的 cordova-plugin-inappbrowser 的移植，以使其与 Flutter API 一起工作..我正在努力更新！

@pichillilorenzo你的插件不是内联的，这个频道是关于让浏览器保持一致

@MichaelSowah是的，我知道，这就是我写“我正在努力更新”的原因！ 我也会在AndroidView和 iOS 发布时使用它

编辑：为什么这里有“拇指向下”表情符号？ 至少给一些解释

iOS 有什么更新吗？

你能解释一下为什么它发行了多年，但我们没有在颤振中得到任何东西吗_ webview ？ 自 _NCSA Mosaic_ 发布以来， HTML 、 CSS和JS都是展示最大的技术演变吗？ 什么是技术（或框架），_称为应用程序开发的未来_，没有_网络视图_？ 不是关于 _Google_ the web一切吗？ ：眨眼：

这是我不明白的一点：问题：

例如，_inline webview_ 意味着拥有HTML 、 CSS和希望JS的功能和 _UI_ 来显示像网络这样的东西，比如 _gitter webapp_ 中消息中的 _code_，它_slack App_ 没有能力，包括用于 _syntax highlighting_ 等的JS库。

其他widgets和webview之间的区别就像所有网络和所谓的RichText框之间的区别......

我看到在 _hybrids_ 和框架中所做的一切之间存在差距，比如 flutter，但是，webview 的力量只不过是浏览器、_electron_、_atom_ 和 _VS Code_ 的力量，以及我们喜爱的所有这些东西的力量_每天_。

：使困惑：

@flddr仅仅因为它是一项重要功能并不意味着它可以轻松快速地添加。 而是相反。
您似乎认为 Google 拥有无限的资源，并且向团队添加足够多的额外开发人员就足以获得立竿见影的效果。 可悲的是，这不是世界的运作方式。

你可以放心，Flutter 团队已经意识到这个特性的重要性，你可以在https://github.com/flutter/plugins/tree/master/packages/webview_flutter 中跟踪进度

@zoechi ups，谢谢，我从来不想这么说:confused:

我的猜测是，为了在 _hybrids_ 和 _natives_ 之间保持差距，它在开发中被更多地丢弃，因为 flutter UI 本身非常强大和干净，而在 webview 中做事的可能性可能会以较低的质量结束（例如，缺少 _material design_ 或那些点）。 因为webview经常被误用于所有事物（_quick ndirty_）

谢谢你的链接

@flddr我认为主要是他们不想在 Dart 中重写浏览器（有充分的理由），而是提供本机功能，这需要为 Flutter 实现附加功能。
此功能最近可用，此后正在实施 webview。

https://pub.dartlang.org/packages/flutter_webview_plugin （社区努力）已经有一段时间了，但它的缺点是它总是显示在 Flutter 小部件之上。 例如，如果有重叠，打开一个抽屉菜单会在 webview 后面打开它。
新插件将与其他 Flutter 小部件配合使用。

@zoechi你是对的 - 我已经完全监督了 dart_ 中的 _rewrite。 我只知道 flutter 是我认为应用程序开发的未来，工具很棒，dart 很棒 - 但我无法深入研究，因为我实际上正在开发我的后端。 我只是每天都在查看 flutter.io 并等待 1.0 - 有时，这种充满希望的等待会引起人们谈论任何事情，主要是发生了一些事情。

抱歉错过了关于webview

顺便说一句：对不起，我知道你们所有人 _google_ 怎么样，以及你们所有的辛勤工作，但是，是的，你们是 _google_。 没有其他的。 我与 _google_ 的第一次接触是我使用 _altavista_ 的最后一天。

所以，如果我可以押注一家会赢得比赛的公司，我会押注 _google_。

感谢您提供信息:) 对于这个问题，我无话可说：)

Flutter 使用 Skia 来渲染，而 Chrome 使用 Skia 来渲染，所以看起来它应该是一个简单的转换。 但是你不能通过这种方式在 Flutter 中添加浏览器，因为任何 Flutter 应用程序都将被禁止在 Apple Store 上运行。 如果没有跨平台能力，Flutter 就会被抛弃。 谷歌在这个问题上花时间是正确的。

https://www.howtogeek.com/184283/why-third-party-browsers-will-always-be-inferior-to-safari-on-iphone-and-ipad/

@Rockvole很有趣👍

最后，我发布了flutter_inappbrowser的新版本 (v0.5.1)，其中初步支持内联 WebView （ InAppWebView类）！ 很明显，这个 Widget 目前仅适用于 Android 并且存在一些限制，因为AndroidView不够稳定。

但是，您已经可以玩玩它了。 有很多功能和事件可以测试和使用！ 可以在插件存储库的 README.md 文件中找到内联 WebView 的示例。

编辑 1 ：发布了新版本 ( 1.0.1 )，同时支持Android和iOS内联 webview 小部件！ 🎉

编辑 2 ：它已重命名为flutter_inappwebview 。 当前版本是2.0.1 ！ 有很多新的事件、选项和方法。

我只是好奇：在Google Developer Days China（上个月）中提到官方WebView插件应该与开发者预览版2一起发布。但是，这个插件webview_flutter仍在开发中： https://github .com/flutter/plugins/tree/master/packages/webview_flutter

@imWildCat感谢您参加 GDD 中国。 为了澄清起见，我们在 GDD 演示了 WebView 小部件的 _preview_。 我检查了 GDD 主题演讲的视频录制(55:12)，以确保我们没有说它已发布。 尽管如此，我们很抱歉让您觉得该插件已发布。

@InMatrix对不起，我的误解。 非常感谢你的解释，我真的很感激。 我期待官方 WebView 插件的发布。

flutter/plugins#890 为 webview_flutter 插件添加了 iOS 支持。
内联 webview 所基于的平台视图嵌入支持仍处于早期预览阶段（请参阅 https://github.com/flutter/flutter/issues/19030#issuecomment-437534853）。

未解决的问题被标记为平台视图和/或web视图标签，请对您关心的问题进行投票以帮助我们确定优先级。

请注意，如果您想在 iOS 上试用它，则需要启用预览标志，请参阅有关以下内容的更多详细信息：
https://github.com/flutter/flutter/issues/19030#issuecomment -437534853

没有可用的 WebView 对我个人来说真的是一个交易破坏者。
flutter_inappbrowser 是一个很棒的包，它非常接近于完全可用，但仍然缺乏键盘支持。 不幸的是，我只是要构建一个代码编辑器应用程序......

祝贺1.0获得有史以来最好的移动框架 :tada:

现在等待webview :relaxed:

澄清一下：

我们正在使用webview标签跟踪问题和缺失的功能，如果您关心特定问题，您可以通过提交问题（如果还没有问题）或对现有问题进行投票来提供帮助。 PR当然也欢迎😄

@amirh很抱歉给您带来问题。 我们正在认真考虑为即将到来的项目转移到 Flutter，但我们依靠 WebView 来工作（内联，flutter_webview_plugin 不是一个选项）。 您有关于即将到来的更新或路线图的任何信息吗？ 非常感谢您的任何回复，继续努力，愿 Flutter 的爱传播到世界各地。

@danielRi https://pub.dartlang.org/packages/webview_flutter

对于我的问题，这个话题非常有趣，在为 Flutter 寻找合适的 Web 视图苦苦挣扎后，我遇到了这个话题。 不幸的是，当我尝试打开键盘时，这个新插件（仍然是开发者预览版）在 Android 上有一个大问题。 发布时会修复吗？

我认为外国函数接口+ webkit是最好的方法。 内联 android webview 或 ios wkwebview 不是一个好主意

我认为外国函数接口+ webkit是最好的方法。 内联 android webview 或 ios wkwebview 不是一个好主意

有利有弊（显而易见的是二进制大小）。
我肯定看到在某些用例中捆绑 Web 引擎将是首选。
可以通过实现平台接口将其添加为替代的webview_flutter实现。 如果有人试一试，我很想了解它！