Flutter集成image_picker与web_image_picker时Android端报dart:html缺失错误

dart:html、dart:js是Dart仅针对Web端提供的专属库，Android、iOS等移动端平台原生不支持这两个库的加载。你在项目中全局引入web_image_picker插件后，Android端编译时会将该插件内所有Web专属代码一起打包，自然会抛出找不到相关依赖的编译错误。

目前官方维护的image_picker插件从0.6.7版本开始就已经原生支持Web端，不需要额外引入第三方Web专属插件。web_image_picker早已停止维护，是早期官方插件未支持Web时期的过渡方案，直接移除即可从根源解决编译问题，还能减少依赖维护成本。
操作步骤：

• 打开pubspec.yaml文件，删除web_image_picker的依赖声明，保留image_picker并升级到最新稳定版即可
• 修改图片选择逻辑，不需要再分平台调用不同插件的API，统一用image_picker的官方接口，Web端通过readAsBytes()获取图片字节、移动端通过文件路径获取File对象即可，修改后的getImage()代码如下：

import 'dart:typed_data';
import 'dart:io';
import 'package:flutter/foundation.dart';
import 'package:image_picker/image_picker.dart';

// 用dynamic类型兼容Web端的字节数据和移动端的File对象，也可以单独定义两个变量分别存储
dynamic _image;
final ImagePicker _imagePicker = ImagePicker();

Future getImage() async {
  final XFile? pickedFile = await _imagePicker.pickImage(source: ImageSource.gallery);
  if (pickedFile == null) return;

  if (kIsWeb) {
    // Web端读取图片字节
    final Uint8List webImageBytes = await pickedFile.readAsBytes();
    setState(() {
      _image = webImageBytes;
    });
  } else {
    // 移动端读取文件对象
    setState(() {
      _image = File(pickedFile.path);
    });
  }
}

• 原有的UI渲染代码不需要修改，保留kIsWeb判断逻辑：Web端用Image.memory(_image)渲染、非Web端用Image.file(_image)渲染即可
• 执行flutter clean清除历史编译缓存，重新编译Android端即可正常运行，Web端功能也不受影响。

如果有特殊需求必须保留web_image_picker依赖，可以使用Dart的条件导入机制，保证Web端专属代码只会在Web编译时被加载，移动端编译时完全不引入相关代码。
操作步骤：

• 新建抽象接口文件image_picker_service.dart，定义统一的图片选择方法

abstract class ImagePickerService {
  Future<dynamic> pickImage();
}

• 新建Web端实现文件image_picker_service_web.dart，仅在这个文件里导入web_image_picker和Web专属库

import 'dart:typed_data';
import 'package:web_image_picker/image_picker_web.dart';
import 'image_picker_service.dart';

class ImagePickerServiceImpl implements ImagePickerService {
  @override
  Future<dynamic> pickImage() async {
    return await ImagePickerWeb.getImageAsBytes();
  }
}

ImagePickerService getPickerService() => ImagePickerServiceImpl();

• 新建移动端实现文件image_picker_service_mobile.dart，不导入任何Web相关依赖

import 'dart:io';
import 'package:image_picker/image_picker.dart';
import 'image_picker_service.dart';

class ImagePickerServiceImpl implements ImagePickerService {
  final ImagePicker _picker = ImagePicker();
  @override
  Future<dynamic> pickImage() async {
    final XFile? image = await _picker.pickImage(source: ImageSource.gallery);
    return image == null ? null : File(image.path);
  }
}

ImagePickerService getPickerService() => ImagePickerServiceImpl();

• 在业务页面中通过条件导入加载对应平台的实现，不会出现跨平台引用问题

import 'image_picker_service.dart'
    if (dart.library.html) 'image_picker_service_web.dart'
    if (dart.library.io) 'image_picker_service_mobile.dart';

// 调用示例
getImage() async {
  final service = getPickerService();
  final pickedRes = await service.pickImage();
  if (pickedRes == null) return;
  setState(() {
    _image = pickedRes;
  });
}

注意：只要修改了pubspec依赖或者调整了平台专属代码的导入逻辑，最好先执行flutter clean清除缓存，避免旧的编译残留导致报错。

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