flutter中使用webview_flutter插件

仅记录学习
首先安装插件

flutter pub add webview_flutter

定义一个实例

final controller = WebViewController();

实例化WebViewController

在initState中

double progressCircle = 0.0;
  @override
  void initState() {
    super.initState();
    controller
      ..setJavaScriptMode(JavaScriptMode.unrestricted)
      ..setBackgroundColor(const Color(0x00000000))
      ..setNavigationDelegate(NavigationDelegate(
          onProgress: (int progress) {
            setState(() {
              progressCircle = progress / 100.0;  //计算网页加载进度
            });
          },
          onPageStarted: (String url) {},
          onPageFinished: (String url) {},
          onWebResourceError: (WebResourceError error) {},
          onNavigationRequest: (NavigationRequest request) {
            return NavigationDecision.navigate;
          }))
      ..loadRequest(Uri.parse('https://pub-web.flutter-io.cn/packages/webview_flutter'));
  }

代码解释：

• setJavaScriptMode: 用于设置WebView中JavaScript的模式
  有两种模式：
  • disabled: 禁用JavaScript，WebView中的JavaScript代码不会被执行;
  • unrestricted: 启用JavaScript，WebView中的JavaScript代码可以自由执行;
• setBackgroundColor: 设置页面背景颜色
• setNavigationDelegate: 用于设置导航委托，例如. 这里我们想要一个网页加载进度条，我们可以使用
  • onProgress : 来计算好加载的进度（当然还有其他作用）
  • onPageStarted: 开始加载新页面时被调用
  • onPageFinished: 加载完成页面后被调用
  • onWebResourceError: 加载资源时发生错误时被调用
  • onNavigationRequest: 是导航代理的一个回调方法（个人理解：根据要加载的网页的url，在此可进行某些判断，并做出响应）
    • NavigationDecision.prevent: 阻止导航继续进行
    • NavigationDecision.navigate: 允许导航继续进行，并在WebView中打开链接
      • startsWith: 用于检查一个字符串是否以指定的前缀开头
      • endWith: 用于检查一个字符串是否以指定的后缀结尾
• loadRequest: 要加载的网页链接

在Widget中使用插件，使用WebViewWidget
(这里的controller是上面定义的那个实例）

WebViewWidget(
	controller: controller,
)

实现加载的进度条，代码如下：
这里面的progressCircle，就是上面代码中计算进度那里的数据

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text(
            '测试',
            style: TextStyle(color: Colors.white),
          ),
          backgroundColor: Colors.blue,
          leading: IconButton(
            icon: const Icon(
              Icons.close,
              color: Colors.white,
            ),
            onPressed: () {
              Navigator.pop(context);
            },
          ),
        ),
        body: Column(
          children: [
            Expanded(
              child: WebViewWidget(
                controller: controller,
              ),
            )
          ],
        ));
  }

运行结果：