[移动开发]webview_flutter官方插件选择文件、图片的问题

前言

webview_flutter官方的webview插件，很多功能缺失，现在H5有上传图片的需求，但官方的插件并不支持。

点击H5中的选择文件，没有任何响应，问题issues，官方库的issues上已经有提出相关问题。

原因分析

H5要想调用原生选择图片功能，需要webview重写WebChromeClient类中的onShowFileChooser方法。

解决方案

使用其他完善的webview替代

• flutter_inappwebview 这个库目前最完善
• flutter_webview_plugin

参考其他webview插件实现，移植相关代码

参考flutter_inappwebview中的onShowFileChooser方法，进行相关移植，基于webview_flutter-2.0.13版本改造。源码分支copy_inappwebview_select_file_20210930，这个实现方式没有使用新的Activity，而是直接监听了OnActivityResult

网友提出的PR，不过审核还没通过，个人验证可行

相关PR webview_flutter Add file chooser on Android 已经有网友提出PR，但还没合并到主分支。

提取代码，源码分支copy_net_select_file_20210930，实现方式是打开了一个透明的Activity去选择图片，然后再关闭。

其他问题

由于官方的webview_flutter插件只实现了基本功能，能用inappwebview代替最好使用inappwebview，功能较为强大。但inappwebview扩展功能较多，可能会引起奇怪问题，目前个人使用还挺好。

一些常见功能，但webview_flutter还不能使用，可以根据自己情况去做适配

1. 加载http图片
2. H5需要使用拍照、选择图片等功能。
3. 允许定位GeolocationPermissionShowPromptResponse。
4. 隐藏进度条

关于H5底部的输入框，键盘弹起会挡住的问题

可以使用以下方式

Scaffold(
      resizeToAvoidBottomInset: Platform.isIOS ? false : true,
      ...
      body: SafeArea(
      	child:	 WebView()
      )
）

最主要的地方是resizeToAvoidBottomInset属性，默认为true，从属性理解上来看

大致意思就是，在true的情况下，防止组件内widget被键盘遮挡。这个属性在android有效。但在ios这个属性与android相反，可能会出现H5中的输入框被顶到页面上部。第一张图是H5的底部输入框位置错乱，第二章图就是正常。
所以resizeToAvoidBottomInset: Platform.isIOS ? false : true，该值在ios为false就不会造成输入框位置错误，在android为true，就不会在弹出键盘时挡住input输入框。