前言
在 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 ，以提高數據傳輸的安全性。
