Flutter图片裁剪插件crop_image_widget的使用

Flutter 图片裁剪插件 crop_image_widget 的使用

crop_image_widget 是一个用于在 Flutter 中裁剪图像的插件。它通过 ImageProvider 提供的图像进行部分裁剪。

关键特性

• 零依赖：裁剪功能使用 Flutter 的标准绘制 API 实现，确保了在所有 Flutter 平台上的一致性。
• 美观的模糊背景：提供了视觉上令人愉悦的模糊背景效果（主观偏好）。
• 简洁界面：设计简单易用（主观偏好）。
• 高度可定制：平衡灵活性和简单性，而不会使 API 过于复杂。
• 丰富的功能集：提供了大多数期望的图像裁剪功能：
  • 可以通过拖动网格覆盖的边缘来调整裁剪区域大小。
  • 可以限制裁剪区域的宽高比。
  • 可以通过手势移动和缩放图像。
  • 支持圆形裁剪区域。
  • 注意：目前不支持图像旋转。

演示

使用示例

裁剪区域设置示例

固定宽高比裁剪区域

CropImage(
  image: _image,
  controller: _aspectRatioController,
  cropArea: CropArea.aspectRatio(16 / 9,
    isEditable: true,
    margin: 0,
  ),
),

自由形式裁剪区域

CropImage(
  image: _image,
  controller: _freeFormController,
  cropArea: CropArea.free(const Size.square(256),
    isEditable: true,
  ),
),

圆形裁剪区域

CropImage(
  image: _image,
  controller: _circleController,
  cropArea: CropArea.circle(const Size.square(256),
    isEditable: true,
  ),
),

限制

• HTML Web 渲染器不支持。

完整示例代码

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

import 'dart:typed_data';
import 'dart:ui';

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Crop Image Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Crop Image Widget'),
    );
  }
}

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

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  late final _controller = CropController();

  // MARK: - Lifecycle

  [@override](/user/override)
  Widget build(BuildContext context) {
    final theme = Theme.of(context);

    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
        actions: [
          IconButton(
            tooltip: 'Crop as PNG',
            onPressed: () {
              _controller.crop(format: ImageByteFormat.png).then((bytes) {
                if (bytes == null) {
                  return;
                }
                if (!context.mounted) {
                  return;
                }
                _showCroppedImageDialog(bytes, ImageByteFormat.png);
              });
            },
            icon: const Icon(Icons.crop),
          )
        ],
      ),
      backgroundColor: theme.colorScheme.surfaceContainerHigh,
      body: Padding(
        padding: const EdgeInsets.all(32.0),
        child: Column(
          children: [
            Expanded(
              child: CropImage(
                image: const AssetImage('assets/bowl.jpg'), // 替换为你的图片路径
                controller: _controller,
                cropArea: CropArea.aspectRatio(16 / 9,
                  isEditable: true,
                  margin: 32,
                ),
                settings: const CropSettings(
                  constraints: ConstraintsSettings.viewportConstrained(),
                  zoom: ZoomSettings.defaults(),
                ),
              ),
            ),
          ]
        ),
      ),
    );
  }

  // MARK: - Handlers

  Future _showCroppedImageDialog(
    Uint8List bytes,
    ImageByteFormat format,
  ) async {
    showDialog(
      context: context,
      builder: (context) {
        return AlertDialog(
          title: const Text('Complete'),
          content: Text('Bytes length of cropped image : ${bytes.length}'),
          actions: [
            TextButton(
                onPressed: () {
                  Navigator.pop(context);
                },
                child: const Text('OK')
            )
          ],
        );
      }
    );
  }
}