Flutter Android端InAppWebView配置：解决Plaid验证内嵌相机调用及照片保存问题

嘿，我之前在做Flutter项目集成Plaid的时候也碰到过几乎一模一样的问题，折腾了好一阵才搞定，我来给你梳理下解决思路和具体配置：

先明确Plaid在Android上的相机行为 #

首先给你吃个定心丸：Plaid的Web验证流在Android上是支持内嵌相机的，但如果WebView的媒体权限、内嵌媒体配置没做好，就会自动 fallback 到系统相机。不过你后来提到的核心问题——系统相机拍完照后没法把照片回传给Plaid流程，这个主要是Android的权限配置、WebView的文件访问回调没设置对导致的。

一、调整InAppWebView配置以支持内嵌相机 #

你当前的initialSettings已经有了一些基础配置，但还缺几个关键参数，我给你补上：

initialSettings: InAppWebViewSettings(
  javaScriptEnabled: true,
  useOnDownloadStart: true,
  mediaPlaybackRequiresUserGesture: false, // 必须设为false，允许自动播放媒体流（包括相机预览）
  allowsInlineMediaPlayback: true, // 开启内嵌媒体播放，对应相机预览的内嵌显示
  allowFileAccess: true, // 允许WebView访问文件系统，相机拍照涉及临时文件读写
  allowContentAccess: true, // 允许访问内容提供者的资源
  allowFileAccessFromFileURLs: true, // 允许从文件URL加载资源
  allowUniversalAccessFromFileURLs: true, // 允许文件URL的跨域访问
)

另外，必须处理WebView的权限请求回调，当Plaid的网页请求相机权限时要主动允许：

androidOnPermissionRequest: (controller, request) async {
  // 直接授予相机、麦克风等媒体权限
  return PermissionRequestResponse(
    resources: request.resources,
    action: PermissionRequestResponseAction.GRANT,
  );
},

二、解决系统相机拍照后无法回传Plaid的问题 #

如果你暂时还是用系统相机的 fallback 流，核心要处理WebView的文件选择回调——因为Plaid调用系统相机本质是触发了网页的<input type="file">选择器，需要把拍照后的文件URI回传给网页：

androidOnShowFileChooser: (controller, filePathCallback, fileChooserParams) async {
  // 这里用image_picker插件处理相机拍照（需要先在pubspec.yaml里引入）
  final XFile? capturedImage = await ImagePicker().pickImage(
    source: ImageSource.camera,
    imageQuality: 80,
  );

  if (capturedImage != null) {
    // 把拍照后的文件URI回传给WebView的文件选择回调
    filePathCallback.onReceiveValue([Uri.parse(capturedImage.path)]);
  } else {
    // 用户取消拍照，返回null
    filePathCallback.onReceiveValue(null);
  }
  return true;
},

三、Android原生配置补充 #

光有Flutter端配置还不够，还要在android/app/src/main/AndroidManifest.xml里做这些：

1. 添加必要权限：

<uses-permission android:name="android.permission.CAMERA" />
<!-- Android 13及以上用下面两个替代WRITE_EXTERNAL_STORAGE -->
<uses-permission android:name="android.permission.READ_MEDIA_IMAGES" />
<uses-permission android:name="android.permission.READ_MEDIA_VIDEO" />
<!-- Android 10以下需要 -->
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" android:maxSdkVersion="28" />

2. 给主Activity添加存储兼容配置（针对Android 10/API 29）：

<activity
  android:name=".MainActivity"
  android:requestLegacyExternalStorage="true">
  <!-- 其他配置 -->
</activity>

3. 别忘了在Flutter端运行时请求危险权限（相机、存储），可以用permission_handler插件来处理：

// 初始化时请求权限
Future<void> requestPermissions() async {
  final statuses = await [
    Permission.camera,
    Permission.storage, // Android 10以下用这个
    Permission.photos, // Android 13及以上用这个
  ].request();
  
  // 检查权限是否授予
  if (statuses[Permission.camera] != PermissionStatus.granted) {
    // 提示用户开启权限
  }
}

最后几个小提醒 #

• 确保你的flutter_inappwebview包是最新版本，旧版本可能存在回调兼容问题
• 一定要在真实Android设备上测试，模拟器的相机和存储权限逻辑经常有异常
• 尽量升级Plaid Web SDK到最新版，官方会持续修复WebView相关的兼容性bug

内容来源于stack exchange