Flutter WebView加载HTTP页面不显示？这个方法让你轻松解决

前言

在 Flutter 项目中，当集成 WebView 并尝试加载 HTTP（非 HTTPS ）地址时，可能会遇到页面加载失败，仅显示白屏的问题。

这主要是因为现代移动操作系统出于安全考虑，默认限制了 HTTP 流量的加载。

不过，通过适当的配置，我们可以让应用信任并加载 HTTP 内容。

以下是针对 Android 和 iOS 平台的详细解决方案。

Android平台解决方案

第一步：修改 AndroidManifest.xml

首先，你需要在 Android 项目的 AndroidManifest.xml 文件中设置 networkSecurityConfig 属性，以允许应用处理非安全的网络请求。

1、打开 android/app/src/main/AndroidManifest.xml 文件。

2、在 <application> 标签中添加 android:networkSecurityConfig 属性，指向你的网络安全配置文件。

<application
    ...
    android:networkSecurityConfig="@xml/network_security_config">
</application>

第二步：创建network_security_config.xml

1、在 android/app/src/main/res/xml 目录下（如果目录不存在，则需要创建它）创建一个名为 network_security_config.xml 的文件。

2、在该文件中添加以下内容，以允许应用处理明文流量（HTTP请求）：

<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
    <base-config cleartextTrafficPermitted="true">
        <trust-anchors>
            <certificates src="system" />
            <certificates src="user" />
        </trust-anchors>
    </base-config>
</network-security-config>

这个配置告诉 Android 系统，你的应用将允许非加密的网络流量（即 HTTP 请求）。

iOS平台解决方案

对于 iOS 平台，你需要在项目的 Info.plist 文件中添加特定的键和值来允许应用加载 HTTP 内容。

第三步：修改Info.plist

1、打开 ios/Runner/Info.plist 文件。

2、添加以下键和值来允许应用加载任意网络内容（包括 HTTP ）：

<key>NSAppTransportSecurity</key>
<dict>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
</dict>

注意，虽然这种方法可以解决问题，但它会降低应用的安全性，因为它允许加载任何来源的网络内容。

在生产环境中，建议尽可能使用 HTTPS。

总结

通过上述步骤，你可以解决 Flutter 项目中 WebView 加载 HTTP 地址时出现的白屏问题。

不过，请记得在发布应用时重新评估这些设置，以确保它们不会对你的应用安全造成威胁。

如果可能的话，最好将你的 Web 服务迁移到 HTTPS ，以提高数据传输的安全性。

– 欢迎点赞、关注、转发、收藏【我码玄黄】，各大平台同名。