Flutter图片裁剪插件custom_image_cutter的使用

CustomImageCutter 是一个简单且多功能的包，旨在以直观的方式简化自定义图像裁剪的过程。

功能特性

• 缩放和调整图像进行裁剪

缩放图像

使用外部控制器	使用手势

调整图像位置

裁剪图像

开始使用

你可以在example文件夹中找到一个简单的例子。

首先创建一个控制器：

final controller = CustomImageCutterController();

然后创建一个全局键：

final cropImage = GlobalKey();

在你的Widget树中使用它们：

CustomImageCutter(
  controller: controller,
  cropperKey: cropImage,
  imagePath: 'image_path',
  image: Image.network('image_path'),
),

要缩放图像：

controller.updateScale(value) // value是一个double类型的值

你可以使用滑块来控制缩放比例：

Slider(
  min: 1,
  max: controller.maxScale, // 控制器保存最大缩放比例
  value: controller.scale, // 控制器暴露当前缩放比例
  onChanged: (value) => setState(() => controller.updateScale(value)),
)

获取裁剪后的图像：

final cropped = await controller.crop(cropperKey: cropImage);

示例代码

以下是一个完整的示例代码，展示了如何在Flutter应用中使用CustomImageCutter插件：

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

void main() => runApp(const MyApp());

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final cropImage = GlobalKey();
  final controller = CustomImageCutterController();

  @override
  void initState() {
    controller.scaleNotifier.addListener(() => setState(() {}));
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(widget.title)),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Stack(
              children: [
                SizedBox(
                  width: 300,
                  height: 400,
                  child: CustomImageCutter(
                    controller: controller,
                    cropperKey: cropImage,
                    imagePath: 'image_path',
                    image: Image.network(
                      'https://play-lh.googleusercontent.com/IeNJWoKYx1waOhfWF6TiuSiWBLfqLb18lmZYXSgsH1fvb8v1IYiZr5aYWe0Gxu-pVZX3', // square image
                      // 'https://nmwa.org/wp-content/uploads/2020/01/1993.76-GAP.jpg', // portrait image
                      // 'https://st.depositphotos.com/1034986/4574/i/950/depositphotos_45747235-stock-photo-beautiful-woman-selfie.jpg', // landscape image
                    ),
                  ),
                ),
              ],
            ),
            Slider(
              min: controller.minScale,
              max: controller.maxScale,
              value: controller.scale,
              onChanged: (value) => setState(() => controller.updateScale(value)),
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () async {
          final cropped = await controller.crop(cropperKey: cropImage);
          Navigator.of(context).push<void>(
            MaterialPageRoute(
              builder: (context) => Scaffold(
                appBar: AppBar(),
                body: Center(child: Image.memory(cropped!)),
              ),
              fullscreenDialog: true,
            ),
          );
        },
        child: const Icon(Icons.add),
      ),
    );
  }
}

这段代码展示了如何在一个Flutter应用程序中集成CustomImageCutter插件，包括设置控制器、使用滑块调整图像大小以及裁剪图像并显示裁剪结果。