Flutterで画像編集を手軽に実現！「pro_image_editor」

画像編集機能は、SNSアプリやカメラアプリ、Eコマースなど多くのFlutterアプリで必要とされる機能です。しかし、Flutterで画像編集を実装しようとすると、いくつかの課題に直面します。

  • 複雑なUI実装が必要になる
  • プラットフォーム間の一貫性を保つのが難しい
  • パフォーマンスとユーザー体験の両立が困難

こうした悩みをシンプルに解決できるのが、今回紹介する「pro_image_editor」です。

pro_image_editorとは？

pro_image_editor は、Flutterでシンプルかつ高機能な画像編集を実現するパッケージです。

主な特徴：

  • 多彩な編集ツール（トリミング、フィルター、テキスト追加など）
  • クロスプラットフォーム対応（iOS/Android）
  • カスタマイズ性の高いUI
  • 軽量かつ高速な処理
  • シンプルなAPIで素早く実装可能

画像加工機能を「ちょうどいい感じで」アプリに組み込みたいときに最適な選択肢です。

インストール方法

まずは pubspec.yaml に依存関係を追加します。

dependencies:
  pro_image_editor: ^1.2.0  # 最新版は pub.dev を確認

基本の使い方

1. 画像エディターの表示

import 'package:pro_image_editor/pro_image_editor.dart';

// 画像ファイルから
final imageFile = File('path/to/image.jpg');
final editor = ProImageEditor(
  image: ProImage.file(imageFile),
  onImageEditComplete: (editedImage) {
    // 編集完了後の処理
    setState(() {
      resultImage = editedImage;
    });
  },
);

ネットワーク画像やアセット画像もサポート：

ProImage.network('https://example.com/image.jpg');
ProImage.asset('assets/images/sample.jpg');

2. エディターのカスタマイズ

ProImageEditor(
  image: ProImage.file(imageFile),
  config: const ProImageEditorConfig(
    themes: ProImageEditorThemes(
      primary: Colors.blue,
      background: Colors.white,
    ),
    features: [
      ProImageEditorFeature.crop,
      ProImageEditorFeature.filter,
      ProImageEditorFeature.text,
      ProImageEditorFeature.draw,
      ProImageEditorFeature.sticker,
    ],
  ),
  onImageEditComplete: (editedImage) {
    // 処理
  },
);

3. プログラムからの編集操作

コントローラーを使って画像編集をプログラムから操作することも可能です。

final editorController = ProImageEditorController();

// コントローラーをウィジェットに渡す
ProImageEditor(
  controller: editorController,
  image: ProImage.file(imageFile),
  onImageEditComplete: (editedImage) {
    // 処理
  },
);

// 別の場所からトリミングを開始
onTap: () {
  editorController.startCropping();
}

高度な使い方

カスタムフィルターの追加

独自のフィルターエフェクトを追加することもできます。

final customFilters = [
  ProImageFilter(
    name: 'モノクローム',
    apply: (img) => img.applyColorMatrix([
      0.33, 0.33, 0.33, 0, 0,
      0.33, 0.33, 0.33, 0, 0,
      0.33, 0.33, 0.33, 0, 0,
      0, 0, 0, 1, 0,
    ]),
  ),
  // 他のフィルターも追加可能
];

ProImageEditor(
  image: ProImage.file(imageFile),
  config: ProImageEditorConfig(
    customFilters: customFilters,
  ),
  onImageEditComplete: (editedImage) {
    // 処理
  },
);

スタンプやステッカー機能のカスタマイズ

アプリ独自のステッカーを追加することも簡単です。

final customStickers = [
  ProSticker(
    name: 'カスタムステッカー1',
    asset: 'assets/stickers/custom1.png',
  ),
  ProSticker(
    name: 'カスタムステッカー2',
    asset: 'assets/stickers/custom2.png',
  ),
];

ProImageEditor(
  image: ProImage.file(imageFile),
  config: ProImageEditorConfig(
    customStickers: customStickers,
  ),
  onImageEditComplete: (editedImage) {
    // 処理
  },
);

実装例: シンプルな画像編集フロー

ギャラリーから画像を選択して編集するシンプルな例を見てみましょう。

import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';
import 'package:pro_image_editor/pro_image_editor.dart';

class ImageEditDemo extends StatefulWidget {
  @override
  _ImageEditDemoState createState() => _ImageEditDemoState();
}

class _ImageEditDemoState extends State<ImageEditDemo> {
  File? _image;
  File? _editedImage;
  
  Future<void> _pickImage() async {
    final picker = ImagePicker();
    final pickedFile = await picker.pickImage(source: ImageSource.gallery);
    
    if (pickedFile != null) {
      setState(() {
        _image = File(pickedFile.path);
      });
      
      // 画像選択後すぐに編集画面を表示
      _editImage();
    }
  }
  
  Future<void> _editImage() async {
    if (_image == null) return;
    
    final result = await Navigator.push(
      context,
      MaterialPageRoute(
        builder: (context) => Scaffold(
          body: ProImageEditor(
            image: ProImage.file(_image!),
            onImageEditComplete: (editedImage) {
              Navigator.pop(context, editedImage);
            },
            onCancel: () {
              Navigator.pop(context);
            },
          ),
        ),
      ),
    );
    
    if (result != null) {
      setState(() {
        _editedImage = result;
      });
    }
  }
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('画像編集デモ')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            if (_editedImage != null)
              Container(
                height: 300,
                width: 300,
                decoration: BoxDecoration(
                  border: Border.all(color: Colors.grey),
                ),
                child: Image.file(_editedImage!),
              )
            else
              Text('画像を選択して編集してください'),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: _pickImage,
              child: Text('画像を選択'),
            ),
          ],
        ),
      ),
    );
  }
}

注意点と補足

  • パフォーマンス: 大きなサイズの画像を編集する場合は、事前にリサイズすることをお勧めします
  • メモリ管理: 編集完了後に不要な一時ファイルは削除しましょう
  • 権限設定: iOS/Androidでの画像アクセス権限を適切に設定する必要があります
  • カスタマイズの深さ: テーマカラーやアイコンだけでなく、編集ツールの順序や表示・非表示も設定できます

まとめ

pro_image_editor は、Flutterでの画像編集機能をシンプルかつ柔軟に実装できるパッケージです。

特に以下のようなニーズに最適です：

  • SNSアプリなどで画像投稿前に基本的な編集機能を提供したい
  • Eコマースアプリで商品画像を調整する機能が欲しい
  • 画像編集アプリの基本機能をすぐに実装したい
  • プラットフォーム間で一貫した画像編集体験を提供したい

柔軟なカスタマイズ性と簡単な実装で、ユーザー体験を大幅に向上させることができます。Flutterアプリに画像編集機能を追加したいなら、ぜひpro_image_editorを試してみてください。

タイトルとURLをコピーしました