flutter 中使用 WebView加載H5頁面異常net:ERR_CLEARTEXT_NOT_PERMITTED

最近有個flutter項目中根據搜索結果跳轉到相應的H5頁面發現老是報錯，曾現在閑暇拉出來解決哈

先來看一個搜索功能的測試

已進入詳情頁面就提示錯誤，尷尬了。

只有去檢測代碼了撒

Search.dart

    SearchItem item = searchModel.data[position];
    print(item.url);
    return GestureDetector(
      onTap: () {
        Navigator.push(
            context,
            MaterialPageRoute(
                builder: (context) => WebView(
                      url: item.url,
                      title: '詳情',
                    )));
      },
      

檢測該處並無問題，於是繼續向上查找，找到了Search_model.dart

	class SearchModel{
	  String keyword;
	  final List<SearchItem> data;
	  SearchModel({this.data});
	  factory SearchModel.fromJson(Map<String,dynamic>json){
	    var dataJson = json['data'] as List;
	    List<SearchItem> data = dataJson.map((i)=>SearchItem.fromJson(i)).toList();
	    return SearchModel(data:data);
	  }
	}

確認該處也沒問題，那么問題可能是json格式化類SearchItem

class SearchItem

	class SearchItem{
	  final String word;  //xx酒店
	  final String type;  //hotel
	  final String price ;  //實時計價
	  final String star ;  //豪華型
	  final String zonename ; //虹橋
	  final String districtname ; //上海
	  final String url ;
	
	
	  SearchItem({this.word, this.type, this.price, this.star, this.zonename,
	    this.districtname, this.url});
	
	  factory SearchItem.fromJson(Map<String,dynamic>json){
	    return SearchItem(
	        word: json['word'],
	        type: json['type'],
	        price: json['price'],
	        star: json['star'],
	        zonename: json['zonename'],
	        districtname:json['districtname'],
	        url:json['url']
	    );
	  }
	
	  Map<String, dynamic> toJson(){
	    Map<String,dynamic> data = new Map<String,dynamic>();
	    data['icon'] = this.word;
	    data['title'] = this.type;
	    data['price'] = this.price;
	    data['star'] = this.star;
	    data['zonename'] = this.zonename;
	    data['districtname'] = this.districtname;
	    data['url'] = this.url;
	
	    return data;
	  }
	}
	

打眼看去是否也沒什么問題呀，那為是么無法進入詳情頁面呢，經過再次閱讀代碼發現toJson方法好像並無用處（這個好像是上次測試
Text(object)渲染對象，需要進行序列化時留下的）

於是果斷干掉，再測試(當初斷定是這個引起的因為我刪除這個方法測試過一次OK了)

但是事實並非想象的那么簡單（gradle.properties和 build.gradle的dependencies都改了一遍–抓狂），再次測試依然一樣報錯

最后一次次找，才發現實從Android 9.0（API級別28）開始，默認情況下禁用明文支持。因此http的url均無法在webview中加載

解決方法：在AndroidManifest.xml的applaction節點中添加android:usesCleartextTraffic="true" 即可（害我找了半天）

如：

    <application android:name="io.flutter.app.FlutterApplication" android:label="flutter_test" android:usesCleartextTraffic="true" android:icon="@mipmap/ic_launcher">
		<!-- ... another configure -->
	</application>
	

另外如果是ios 則在 info.plist中增加

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

---

再測試哈

---

總算OK了，特此記錄，避免再入坑