[flutter]ものすごく簡単にカメラと画像選択(ギャラリー)を実装して画像を取得できる様にする

LINEでの画像アップロードのような、カメラで撮影した画像を取得したりギャラリーで選択した画像を取得する処理は、かなり実装が面倒なのですが、そこはさすがFlutter。公式がパッケージを出しているので使っていきます。

導入

まずはpubspec.yamlにて記述を追加。

dependencies:
  image_picker: ^0.6.7+22

バージョンは適宜適切なものを指定してください。

https://pub.dev/packages/image_picker/install

その後、iOS側でinfo.plistに追加。ios/Runnerの中にあります。

<key>NSPhotoLibraryUsageDescription</key>
<string>requires to access photo library</string>
<key>NSCameraUsageDescription</key>
<string>requires to use your camera</string>
<key>NSMicrophoneUsageDescription</key>
<string>requires to use your microphone</string>

英語力は壊滅的なので良い感じに変えてください。

Android側はSDKバージョンが＜29ならパーミッションが必要だと書いてあります。とりあえずbuild.gradleのtargetSdkVersionを29に変えておきました。

ここの変更はホットリロードでは反映されないので気をつけてくださいね。

実装

使いたいpageにてimport追加。

import 'dart:io';
import 'package:image_picker/image_picker.dart';

そして以下のコードを実装。まずはカメラです。

final picker = ImagePicker();


var pickedFile = await picker.getImage(source: ImageSource.camera);
File file = File(pickedFile.path);

ちなみに許可されていない場合は以下のエラーが発生します。

PlatformException (PlatformException(camera_access_denied, The user did not allow camera access., null, null))

なのでtry-catchも書いておきましょう。

try{

}
on PlatformException catch (err) {
  print(err);
}

ここで何かしら、設定画面を開いて変更するように促す必要がありますね。

ギャラリーで画像選択はこちら。

var pickedFile = await picker.getImage(source: ImageSource.gallery);
File file = File(pickedFile.path);

なんと列挙型の値をgalleryに変えるだけなのです。非常に簡単です。

ちなみに2021/02現在、iOSのシミュレータだと2度目のImagePicker起動時に落ちてしまう現象が発生します。シミュレータのバグだそうです。またカメラも使えませんので、しっかりとデバッグするなら実機が必要かも。

あとはimageで表示したりするだけ！簡単ですね。また、端末内に保存したい場合もFileのままでいいので助かります。