如何在Android原生Webview应用中运行Flutter Web？

Question

我正在尝试使用原生 Android 中的 Webview 显示 flutter Web 应用程序。但是页面显示空白页。

这是代码：

class MainActivity : AppCompatActivity() {

private lateinit var webView: WebView

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)

    setContentView(R.layout.webview_test)
    webView = findViewById(R.id.webview)
    webView.settings.setJavaScriptEnabled(true)

    webView.loadUrl("http://localhost:5011/#/login")

}

Web 应用程序在模拟器浏览器中运行良好。

Android 应用程序中的 Webview 浏览器出现错误：

022-10-19 09:53:02.040 21184-21184/com.example.kotlinwebview I/chromium: [INFO:CONSOLE(82)]“从服务人员加载应用程序。”， 来源：http://localhost:5011/ (82) 2022-10-19 09:53:24.678 21184-21184/com.example.kotlinwebview I/铬： [INFO:CONSOLE(52119)] “来自 dart:developer 的 registerExtension() 只是 在开发人员事件的构建/运行/测试环境中受支持 方法挂钩已设置。”，来源： http://localhost:5011/dart_sdk.js (52119) 2022-10-19 09:53:25.370 21184-21184/com.example.kotlinwebview I/铬： [INFO:CONSOLE(52101)] “来自 dart:developer 的 postEvent() 只是 在开发人员事件的构建/运行/测试环境中受支持 方法挂钩已设置。”，来源： http://localhost:5011/dart_sdk.js (52101) 2022-10-19 09:53:25.453 21184-21184/com.example.kotlinwebview I/chromium：[信息：控制台（5067）] “未捕获（承诺）错误”，来源： http://localhost:5011/dart_sdk.js (5067) 2022-10-19 09:53:25.453 21184-21184/com.example.kotlinwebview I/chromium：[信息：控制台（5067）] “未捕获（承诺）错误”，来源： http://localhost:5011/dart_sdk.js (5067

在Android原生Webview中运行Flutter Web应用程序需要设置什么配置吗？

Answer 1

我推荐一个可以轻松管理代码并节省时间的软件包。

包链接：https://pub.dev/packages/flutter_inappwebview

在 Android 上使用 Chrome 自定义选项卡的应用内浏览器/在 iOS 上使用 SFSafariViewController。

Answer 2

解决方案是不要从原生 Android 应用程序执行此操作，而是从 Android 编译的 Flutter 应用程序执行此操作。幸运的是，Flutter WebView 可以渲染使用 Flutter Web 制作的网页。