Flutter Web发布模式下FilePicker组件无响应问题求助

核心原因 #

调试模式下Chrome保留了更多调试信息，且Web环境的文件路径处理限制较松；但发布模式（部署到Firebase Hosting后），File(result.files.single.path!)的写法会触发问题：

1. Web环境中，文件的path属性并非真实本地路径，发布模式下可能直接返回空值，导致path!触发空指针异常
2. Flutter Web发布模式默认屏蔽未捕获的异常，异常发生后代码中断，表现为按钮无响应

解决方案 #

1. 适配Web平台的文件处理逻辑 #

修改代码，区分Web和原生平台的文件获取方式，优先使用字节数据而非路径：

import 'package:flutter/foundation.dart' show kIsWeb;
import 'package:file_picker/file_picker.dart';

// ...

IconButton(
  onPressed: () async {
    try {
      FilePickerResult? result = await FilePicker.platform.pickFiles(
        withData: true, // 必须开启，Web环境才能获取文件字节
      );

      if (result != null) {
        PlatformFile pickedFile = result.files.single;
        ScaffoldMessenger.of(context).showSnackBar(fileSending);

        if (kIsWeb) {
          // Web平台：使用文件字节和文件名处理
          Uint8List fileBytes = pickedFile.bytes!;
          MessageViewModel().sendMedia(
            bytes: fileBytes,
            fileName: pickedFile.name,
            chatID: args.chatID!,
          );
        } else {
          // 原生平台：继续使用File路径
          File file = File(pickedFile.path!);
          MessageViewModel().sendMedia(file: file, chatID: args.chatID!);
        }
      }
    } catch (e) {
      // 捕获异常并提示用户，避免无响应
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(content: Text('文件选择失败: ${e.toString()}')),
      );
    }
  },
)

2. 调整MessageViewModel的sendMedia方法 #

需要让sendMedia方法支持接收Web平台的字节数据，比如新增重载或参数适配：

// 示例：适配Web和原生的sendMedia方法
class MessageViewModel {
  // 原生平台用File
  Future<void> sendMedia({required File file, required String chatID}) async {
    // 原生平台的文件上传逻辑
  }

  // Web平台用字节和文件名
  Future<void> sendMedia({
    required Uint8List bytes,
    required String fileName,
    required String chatID,
  }) async {
    // Web平台的文件上传逻辑，比如用bytes构建FormData
  }
}

3. 排查发布模式错误日志 #

部署后打开Chrome开发者工具的Console面板，查看是否有未捕获的异常；也可以通过代码中的try-catch捕获错误，快速定位问题。

4. 确保依赖和部署产物最新 #

• 检查pubspec.yaml中file_picker版本为最新稳定版，执行flutter pub get更新
• 重新构建发布包：flutter build web --release，再执行firebase deploy部署最新代码

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