Android端WebView loadFile加载失败，iOS端运行正常

问题描述 #

Flutter中使用WebView的loadFile方法时，iOS端可正常加载文件，但Android端加载进度显示100%却无内容展示。已尝试修改路径、将西里尔文路径替换为拉丁文路径、使用externalStorageDir，问题仍未解决。

解决方案 #

1. 检查并申请Android文件访问权限 #

Android对文件访问权限限制严格，需根据系统版本配置对应权限：

• Android 9及以下：在AndroidManifest.xml中添加读取外部存储权限

  <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
  

• Android 10及以上：如需访问外部存储中的非媒体文件，需添加管理外部存储权限

  <uses-permission android:name="android.permission.MANAGE_EXTERNAL_STORAGE" />
  

  注意：MANAGE_EXTERNAL_STORAGE权限需引导用户手动在系统设置中授权，可借助permission_handler库完成权限请求流程。

2. 替换loadFile为loadUrl并配置请求头（Android端专属） #

Android WebView的loadFile方法存在兼容性问题，改用loadUrl并添加允许文件访问的请求头可解决大部分加载异常：

if (Platform.isAndroid) {
  controller.loadUrl(
    Uri.file(widget._path!).toString(),
    headers: {'Accept': '*/*'},
  );
} else {
  controller.loadFile(widget._path!);
}

3. 修复build方法中重复加载的逻辑 #

当前build方法每次重建都会调用loadFile，易导致重复加载或异常。将加载逻辑移至initState和didUpdateWidget中：

@override
void initState() {
  super.initState();
  WidgetsBinding.instance.addPostFrameCallback((_) {
    if (canRenderFile && widget._path != null) {
      _loadFile();
    }
  });
}

@override
void didUpdateWidget(covariant FileViewer oldWidget) {
  super.didUpdateWidget(oldWidget);
  if (oldWidget._path != widget._path && canRenderFile) {
    _loadFile();
  }
}

void _loadFile() {
  if (Platform.isAndroid) {
    controller.loadUrl(Uri.file(widget._path!).toString(), headers: {'Accept': '*/*'});
  } else {
    controller.loadFile(widget._path!);
  }
}

@override
Widget build(BuildContext context) {
  printMessage(widget._path ?? "");
  return canRenderFile 
      ? WebViewWidget(controller: controller)
      : DownloadFileView(
          fileName: widget.file?.name ?? "",
          fileSize: widget.file?.fileSize.toUiSize().toString() ?? "",
          onAction: () => widget.onDownload?.call(),
        );
}

4. 增强错误日志排查 #

在onWebResourceError中打印更详细的错误信息，帮助定位问题根源：

onWebResourceError: (WebResourceError error) {
  setState(() {
    canRenderFile = false;
  });
  printMessage("WebView错误：错误码=${error.errorCode}，描述=${error.description}，域=${error.domain}");
},

5. 校验文件路径有效性 #

加载前先确认文件是否存在，避免传入无效路径：

void _loadFile() {
  final file = File(widget._path!);
  if (await file.exists()) {
    // 执行加载逻辑
  } else {
    printMessage("文件不存在：${widget._path}");
    setState(() => canRenderFile = false);
  }
}

内容的提问来源于stack exchange，提问作者xaldarof