在Flutter中使用Webview打开网页

码字辛苦！转载请注明出处！

0.前言

因为众所周知的原因，谷歌和苹果都默认禁用了http明文协议，这本身是一件好事

糟糕的是，许多网站资源文件还是使用了http协议，这对于从安卓/ios转向flutter的开发者来说

——又是一个深坑

话不多说，我作为一个从安卓转向flutter的开发者，总结一下经验，希望能帮到和我一样深受其害的朋友

1.配置安卓http明文传输权限

我知道你在想什么，导入webview和使用的步骤在后面，但这里的准备工作没做好的话，开什么网页都只能看到白板～

打开flutter中的Android项目：/android/app/src/main/AndroidManifest.xml

找到<Application>标签，添加如下内容：

    <application
        ...
        
        添加这一行
        android:usesCleartextTraffic="true"
        
        ...>

2.配置ios http明文传输权限

打开flutter中的ios项目：/ios/Runner/Info.plist

添加如下内容：

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

3.清理缓存，停止app（！！！非常重要！！！）

由于flutter的热重载机制，会导致上述修改不起作用，要让上述修改生效，需要执行以下两步：

1.如果app已经运行，需要点击ide上的停止按钮，杀死app，确保下次不会从热重载启动

2.使用命令行终端，进入项目根目录，执行以下命令清理缓存

flutter clean

执行完成后，代码会全红，别紧张，只不过清理掉了依赖库而已

4.引入webview_flutter库

在pub中添加依赖：

  webview_flutter: ^2.0.8

5.重新下载依赖

执行以下命令

flutter pub get

抄作业：

以下是一个超级简单的webview demo，你也可以按webview_flutter的文档自己编写

import 'dart:io';

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

main() {
  runApp(WebViewApp());
}

class WebViewApp extends StatefulWidget {
  const WebViewApp({Key? key}) : super(key: key);

  @override
  _WebViewAppState createState() => _WebViewAppState();
}

class _WebViewAppState extends State<WebViewApp> {
  @override
  void initState() {
    super.initState();
    if (Platform.isAndroid) {
      WebView.platform = SurfaceAndroidWebView();
    }
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: WebView(
        initialUrl: "https://www.baidu.com/",
        javascriptMode: JavascriptMode.unrestricted,
        onPageStarted: (String url) {
          print("onPageStarted $url");
        },
        onPageFinished: (String url) {
          print("onPageFinished $url");
        },
        onWebResourceError: (error) {
          print("${error.description}");
        },
      ),
    );
  }
}

现在，就可以运行app测试了～

最后是乞讨环节