如何将ImagePicker的裁剪框设置为圆形样式？

你使用的image_cropper库本身已经支持圆形裁剪框，只需对现有代码做以下调整即可：

调整后的完整代码 #

Future<File> cropCircleImage(File imageFile) async =>
      await ImageCropper.cropImage(
        sourcePath: imageFile.path,
        aspectRatio: CropAspectRatio(ratioX: 1, ratioY: 1),
        aspectRatioPresets: [CropAspectRatioPreset.square],
        // 新增此行，指定裁剪样式为圆形
        cropStyle: CropStyle.circle,
        compressQuality: 70,
        // 压缩格式改为png，支持透明背景，避免圆形外围出现白边/黑边
        compressFormat: ImageCompressFormat.png,
        androidUiSettings: androidUiSettingsLocked(),
        iosUiSettings: iosUiSettingsLocked(),
      );

补充说明 #

• 裁剪后输出的文件本质是1:1比例的正方形PNG图，圆形外的区域为透明背景，可直接用于头像等场景展示
• 如果你不需要修改原文件，只需要在界面上展示圆形效果，也可以直接用Flutter自带的ClipOval组件包裹图片组件，无需裁剪原文件，示例如下：

  ClipOval(
    child: Image.file(
      yourImageFile,
      width: 100,
      height: 100,
      fit: BoxFit.cover,
    ),
  )
  

• 请确保你使用的image_cropper库版本在1.4.0以上，旧版本不支持cropStyle参数。

内容的提问来源于stack exchange，提问作者Wai Yan Min Min