【Flutter】image_picker 簡単導入ガイド

はじめに

本記事では、Flutterアプリにカメラによる写真撮影機能を導入しましたので、その導入ガイド記事となります。

image_picker 選定背景

Flutterでは、カメラ機能を実現するためのパッケージはいくつかあります。例えば、image_picker以外ですと、camera、photo_manager などです。
そこで、私が image_picker を選択した背景は、以下のようなことを検討した結果です。

まず、camera パッケージはめちゃくちゃ強力で、カメラの細かい制御が可能なようですが、設定がちょっと複雑になってきそうです。初心者には少しハードルが高いかもしれないと考えました。
一方で、photo_manager は、大量の画像や動画を扱うときに便利なようですが、シンプルなケースではオーバースペック感がありそうでした。

本命の image_picker は、Flutterアプリに写真の撮影やギャラリーからの選択を簡単に追加できそうでした。セットアップも簡単で、必要な機能をすぐに使える点に大きな魅力を感じました。さらに、image_picker はメンテナンスがしっかりしていて、Flutterのバージョンアップにも迅速に対応していそうでした。やはりメンテナンス性は、ストア公開するアプリにとっては非常に重要ですね。

このように、使いやすさ、柔軟性、安定性のバランスがとれてるため、image_picker を選択しました。

環境情報

参考までに、導入時の開発環境とバージョンは以下のとおりです。
・MacBook Pro M1(Ventura 13.6.3)
・Android Studio Giraffe | 2022.3.1 Patch 1
・Xcode:15.1

・Flutter:3.13.1
・image_picker:1.0.4

導入ステップ

パッケージへのリンクは以下となります。最新情報はこちらをご確認ください。

パッケージの追加

まずはパッケージをプロジェクトに追加します。

flutter pub add image_picker

AndroidとiOSの設定

AndroidとiOSで、カメラやギャラリーを使うための許可設定をします。

Android : AndroidManifest.xmlに以下を追加します。

<uses-permission android:name="android.permission.CAMERA"/>
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>

iOS : Info.plist に、カメラとフォトライブラリへのアクセス理由を追加します。

<key>NSCameraUsageDescription</key>
<string>カメラを使用する理由を記述</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>フォトライブラリを使用する理由を記述</string>

※　iOSアプリを AppStore に公開する場合、上記の説明では審査でリジェクトされる可能性があります。具体的な使用理由を記載するようにしましょう。

コードの実装

カメラやギャラリーからの写真選択を実装するには、まずは、image_picker パッケージを使えるように、import文を追加します。

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

次に、写真を撮影するためのコードと、ギャラリーから写真を選択するためのコードを記述します。
写真を撮影するコード:

final ImagePicker _picker = ImagePicker();
// カメラを起動して写真を撮影
final XFile? photo = await _picker.pickImage(source: ImageSource.camera);
// ファイルを扱う処理は省略・・・

ギャラリーから選択するコード:

final ImagePicker _picker = ImagePicker();
// ギャラリーから写真を選択
final XFile? image = await _picker.pickImage(source: ImageSource.gallery);
// ファイルを扱う処理は省略・・・

これらのコードを使えば、ユーザーがアプリで簡単に写真を撮ったり、ギャラリーから写真を選んだりできるようになり、非常に便利になること間違いなしですね。

なお、写真を撮影するのか、ギャラリーから選択するかの判定する処理については、アプリの要件に関わる部分のため、今回省略しました。ボタンによってどちらかから選択するのか、切り替える処理にするのが簡単な方法でしょう。

所感

image_picker により簡単にカメラ撮影、とギャラリー選択機能を導入することができました。本記事では省略しましたが、実際には、撮影後の画像をアプリの中でどのように扱うのか（圧縮するの？DBに保存するの？など）、事前に要件として明確にしておく必要があると感じました。導入だけなら非常に簡単ですので、一度試していただくことをお勧めします。

以上。