如何在Flutter Web中使用File Picker包正确显示图片？

Flutter Web环境下，FilePicker返回的文件对象path始终为null，无法通过File和Image.file加载图片，必须改用文件的字节数据来渲染。以下是具体修改步骤：

1. 修改图片选择工具函数 #

更新utils.dart中的pickImages函数，不再返回File对象，而是直接获取图片的字节数据，并确保开启withData: true以获取完整字节内容：

import 'dart:typed_data';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:file_picker/file_picker.dart';

Future<List<Uint8List>> pickImages() async {
  List<Uint8List> imageBytesList = [];
  try {
    var files = await FilePicker.platform.pickFiles(
      type: FileType.image,
      allowMultiple: false,
      withData: true, // 必须开启，确保返回文件字节数据
    );
    if (files != null && files.files.isNotEmpty) {
      for (var file in files.files) {
        if (file.bytes != null) {
          imageBytesList.add(file.bytes!);
        }
      }
    }
  } catch (e) {
    debugPrint(e.toString());
  }
  return imageBytesList;
}

2. 更新页面状态变量 #

修改stack_all.dart中的状态变量类型，从List<File>改为List<Uint8List>：

class _StackePagesState extends State<StackePages> {
  Offset? tapOffset;
  List<Uint8List> images = []; // 类型更新为字节数组列表
  final ScrollController _horizontal = ScrollController();

  // ... 其他代码不变
}

3. 替换图片渲染组件 #

将原来的Image.file替换为Image.memory，直接使用字节数据渲染图片：

// 原代码
Image.file(
  i,
  fit: BoxFit.cover,
  height: 200,
)

// 修改后
Image.memory(
  i,
  fit: BoxFit.cover,
  height: 200,
)

兼容说明 #

上述修改同时支持移动端和Web端：

• 移动端：FilePicker依然可以正常返回字节数据，Image.memory能正常渲染
• Web端：绕过了path为null的问题，直接使用字节数据渲染图片

内容的提问来源于stack exchange，提问作者pomoworko.com