flutter 中使用 WebView加载H5页面异常net:E

最近有个flutter项目中根据搜索结果跳转到相应的H5页面发现老是报错，曾现在闲暇拉出来解决哈

先来看一个搜索功能的测试

image
image

已进入详情页面就提示错误，尴尬了。

只有去检测代码了撒

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>
    

---

再测试哈

---

image
image

总算OK了，特此记录，避免再入坑