はじめに
本記事では、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に保存するの？など）、事前に要件として明確にしておく必要があると感じました。導入だけなら非常に簡単ですので、一度試していただくことをお勧めします。
以上。