Flutterで画像を自由にトリミングできるcrop_your_imageパッケージ

プロフィール画像の設定やSNSへの画像投稿、ECサイトの商品画像編集など、Flutterアプリで画像のトリミング機能を実装したい場面は多くあります。

例えば、

プロフィール画像の切り抜き
SNS投稿前の画像編集
商品画像のトリミング
書類・レシート画像の切り抜き
AIへ送信する画像の範囲指定

などです。

今回紹介する crop_your_image は、Flutterで自由度の高い画像トリミングUIを実装できるパッケージです。

一般的な画像トリミングライブラリとは異なり、完成済みの画面を提供するのではなく、画像を切り抜くための Crop ウィジェットを提供します。そのため、自分のアプリデザインに合わせた自由なUIを構築できます。

この記事では、crop_your_image の基本的な使い方から、CropController の利用方法、アスペクト比の固定、円形トリミング、ズーム・パン操作まで詳しく解説します。

crop_your_imageとは？

crop_your_image は、Flutterで画像のトリミング機能を実装するためのパッケージです。

多くの画像トリミングライブラリでは専用画面が表示されますが、このパッケージでは Cropウィジェットを自由な場所へ配置できます。

例えば、

画面全体
ダイアログ
BottomSheet
一部のWidget領域

など、好きなレイアウトへ組み込めます。

crop_your_imageの特徴

主な特徴は以下の通りです。

機能	対応
画像トリミング	○
Crop Widget	○
CropController	○
ズーム	○
パン操作	○
円形トリミング	○
アスペクト比固定	○
Undo / Redo	○
Android	○
iOS	○
Web	○
Windows	○
macOS	○
Linux	○

また、このパッケージは画像取得や保存機能は持たず、「画像をトリミングするUI」に特化しています。画像の読み込みや保存は別パッケージと組み合わせて利用します。

インストール

pubspec.yaml に追加します。

YAML

dependencies:
  crop_your_image: ^2.0.0

または、

Bash

flutter pub add crop_your_image

利用時はインポートします。

Dart

import 'package:crop_your_image/crop_your_image.dart';

基本的な使い方

まずは Crop ウィジェットを配置します。

Dart

final controller = CropController();

Crop(
  controller: controller,
  image: imageData,
  onCropped: (result) {
    result.when(
      success: (image) {
        print('Crop completed');
      },
      error: (error) {
        print(error);
      },
    );
  },
)

画像データには Uint8List を渡します。

切り抜き完了後は onCropped が呼び出され、最新版では CropResult を通して成功・失敗の両方を扱えます。

CropControllerを利用する

CropController を利用すると、外部からトリミング処理を実行できます。

Dart

final controller = CropController();

ElevatedButton(
  onPressed: () {
    controller.crop();
  },
  child: const Text('Crop'),
)

ボタンを押したタイミングで画像を切り抜くことができます。

画面デザインとトリミング処理を分離できるため、大規模アプリでも扱いやすくなります。

円形にトリミングする

プロフィール画像では円形に切り抜きたいことがあります。

Dart

Crop(
  controller: controller,
  image: imageData,
  withCircleUi: true,
)

これにより、円形のガイドラインを表示できます。

アバター画像やアイコン画像を作成する際によく利用されます。

アスペクト比を固定する

トリミング比率を固定したい場合もあります。

例えば、

1 : 1

プロフィール画像

16 : 9

サムネイル画像

4 : 3

一般的な写真

のように用途ごとに比率を固定できます。

ズーム・パン操作

ユーザーは画像を拡大・縮小したり、ドラッグして位置を調整できます。

ピンチ操作
      ↓
ズーム

ドラッグ
      ↓
パン

これにより、細かい位置まで調整できます。

Crop領域をプログラムから変更する

CropController を利用すると、トリミング範囲もプログラムから変更できます。

例えば、

顔認識した位置
AIが検出した被写体
QRコード領域

などを初期位置として設定することも可能です。

Undo・Redoに対応

編集操作を戻すこともできます。

例えば、

移動
 ↓
拡大
 ↓
元に戻す

という操作が可能です。

画像編集アプリのようなUXを簡単に実現できます。

プロフィール画像編集

最も利用されるケースがプロフィール画像です。

画像選択
    ↓
Crop
    ↓
円形トリミング
    ↓
アップロード

SNSアプリや会員登録画面でよく利用されます。

ECアプリへの利用

商品画像のサムネイルを作成する場合にも便利です。

例えば、

商品中央を切り抜く
正方形サムネイルを作成する
商品画像サイズを統一する

などの用途に活用できます。

SNS投稿画面

SNSでは投稿前に画像を編集するケースがあります。

画像選択
      ↓
Crop
      ↓
フィルター
      ↓
投稿

といったフローを構築できます。

AIアプリへの利用

生成AIや画像解析では、画像全体ではなく一部だけ送りたいケースがあります。

例えば、

レシート
名刺
手書き文字
商品ラベル

など必要な範囲だけ切り抜いて送信できます。

通信量削減にも役立ちます。

Crop Widgetだけを提供する

このパッケージ最大の特徴は、

Crop Widgetのみ提供

という設計です。

つまり、

ボタン
AppBar
完了ボタン
キャンセルボタン

などは自分で自由に作成できます。

FlutterらしくWidgetを組み合わせてUIを構築したい場合に非常に相性が良い設計となっています。

画像の読み込み・保存は別パッケージ

crop_your_image は、

ギャラリーから画像取得
カメラ撮影
ファイル保存

などは行いません。

例えば、

image_picker
file_picker
photo_manager

などと組み合わせて利用するのが一般的です。

メリット

UIを自由に設計できる

完成済み画面ではなくWidgetなので、自由度が非常に高くなっています。

CropControllerで外部制御できる

任意のタイミングでトリミング処理を実行できます。

マルチプラットフォーム対応

Android・iOSだけでなく、Webやデスクトップにも対応しています。

ズーム・パンに対応

スマートフォンらしい直感的な操作が可能です。

円形トリミングにも対応

プロフィール画像などの作成にも最適です。

注意点

画像取得機能は含まれない

画像の選択や撮影は別パッケージが必要です。

保存処理も自分で実装する

切り抜いた画像の保存やアップロードはアプリ側で行います。

画像編集機能は限定的

回転・フィルター・色調補正など、本格的な画像編集機能は対象外です。画像のトリミングに特化したパッケージです。

2.0では一部APIが変更

2.0では onCropped が CropResult を返すようになるなど、破壊的変更が含まれています。既存プロジェクトからアップデートする場合は移行ガイドを確認しましょう。

まとめ

crop_your_image は、Flutterで柔軟な画像トリミングUIを構築できるパッケージです。

完成済みの画面ではなく Crop ウィジェットを提供するため、自分のアプリデザインに合わせた自由な画像編集画面を実装できます。

主な特徴として、

Crop Widget
CropController
ズーム・パン操作
円形トリミング
アスペクト比固定
Undo / Redo
マルチプラットフォーム対応

などが挙げられます。

特に、プロフィール画像編集、SNS投稿、ECサイトの商品画像、AIアプリの画像切り抜きなど、柔軟なトリミングUIを実装したいFlutterアプリで非常に有力な選択肢となるでしょう。