当前位置：首页 > article >正文

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

article 2025/1/22 17:37:26

这个问题，网上一搜索，就是要去修改别人写好的插件。搞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，我个人非常不喜欢去修改插件，一个是麻烦，二是插件如果有更新，还要去注意自己改的东西有没有受影响，非常麻烦。

查看全文

http://www.kler.cn/a/513785.html