Flutter取色代码如何对接image_picker实现用户自主上传图片？

1. 前置配置（集成image_picker） #

• 在项目pubspec.yaml文件的dependencies块中添加依赖：

dependencies:
  flutter:
    sdk: flutter
  image: ^你当前使用的版本
  image_picker: ^1.0.4 # 可替换为当前最新稳定版

• 执行flutter pub get完成插件安装
• 平台权限配置：
  • 安卓端：在android/app/src/main/AndroidManifest.xml的manifest标签下添加权限声明（适配不同安卓版本）：

  <!-- 安卓13以下读取存储权限 -->
  <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" android:maxSdkVersion="32" />
  <!-- 安卓13及以上读取图片权限 -->
  <uses-permission android:name="android.permission.READ_MEDIA_IMAGES" />
  

  • iOS端：在ios/Runner/Info.plist的dict标签下添加相册访问权限说明：

  <key>NSPhotoLibraryUsageDescription</key>
  <string>需要访问相册选择图片用于提取颜色</string>
  

2. 逻辑对接改造 #

核心改动仅需将原有网络请求获取图片字节的逻辑，替换为读取用户选中图片的本地字节即可，原有解码、取色、转二维数组的逻辑可以完全复用，无需修改。

改造后完整代码示例如下：

import 'package:image/image.dart';
import 'package:image_picker/image_picker.dart';

// 选图+取色入口方法
Future<List<List<Color>>?> pickImageAndExtractColor() async {
  final ImagePicker picker = ImagePicker();
  // 拉起相册选图，可指定source为ImageSource.camera调用相机拍摄
  final XFile? pickedFile = await picker.pickImage(source: ImageSource.gallery);
  
  // 用户取消选图直接返回空
  if (pickedFile == null) return null;

  // 读取选中图片的字节数据，替换原有网络请求获取bytes的逻辑
  final img = await pickedFile.readAsBytes();
  final decodedImg = decodeImage(img);
  if (decodedImg == null) {
    throw '无效的图片文件';
  }
  final bytesList = decodedImg.data;
  final colorList = bytesList
      .map<Color>((e) => Color(e))
      .toList();
  final List<List<Color>> colorGrid = [];
  for (int x = 0; x < decodedImg.width; x++) {
    colorGrid.add([]);
    for (int y = 0; y < decodedImg.height; y++) {
      colorGrid[x].add(colorList[x + y * decodedImg.width]);
    }
  }
  return colorGrid;
}

/// Stores RGBA values
class Color {
  final int alpha, blue, green, red;
  Color(int abgr)
      : alpha = abgr >> 24 & 0xFF,
        blue = abgr >> 16 & 0xFF,
        green = abgr >> 8 & 0xFF,
        red = abgr & 0xFF;
  @override
  String toString() {
    return 'R: $red, G: $green, B: $blue, A: $alpha';
  }
}

3. 调用说明 #

你可以在需要触发选图的位置（比如按钮点击回调）直接调用pickImageAndExtractColor方法，拿到返回的颜色二维数组即可使用：

// 示例：按钮点击触发选图取色
ElevatedButton(
  onPressed: () async {
    final colorGrid = await pickImageAndExtractColor();
    if (colorGrid != null) {
      print(colorGrid);
      // 后续业务逻辑
    }
  },
  child: const Text('选择图片提取颜色'),
)

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