🙆
[Flutter]カメラ使えるようにしたよ
Daily Blogging24日目
今回はFlutterアプリでカメラ使えるようにした
最終的にこんな感じになりました
import 'package:image_picker/image_picker.dart';
Future<void> _pickImage() async {
final ImagePicker _picker = ImagePicker();
final XFile? image = await _picker.pickImage(source: ImageSource.camera);
if (image != null) {
// TODO: 画像パスをDBに格納する
print('Image path: ${image.path}');
}
}
Widget buildCameraButton() {
return ElevatedButton(
onPressed: _pickImage,
style: ElevatedButton.styleFrom(
foregroundColor: Colors.black,
backgroundColor: MyColors.warmYellow,
),
child: const Text(
'Take a Photo',
style: TextStyle(fontSize: 20),
),
);
}
使用したライブラリ
今回はimage_pickerを使用
カメラ系のライブラリはいくつかある。
-
image_picker
- Flutter公式ライブラリ
- 端末のカメラ機能を呼び出して使える
- 写真フォルダからの画像選択
- 写真撮影
-
camera
- Flutter公式のライブラリ
- より高機能なカメラ機能を実装できる
- カメラ映像をウィジェットに表示するプレビュー機能とか
- 利用シーン:ARカメラとかカメラあぷり
-
camera_web
- webカメラ用
-
flutter_camera_ml_vision
- 機械学習に特化したパッケージ
今回はとりあえず写真撮影ができれば問題ないのでimage_pickerを選択した
使い方
めちゃ簡単。
image_pickerをインポートして
import 'package:image_picker/image_picker.dart';
必要な箇所で呼び出すだけ
final ImagePicker _picker = ImagePicker();
final XFile? image = await _picker.pickImage(source: ImageSource.camera);
これでカメラが起動する。
ImageSource.galleryにすると、フォルダから画像を選択できるようになる
// Pick an image.
final XFile? image = await picker.pickImage(source: ImageSource.gallery);
// Capture a photo.
final XFile? photo = await picker.pickImage(source: ImageSource.camera);
なぜカメラを使用するのか
スマホアプリの開発の場合、端末の機能を利用する時にはユーザに許可を求める必要があります。
カメラもまさに許可が必要な機能ですね
許可を求めるポップアップはカメラ機能を使うときに勝手にポップアップされますが、
なぜカメラの使用が必要なのかという説明のメッセージはこっちでカスタマイズ可能です
こういうポップアップ
// ios/Runner/Info.plist
<key>NSCameraUsageDescription</key>
<string>このアプリでは、思い出の記録のためカメラを使用します。</string>
一瞬の躓き
実装して動作確認した時にこのメッセージが表示された
理由は簡単で、iPhoneシミュレータで動作確認してたから。
実機は面倒臭いからシミュレータで動作確認できるやつは全部シミュレータでやろうと思って
そのままカメラ機能もシミュレータでやってた
シミュレータにはカメラ機能が搭載されてないので、実機で確認する必要があるよ
Discussion