Flutter WebView遇到的坑

在 Flutter 上加载 H5 页面，一般都会使用 webview_flutter 组件，其地址为：https://pub.flutter-io.cn/packages/webview_flutter。按照官网配置使用很简单，但如果仅仅只是做基本的配置，在实际过程中你会发现有很多功能都不满足。

1. 在 Android 中不能响应 HTML 的文件选择标签

如果你做过原生 Android 开发，在 Android 平台的 WebView 中，默认 WebView 同样是不支持 input file 类型标签的，需要自己根据 WebView 提供的回调函数来实现对应的功能。相比 iOS 就简单了，iOS 的 WebView 默认就实现了这些功能，做 Android 开发的同学都会投来羡慕的眼神，为了让 WebView 支持这些功能，Android 开发同学需要自己实现拍照、从相册、从文件里选取图片，然后回传给 WebView ，这样 H5 里的文件选择标签才能生效。
很遗憾，在 Flutter Android 平台里，这些同样是不支持的。要在 Android 平台实现这些功能，一般需要引入 webview_flutter_android 组件，其地址为：https://pub.flutter-io.cn/packages/webview_flutter_android。

在 WebView 对应的 Stage 类中：

  // WebView 对应的 controller，这里省去其他若干代码
  final WebViewController controller = WebViewController();

  @override
  void initState() {
    super.initState();    
    //判断是 Android 平台的 WebView
    if (WebViewPlatform.instance is AndroidWebViewPlatform) {
      final AndroidWebViewController androidController = controller.platform as AndroidWebViewController;      
      //处理文件选择，只有 AndroidWebViewController 才暴露出 setOnShowFileSelector 方法，这里才能监听文件选择
      androidController.setOnShowFileSelector(_androidFilePicker);
    }
    //WebView 加载H5地址
    controller.loadRequest(Uri.parse(widget.url));
  }

AndroidWebViewController.setOnShowFileSelector 的方法定义如下：

  /// Sets the callback that is invoked when the client should show a file
  /// selector.
  Future<void> setOnShowFileSelector(
    Future<List<String>> Function(FileSelectorParams params)?
        onShowFileSelector,
  )

点击 H5 的文件选择按钮时，会触发上述回调，需要自己在该回调函数里处理文件选择、拍照、相册选文件等逻辑处理，处理成功返回一个 Uri 数组，如果失败则返回一个空数组即可。

Future<List<String>> _androidFilePicker(FileSelectorParams params) async {
    _imagePicker ??= ImagePicker();
    //手机上有权限限制，一般我们只支持图片文件选择
    if (params.acceptTypes.any((type) => type == 'image/*')) {
      //这里可以显示 拍照、相册 选择弹窗，图片选择完成后，返回图片的 uri 地址
      ......
    }  
    return [];
  }

2. 在 Android 中设置字体大小

设置字体大小同样需要采用 webview_flutter_android 组件，一般如下设置：

   if (WebViewPlatform.instance is AndroidWebViewPlatform) {
      final AndroidWebViewController androidController = controller.platform as AndroidWebViewController;
      //textZoom 默认值是 100
      androidController.setTextZoom(250);
    }