Flutter图片裁剪插件flutter_image_cropper_plus的使用

flutter_image_cropper_plus 是一个用于 Flutter 应用的图片裁剪插件。它提供了灵活且易于使用的图片裁剪功能，支持自定义裁剪区域，并兼容 Android 和 iOS 平台。该插件使用 Kotlin、Java 和 Dart 开发，并通过 Gradle 和 Pub 进行管理。

功能特性

• 可定制的裁剪区域
• 支持 Android 和 iOS 平台
• 轻松集成到现有的 Flutter 项目中

入门指南

要使用此插件，请将其添加为 pubspec.yaml 文件中的依赖项。更详细的使用说明可以在 GitHub 仓库 中找到。

该项目采用 MIT 许可证。

完整示例代码

以下是一个完整的示例代码，展示了如何在 Flutter 应用中使用 flutter_image_cropper_plus 插件进行图片裁剪。

import 'dart:io';

import 'package:flutter/material.dart';
import 'dart:async';

// 导入图片裁剪插件
import 'package:flutter_image_cropper_plus/flutter_image_cropper_plus_library.dart';
import 'package:image_picker/image_picker.dart';

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

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  // 初始化图片裁剪插件实例
  final _flutterImageCropperPlusPlugin = ImageCropperPlus();

  // 存储裁剪后的图片文件
  File? _croppedFile;

  [@override](/user/override)
  void initState() {
    super.initState();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('图片裁剪示例'),
        ),
        body: Center(
          child: Column(
            children: [
              // 显示原始图片或裁剪后的图片
              _imageCard(),
              // 按钮触发图片裁剪操作
              ElevatedButton(
                onPressed: () {
                  _pickAndCropImage();
                },
                child: const Text('裁剪图片'),
              ),
            ],
          ),
        ),
      ),
    );
  }

  // 构建图片卡片
  Widget _imageCard() {
    return Center(
      child: Column(
        mainAxisSize: MainAxisSize.min,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 16.0),
            child: Card(
              elevation: 4.0,
              child: Padding(
                padding: const EdgeInsets.all(16.0),
                child: _image(), // 显示图片
              ),
            ),
          ),
          const SizedBox(height: 24.0),
          _menu(), // 显示删除按钮
        ],
      ),
    );
  }

  // 显示图片或空占位符
  Widget _image() {
    final screenWidth = MediaQuery.of(context).size.width;
    final screenHeight = MediaQuery.of(context).size.height;
    if (_croppedFile != null) {
      return ConstrainedBox(
        constraints: BoxConstraints(
          maxWidth: 0.8 * screenWidth,
          maxHeight: 0.7 * screenHeight,
        ),
        child: Image.file(_croppedFile!), // 显示裁剪后的图片
      );
    } else {
      return const SizedBox.shrink(); // 如果没有图片，则不显示
    }
  }

  // 构建菜单栏（仅包含删除按钮）
  Widget _menu() {
    return Row(
      mainAxisSize: MainAxisSize.min,
      children: [
        FloatingActionButton(
          onPressed: () {
            _clear(); // 清除裁剪结果
          },
          backgroundColor: Colors.redAccent,
          tooltip: '删除',
          child: const Icon(Icons.delete),
        ),
      ],
    );
  }

  // 选择图片并触发裁剪
  Future<void> _pickAndCropImage() async {
    // 使用 ImagePicker 从相册选择图片
    var imageFile = await ImagePicker().pickImage(source: ImageSource.gallery);
    if (imageFile != null) {
      cropImage(imageFile.path); // 调用裁剪方法
    }
  }

  // 清除裁剪结果
  void _clear() {
    setState(() {
      _croppedFile = null; // 将裁剪结果设置为 null
    });
  }

  // 执行图片裁剪
  Future<void> cropImage(String imagePath) async {
    final croppedFile = await _flutterImageCropperPlusPlugin.cropImage(
      sourcePath: imagePath, // 原始图片路径
      aspectRatioPresets: [
        CropAspectRatioPreset.square, // 固定比例：正方形
        CropAspectRatioPreset.ratio3x2, // 固定比例：3:2
        CropAspectRatioPreset.original, // 自由裁剪
        CropAspectRatioPreset.ratio4x3, // 固定比例：4:3
        CropAspectRatioPreset.ratio16x9, // 固定比例：16:9
      ],
      compressFormat: ImageCompressFormat.jpg, // 压缩格式：JPEG
      compressQuality: 90, // 压缩质量：90%
      uiSettings: [
        AndroidUiSettings(
          toolbarTitle: '调整附件', // Android 裁剪工具栏标题
          toolbarColor: const Color(0xFF607D8B), // 工具栏颜色
          toolbarWidgetColor: Colors.white, // 工具栏文字颜色
          initAspectRatio: CropAspectRatioPreset.original, // 初始裁剪比例
          lockAspectRatio: false, // 是否锁定裁剪比例
        ),
        IOSUiSettings(
          minimumAspectRatio: 1.0, // iOS 最小裁剪比例
          title: '调整附件', // iOS 裁剪工具栏标题
        ),
      ],
    );

    if (croppedFile != null) {
      setState(() {
        _croppedFile = File(croppedFile.path); // 更新裁剪后的图片文件
      });
    }
  }
}