Flutter WebView中无法为Airtable表单添加附件，求解决方案？

问题详情 #

• 使用flutter_webview 3.0.0版本时，Airtable表单可正常加载，但点击附件按钮无响应，无法添加图片附件
• 更新至4.2.0版本后，问题依旧存在

截图 #

当前代码 #

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

class NewCustomer extends StatefulWidget {
  const NewCustomer({Key? key}) : super(key: key);

  @override
  State<NewCustomer> createState() => _NewCustomerState();
}

class _NewCustomerState extends State<NewCustomer> {
  var loadingPercentage = 0;
  WebViewController webview = WebViewController();

  @override
  void initState() {
    super.initState();
    webview
      ..setNavigationDelegate(
        NavigationDelegate(
          onPageStarted: (url) {
            setState(() {
              loadingPercentage = 0;
            });
          },
          onProgress: (progress) {
            setState(() {
              loadingPercentage = progress;
            });
          },
          onPageFinished: (url) {
            setState(() {
              loadingPercentage = 100;
            });
          },
        ),
      )
      ..loadRequest(
        Uri.parse('https://airtable.com/shrNceygh14VGsLR2'),
      )
      ..setJavaScriptMode(JavaScriptMode.unrestricted);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text(
          "Form",
          selectionColor: Color.fromARGB(255, 13, 42, 167),
        ),
      ),
      body: WebViewWidget(
        controller: webview,
      ),
    );
  }
}

解决方案 #

问题根源在于WebView默认未配置文件选择器回调，Airtable的附件上传需要触发原生文件选择界面，按以下步骤处理：

1. 添加权限与依赖 #

• pubspec.yaml 新增file_picker插件用于文件选择：

dependencies:
  flutter:
    sdk: flutter
  webview_flutter: ^4.2.0
  file_picker: ^5.3.2

• Android配置：在android/app/src/main/AndroidManifest.xml添加文件访问权限：

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

• iOS配置：在ios/Runner/Info.plist添加相册权限描述：

<key>NSPhotoLibraryUsageDescription</key>
<string>需要访问相册以上传图片至表单</string>

2. 修改WebViewController配置 #

更新代码，添加权限请求回调和文件选择器处理逻辑：

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
import 'package:file_picker/file_picker.dart';
import 'dart:io';

class NewCustomer extends StatefulWidget {
  const NewCustomer({Key? key}) : super(key: key);

  @override
  State<NewCustomer> createState() => _NewCustomerState();
}

class _NewCustomerState extends State<NewCustomer> {
  var loadingPercentage = 0;
  late WebViewController webview;

  @override
  void initState() {
    super.initState();
    webview = WebViewController()
      ..setNavigationDelegate(
        NavigationDelegate(
          onPageStarted: (url) => setState(() => loadingPercentage = 0),
          onProgress: (progress) => setState(() => loadingPercentage = progress),
          onPageFinished: (url) => setState(() => loadingPercentage = 100),
        ),
      )
      ..loadRequest(Uri.parse('https://airtable.com/shrNceygh14VGsLR2'))
      ..setJavaScriptMode(JavaScriptMode.unrestricted)
      // 允许图片权限请求
      ..setPermissionRequestCallback((permissionRequest) {
        if (permissionRequest.permissions.contains(PermissionResourceType.image)) {
          permissionRequest.grant();
        }
      });

    // Android端处理文件选择回调
    if (Platform.isAndroid) {
      final AndroidWebViewController androidController =
          webview.platform as AndroidWebViewController;
      androidController.setOnShowFileSelector((params) async {
        final result = await FilePicker.platform.pickFiles(
          type: FileType.image,
          allowMultiple: params.mode == FileSelectorMode.openMultiple,
        );
        return result?.files.map((file) => Uri.file(file.path!)).toList() ?? [];
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text(
          "Form",
          selectionColor: Color.fromARGB(255, 13, 42, 167),
        ),
      ),
      body: Stack(
        children: [
          WebViewWidget(controller: webview),
          if (loadingPercentage < 100)
            LinearProgressIndicator(value: loadingPercentage / 100),
        ],
      ),
    );
  }
}

3. 补充说明 #

• 权限请求回调用于允许WebView访问图片资源
• Android端需手动处理文件选择触发逻辑，iOS端webview_flutter会自动调用系统相册
• 测试前需重新安装应用，确保权限配置生效

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