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);
    }

最后

如果想要成为架构师或想突破20~30K薪资范畴，那就不要局限在编码，业务，要会选型、扩展，提升编程思维。此外，良好的职业规划也很重要，学习的习惯很重要，但是最重要的还是要能持之以恒，任何不能坚持落实的计划都是空谈。

如果你没有方向，这里给大家分享一套由阿里高级架构师编写的《Android八大模块进阶笔记》，帮大家将杂乱、零散、碎片化的知识进行体系化的整理，让大家系统而高效地掌握Android开发的各个知识点。

相对于我们平时看的碎片化内容，这份笔记的知识点更系统化，更容易理解和记忆，是严格按照知识体系编排的。

全套视频资料：

一、面试合集

二、源码解析合集

三、开源框架合集

欢迎大家一键三连支持，若需要文中资料，直接扫描文末CSDN官方认证微信卡片免费领取↓↓↓