九、Flutter之webview

Flutter的webview常用的第三方库有flutter_webview_plugin、webview_flutter，后者的文档较少，暂先学习flutter_webview_plugin。

一、flutter_webview_plugin

添加依赖

flutter_webview_plugin: ^0.3.0

导入包

import 'package:flutter_webview_plugin/flutter_webview_plugin.dart';

iOS端info.plist配置，其中NSAppTransportSecurity节点是为了支持http协议

<key>io.flutter.embedded_views_preview</key>
    <true/>
<key>NSAppTransportSecurity</key>
    <dict>
        <key>NSAllowsArbitraryLoads</key>
        <true/>
    </dict>

一个简单的demo

    new MaterialApp(
      routes: {
        "/": (_) => new WebviewScaffold(
          url: "https://www.baidu.com",
          appBar: new AppBar(
            title: new Text("Widget webview"),
          ),
        ),
      },
    );

要监听链接跳转的话，实现onUrlChanged即可

  final _urlCtrl = TextEditingController(text: selectedUrl);

  @override
  void initState() {
    super.initState();
    ...

    _urlCtrl.addListener(() {
      selectedUrl = _urlCtrl.text;
    });

    // Add a listener to on url changed
    _onUrlChanged = flutterWebViewPlugin.onUrlChanged.listen((String url) {
      if (mounted) {
        setState(() {
          //这里拦截url变化，可以实现点击号码拨号
          _history.add('onUrlChanged: $url');
          if(url.startsWith('tel:')){
            print(url);
            launch(url);
          }
        });
      }
    });
  }

二、webview_flutter

添加依赖

webview_flutter:  ^0.3.3+1

导入包

import 'package:webview_flutter/webview_flutter.dart';

iOS端info.plist配置

<key>io.flutter.embedded_views_preview</key>
    <true/>
<key>NSAppTransportSecurity</key>
    <dict>
        <key>NSAllowsArbitraryLoads</key>
        <true/>
    </dict>

一个简单的demo

          return WebView(
          initialUrl: 'https://www.baidu.com',
          javascriptMode: JavascriptMode.unrestricted,
          onWebViewCreated: (WebViewController webViewController) {
            _controller.complete(webViewController);
          },
          // TODO(iskakaushik): Remove this when collection literals makes it to stable.
          // ignore: prefer_collection_literals
        );

但是在webview里点击链接跳转的时候，测试机有时会跳转到系统浏览器上，并且点击文本框无法弹出键盘，交互性很弱。

二者共同的缺点是与javascript难以交互，目前只能实现Flutter->JS传递信息，还没找到可以进行完美交互的第三方库。并且一些常见的协议还不支持，比如拨号和调用摄像头等，期待后续完善。