Flutter图片裁剪插件image_cropper_custom的使用

简介

image_cropper_custom 是一个支持 Android、iOS 和 Web 的 Flutter 插件，用于裁剪图片。该插件基于三个不同的原生库（uCrop、TOCropViewController 和 croppie），因此在不同平台上会呈现出不同的用户界面。

Image Cropper 并不直接在 Dart 代码中处理图片，而是通过平台通道（Platform Channel）暴露 Dart API，让 Flutter 应用程序可以与这三个强大的原生库通信以实现图片裁剪和旋转功能。因此，所有功劳归功于这些原生库。

使用步骤

以下是一个完整的示例，展示如何使用 image_cropper_custom 插件来裁剪图片。

1. 添加依赖

在 pubspec.yaml 文件中添加 image_cropper_custom 依赖：

dependencies:
  image_cropper_custom: ^版本号

运行 flutter pub get 安装依赖。

2. 导入必要的包

在需要使用插件的文件中导入以下包：

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

3. 初始化图片选择器和裁剪器

创建一个按钮，点击后弹出图片选择器，并允许用户裁剪所选图片。

import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';
import 'package:image_cropper_custom/image_cropper_custom.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: ImageCropperExample(),
    );
  }
}

class ImageCropperExample extends StatefulWidget {
  [@override](/user/override)
  _ImageCropperExampleState createState() => _ImageCropperExampleState();
}

class _ImageCropperExampleState extends State<ImageCropperExample> {
  XFile? _imageFile;

  Future<void> _pickAndCropImage() async {
    // 打开相册或相机选择图片
    final XFile? pickedFile = await ImagePicker().pickImage(source: ImageSource.gallery);
    
    if (pickedFile == null) return; // 用户取消了选择

    // 裁剪图片
    final croppedFile = await ImageCropper.cropImage(
      sourcePath: pickedFile.path,
      aspectRatioPresets: [
        CropAspectRatioPreset.square,
        CropAspectRatioPreset.ratio3x2,
        CropAspectRatioPreset.original,
      ],
      androidUiSettings: AndroidUiSettings(
        toolbarTitle: '裁剪图片',
        toolbarColor: Colors.deepOrange,
        toolbarWidgetColor: Colors.white,
        initAspectRatio: CropAspectRatioPreset.original,
        lockAspectRatio: false,
      ),
      iosUiSettings: IOSUiSettings(
        minimumAspectRatio: 1.0,
      ),
    );

    if (croppedFile != null) {
      setState(() {
        _imageFile = croppedFile;
      });
    }
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Image Cropper Example'),
      ),
      body: Center(
        child: _imageFile != null
            ? Image.file(
                File(_imageFile!.path),
                width: 300,
                height: 300,
                fit: BoxFit.cover,
              )
            : Text('请选择并裁剪一张图片'),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _pickAndCropImage,
        tooltip: '选择图片',
        child: Icon(Icons.add_a_photo),
      ),
    );
  }
}