Flutter Web端iOS系统ImagePicker相册选择弹窗不弹出问题

问题背景 #

使用image_picker包实现的图片选择功能在Windows、macOS、Android Web端正常，但iOS16.3系统的Web端点击按钮后，相册选择弹窗无法弹出。已尝试更换包的旧版本、配置NSPhotoLibraryUsageDescription，均无效。

核心原因分析 #

iOS Safari对文件选择器的调用有严格限制：必须在用户直接触发的同步交互上下文中执行，且仅允许在HTTPS/localhost环境下使用；同时image_picker的Web端实现可能与iOS16.3存在兼容性差异。

解决方法 #

1. 确保用户交互上下文未丢失 #

iOS Safari不允许在异步嵌套操作中调用文件选择器，需确保pickImage的触发直接绑定到用户点击事件，去掉多余的async包装：

// 修改前
ElevatedButton(
  onPressed: () async {
    _getImageFromPicker(); 
  },
  child: Text('Escolher da galeria'),
),

// 修改后
ElevatedButton(
  onPressed: _getImageFromPicker, // 直接绑定方法，避免额外异步嵌套
  child: Text('Escolher da galeria'),
),

2. 验证运行环境为HTTPS/localhost #

iOS Safari仅允许在安全环境下调用文件选择器：

• 本地调试：使用flutter run -d chrome --web-port=8080 --web-hostname=0.0.0.0，通过iOS设备访问电脑IP+端口
• 生产环境：确保网站部署在HTTPS协议下

3. 绕过image_picker，直接使用浏览器File API #

如果插件的Web适配存在问题，可直接用dart:html实现图片选择，兼容性更可靠：
首先导入必要依赖：

import 'package:flutter/foundation.dart' show kIsWeb;
import 'dart:io' if (dart.library.html) 'dart:html';

重写图片选择方法：

Future _getImageFromPicker() async {
  if (kIsWeb) {
    // Web端直接调用浏览器API
    final input = FileUploadInputElement()..accept = 'image/*';
    input.click();

    await input.onChange.first;
    if (input.files == null || input.files!.isEmpty) return;

    final file = input.files![0];
    final reader = FileReader();
    await reader.readAsArrayBuffer(file);
    final bytes = reader.result as Uint8List;

    final photoData = img.decodeImage(bytes);
    setState(() {
      hasImage = true;
      hasText = false;
      _clipboardImage = bytes;
      heightImg = photoData!.height * 0.5;
      widthImg = photoData.width * 0.5;
    });
  } else {
    // 移动端保留原逻辑
    final ImagePicker _picker = ImagePicker();
    final XFile? image = await _picker.pickImage(
        source: ImageSource.gallery, requestFullMetadata: false);
    if (image == null) return;
    var bytes = await image.readAsBytes();
    var photoData = img.decodeImage(bytes);
    setState(() {
      hasImage = true;
      hasText = false;
      _clipboardImage = bytes;
      heightImg = photoData!.height * 0.5;
      widthImg = photoData.width * 0.5;
    });
  }
}

4. 升级Flutter版本 #

当前使用的Flutter 3.3.10版本较旧，后续版本已修复多个Web与iOS的兼容性问题，执行以下命令升级：

flutter channel stable
flutter upgrade

注意事项 #

NSPhotoLibraryUsageDescription是iOS原生应用的权限配置，Flutter Web运行在浏览器中，该配置对Web端无效，无需设置。

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