はじめに

Flutter アプリで画像にアノテーション（手書きや図形）を追加したい場面があります。
たとえば写真への注釈付け、署名機能、図面への書き込みなどです。

image_painter_rotate は、画像の上に直接描画できる Flutter パッケージです。
人気パッケージ image_painter をフォークし、画像の回転対応・描画オブジェクトの選択移動・削除などの機能を追加した強化版です。

元パッケージとの違い

機能	image_painter（原作）	image_painter_rotate（本パッケージ）
基本描画ツール	✅	✅
画像の回転（quarterTurns）	❌	✅
描画オブジェクトの選択・移動	❌	✅
描画オブジェクトの削除（長押し）	❌	✅

インストール

# pubspec.yaml
dependencies:
  image_painter_rotate: ^1.1.0

import 'package:image_painter_rotate/image_painter_rotate.dart';

描画モード

7種類の描画モードに対応しています。

モード	内容
Line	直線
Box / Rectangle	矩形
Circle	円
Freestyle / Signature	フリーハンド・署名
Dotted Line	点線
Arrow	矢印
Text	テキスト

基本的な使い方

コントローラーの初期化

final controller = ImagePainterController();

画像の読み込み

ネットワーク画像、アセット、ファイル、メモリバイトの4種類に対応しています。

// ネットワーク画像
ImagePainter.network(
  'https://example.com/sample.png',
  controller: controller,
  scalable: true,
)

// アセット画像
ImagePainter.asset(
  'assets/sample.png',
  controller: controller,
)

// ファイル
ImagePainter.file(
  File('path/to/image.png'),
  controller: controller,
)

// メモリ（Uint8List）
ImagePainter.memory(
  imageBytes,
  controller: controller,
)

画像の回転（quarterTurns）

本パッケージの追加機能のひとつが quarterTurns パラメータです。
画像を90度単位で回転させた状態で表示・描画できます。

ImagePainter.network(
  'https://example.com/photo.png',
  controller: controller,
  scalable: true,
  quarterTurns: 1, // 0=0°, 1=90°, 2=180°, 3=270°
)

カメラで撮影した画像など、向きが異なる画像をそのまま扱えるため、回転補正のために画像を加工する手間が省けます。

描画オブジェクトの選択・移動

v1.0.0 で追加された機能です。
一度描画したオブジェクトをタップして選択し、ドラッグで移動できます。
選択中のオブジェクトはアニメーション付きのボーダーで表示されます。
空白エリアをタップすると選択が解除されます。

描画オブジェクトの削除

v1.1.0 で追加された機能です。
描画済みのオブジェクトを長押しすると削除メニューが表示され、特定のオブジェクトだけを削除できます。

画像のエクスポート

描画後の画像を Uint8List として取得できます。
ファイル保存やアップロードに活用できます。

// ボタン押下時に画像をエクスポート
ElevatedButton(
  onPressed: () async {
    final Uint8List? imageBytes = await controller.exportImage();
    if (imageBytes != null) {
      // ファイルに保存
      await File('path/output.png').writeAsBytes(imageBytes);
    }
  },
  child: const Text('保存'),
)

アンドゥ・クリア

// 直前の操作を元に戻す
controller.undo();

// すべての描画をクリア
controller.clearAll();

実装例：写真アノテーション画面

class AnnotationScreen extends StatefulWidget {
  const AnnotationScreen({super.key, required this.imageUrl});
  final String imageUrl;

  @override
  State<AnnotationScreen> createState() => _AnnotationScreenState();
}

class _AnnotationScreenState extends State<AnnotationScreen> {
  final _controller = ImagePainterController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('アノテーション'),
        actions: [
          IconButton(
            icon: const Icon(Icons.undo),
            onPressed: _controller.undo,
          ),
          IconButton(
            icon: const Icon(Icons.delete_sweep),
            onPressed: _controller.clearAll,
          ),
          IconButton(
            icon: const Icon(Icons.save),
            onPressed: _exportImage,
          ),
        ],
      ),
      body: ImagePainter.network(
        widget.imageUrl,
        controller: _controller,
        scalable: true,
      ),
    );
  }

  Future<void> _exportImage() async {
    final bytes = await _controller.exportImage();
    if (bytes == null) return;

    // bytes をファイル保存・アップロード等で使用
    debugPrint('exported: ${bytes.length} bytes');
  }
}

対応プラットフォーム

プラットフォーム	対応
iOS	✅
Android	✅
macOS	✅
Windows	✅
Linux	✅
Web	❌

まとめ

image_painter_rotate を使うことで、以下の機能を Flutter アプリに手軽に組み込めます。

7種類の描画ツール（直線・矩形・円・フリーハンド・点線・矢印・テキスト）
画像の回転表示（quarterTurns）
描画オブジェクトの選択・移動・削除
アンドゥ・クリア・画像エクスポート

画像へのアノテーション機能が必要な場合にぜひ活用してみてください。

リンク