一招搞定Flutter WebView 白屏、闪退、内存泄露问题

2022-12-17 01:26:57

解决 Flutter WebView 加载含图片本地富文本闪退问题

在使用 Flutter WebView 加载含有图片的本地富文本内容时，某些系统（例如鸿蒙、部分 OPPO 和 vivo 系统）可能遇到闪退问题。本文将深入探讨问题根源并提供一种巧妙的解决方案，彻底解决此问题。

问题根源

Flutter WebView 在加载 HTML 内容时，会在一个新线程中解析 HTML 内容。当 HTML 内容包含图片时，Flutter WebView 会下载图片并用本地文件路径替换图片的 URL。然而，如果图片下载失败或 URL 不正确，就会导致 Flutter WebView 闪退。

解决方案：Base64 编码

为了解决这个问题，我们可以使用 Base64 编码将图片转换为字符串，然后将字符串加载到 Flutter WebView 中。这样，就不需要下载图片，也可以在 Flutter WebView 中显示图片。

具体步骤

1. 将图片转换为 Base64 编码字符串

可以使用在线工具或代码将图片转换为 Base64 编码字符串。

2. 将 Base64 编码字符串加载到 Flutter WebView 中

可以使用 loadHtmlString 或 loadDataWithBaseURL 方法将 Base64 编码字符串加载到 Flutter WebView 中。

3. 在 Flutter WebView 中显示图片

可以使用 Image.network 或 Image.memory 方法在 Flutter WebView 中显示图片。

示例代码

// 将图片转换为 Base64 编码字符串
String base64String = base64Encode(imageBytes);

// 将 Base64 编码字符串加载到 Flutter WebView 中
webView.loadHtmlString("<img src=\"data:image/png;base64,$base64String\">", baseUrl: "file:///android_asset/");

// 在 Flutter WebView 中显示图片
Image.network("data:image/png;base64,$base64String");