Flutter相机选取图片时部分图片显示在图片裁剪器顶部异常

问题现象 #

开发Flutter应用的相机上传图片功能时，存在偶现异常：部分图片选中后会偏移显示在图片裁剪器顶部，其余场景裁剪功能可正常运行。

相关实现代码 #

try {
  if (isItPickMenu) {
    Navigator.pop(context);
  }
  pickedFile = await ImagePicker().pickImage(
      source: imageSource); //todo if the user denied the permission ask him again.
} catch (error) {
  print(error);
}
if (pickedFile != null) {
  final croppedImage = await cropImage(
      cropStyle: CropStyle.rectangle,
      pickedImage: pickedFile,
      cropAspectRatio: const CropAspectRatio(ratioX: 3.0, ratioY: 2.0));
  if (croppedImage != null) {
    return croppedImage;
  }
}

效果对比 #

• 异常效果：
  
• 正常效果：
  

问题原因 #

1. 图片EXIF旋转信息未做矫正：不同机型相机拍摄的图片会携带方向标识的EXIF元数据，image_picker返回的文件默认不会主动根据该信息修正图片实际旋转角度，裁剪库读取图片时如果未正确解析该元数据，就会出现图片渲染位置错位，竖拍照片触发该问题的概率远高于横拍照片。
2. 路由时序冲突导致布局计算错误：代码中判断为选图菜单唤起场景时，会直接执行pop关闭菜单后立刻触发选图、跳转裁剪页。部分场景下弹窗关闭的路由动画未执行完成，裁剪页初始化时会拿到错误的安全区、状态栏高度参数，最终把图片渲染到裁剪框上方的偏移位置。
3. 低版本image_cropper存在部分机型的布局适配bug，未正确处理沉浸式状态栏下的高度偏移计算。

修复方案 #

• 选图完成后、传入裁剪器前，先矫正图片的EXIF旋转角度，推荐使用flutter_exif_rotation库实现：

// 引入库
import 'package:flutter_exif_rotation/flutter_exif_rotation.dart';

// pickedFile判空逻辑后新增
if (pickedFile != null) {
  // 矫正图片旋转方向
  final fixedImageFile = await FlutterExifRotation.rotateImage(path: pickedFile!.path);
  // 后续裁剪逻辑传入矫正后的文件
  final croppedImage = await cropImage(
    cropStyle: CropStyle.rectangle,
    pickedImage: fixedImageFile, // 替换原来的pickedFile
    cropAspectRatio: const CropAspectRatio(ratioX: 3.0, ratioY: 2.0)
  );
  // ...后续逻辑不变
}

• 修复路由时序问题，关闭选图菜单后等待动画执行完成再执行后续逻辑，避免上下文参数获取错误：

if (isItPickMenu) {
  Navigator.pop(context);
  // 等待300ms匹配系统默认弹窗关闭动画时长
  await Future.delayed(const Duration(milliseconds: 300));
}

• 升级image_cropper到最新稳定版本，配置裁剪页UI参数主动适配系统安全区，避免高度计算偏差：

// 如果是直接使用image_cropper原生API，可参考如下配置
final croppedFile = await ImageCropper().cropImage(
  sourcePath: fixedImageFile.path,
  aspectRatio: const CropAspectRatio(ratioX: 3.0, ratioY: 2.0),
  cropStyle: CropStyle.rectangle,
  androidUiSettings: const AndroidUiSettings(
    initAspectRatio: CropAspectRatioPreset.ratio3x2,
    lockAspectRatio: true,
    statusBarColor: Colors.transparent,
  ),
  iosUiSettings: const IOSUiSettings(
    aspectRatioLockEnabled: true,
    resetAspectRatioEnabled: false,
  ),
);

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