Flutter Web中whatWidget函数加前置代码触发空值异常及适配需求

核心问题定位 #

你遇到的「Unexpected null value」错误，本质是whatWidget函数中未对传入的aFile参数做非空校验，当aFile为null时，后续访问它的属性（比如name）直接触发空指针异常。只要补上判空逻辑，再按文件类型分支处理即可解决。

完整实现步骤 #

1. 依赖准备（Web端适配）

确保使用适配Web的文件处理依赖，file_picker本身支持Web，PDF预览可以用syncfusion_flutter_pdfviewer（或其他Web兼容的PDF库）：

dependencies:
  flutter:
    sdk: flutter
  file_picker: ^6.1.1
  syncfusion_flutter_pdfviewer: ^25.1.39

2. 修复空值问题 + 按文件类型返回Widget

修改whatWidget函数，先做非空校验，再提取扩展名分支处理：

Widget whatWidget(PlatformFile? aFile) {
  // 第一步：先判空，避免空值异常
  if (aFile == null) {
    return const Center(child: Text('未选择文件'));
  }

  // 提取文件扩展名，转小写统一判断
  final fileExt = aFile.name.split('.').last.toLowerCase();

  // 图片类型处理（png/jpeg/jpg/webp等）
  final imageExts = ['png', 'jpeg', 'jpg', 'webp'];
  if (imageExts.contains(fileExt)) {
    // Web端无法用本地路径，直接用文件字节加载图片
    return Image.memory(aFile.bytes!);
  }

  // PDF类型处理
  if (fileExt == 'pdf') {
    // 用PDFViewer加载文件字节
    return SfPdfViewer.memory(aFile.bytes!);
  }

  // 其他不支持格式
  return Center(child: Text('不支持的文件格式：$fileExt'));
}

3. Web端文件选择的正确写法

Web端file_picker无法获取本地路径，必须通过PlatformFile.bytes或PlatformFile.readStream读取文件内容，示例代码：

PlatformFile? selectedFile;

Future<void> pickFile() async {
  final result = await FilePicker.platform.pickFiles(
    type: FileType.any,
    allowMultiple: false,
  );

  if (result != null) {
    // 直接获取PlatformFile对象，不要用path
    setState(() {
      selectedFile = result.files.first;
    });
  }
}

4. 页面调用示例

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(title: const Text('文件预览与上传')),
    body: Column(
      children: [
        ElevatedButton(
          onPressed: pickFile,
          child: const Text('选择文件'),
        ),
        Expanded(
          child: whatWidget(selectedFile),
        ),
        ElevatedButton(
          onPressed: selectedFile != null ? uploadFile : null,
          child: const Text('上传文件'),
        ),
      ],
    ),
  );
}

// 上传文件逻辑（示例）
Future<void> uploadFile() async {
  if (selectedFile == null) return;
  // 用selectedFile!.bytes构造请求体，发送到服务器
  // 示例：使用http包发送multipart请求
  // final request = http.MultipartRequest(
  //   'POST',
  //   Uri.parse('你的上传接口地址'),
  // );
  // request.files.add(http.MultipartFile.fromBytes(
  //   'file',
  //   selectedFile!.bytes!,
  //   filename: selectedFile!.name,
  // ));
  // final response = await request.send();
}

关键注意点 #

• Web端绝对不要使用PlatformFile.path，该字段在Web上始终为null，必须通过bytes或readStream读取文件内容。
• 所有涉及aFile属性的操作，必须先确保aFile不为null，否则会触发空值异常。
• PDF预览库要选择支持Web的版本，部分旧版PDF库可能无法在Web端正常运行。

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