Bootstrap

优雅解决webview_flutter不支持安卓选择图片视频文件问题

这个问题,网上一搜索,就是要去修改别人写好的插件。 搞Flutter开发,尽量不要去修改别人的插件 ,特别是像 webview_flutter 这种比较大的官方插件。 相信我,你拿捏不了它。 

主要问题就是: webview_flutter 在安卓上加载H5,如果需要上传图片、视频、文件,就点击没反应。 

解决办法 : 

不要去修改 webview_flutter_android 插件,这非常得不优雅。

直接在Flutter端,我们的代码层解决就好了。 看我代码,

第一步,先判断是安卓端,才解决这个问题, 先找到 AndroidWebViewController

if (Platform.isAndroid) {
      final myAndroidController = _controller.platform as AndroidWebViewController;
      myAndroidController.setOnShowFileSelector(_androidFilePicker);
    }

*这里的  _controller , 就是 WebViewController。 

 第二步, 实现 _androidFilePicker 方法: 

Future<List<String>> _androidFilePicker(FileSelectorParams params) async {
    FilePickerResult? result = await FilePicker.platform.pickFiles();

    if (result != null) {
      String filePath = result.files.single.path!;
      String fileName = result.files.single.name;

      // Convert the file to base64
      List<int> fileBytes = await File(filePath).readAsBytes();

      //convert filepath into uri
      final filePath1 = (await _getCacheDirectory()).uri.resolve(fileName);
      final file = await File.fromUri(filePath1).create(recursive: true);

      //convert file in bytes
      await file.writeAsBytes(fileBytes, flush: true);

      return [file.uri.toString()];
    }

    return [];
  }
  Future<Directory> _getCacheDirectory() async {
    // Use path_provider to get the temporary directory (cache directory)
    return await getTemporaryDirectory();
  }

这样就可以解决了。 是不是非常得优雅, 

当然了,  这里使用了 FilePicker ,你也可替换成你想用的,比如 ImagePicker, 或者别的;

你也可以判断一下 FileSelectorParams ,根据不同类型,来选用不同的 图片、视频、文件选择器。 

搞Flutter,我个人非常不喜欢去修改插件,一个是麻烦,二是插件如果有更新,还要去注意自己改的东西有没有受影响,非常麻烦。 

;