Flutterで写真撮影しよう！

1 はじめに
2 準備
3 実装
- 3.1 プレビューの表示
- 3.2 写真を撮る
4 さいごに
5 おすすめ書籍

はじめに

今回はFlutterでカメラを使用して、プレビューの表示と写真の撮影を行いたいと思います。カメラとかデバイス周りは面倒そうと思っていましたが、かなり簡単に実装できたので紹介します。

準備

まずはパッケージのcameraをpubspec.yamlに追加しましょう。

 flutter pub add camera

1	flutter pub add camera

pubspec.yamlに追加されていれば成功です。

 camera: ^0.9.8+1

1	camera: ^0.9.8+1

次は、iOSでカメラを使用するために、Info.plistに以下の内容を追加します。

 <key>NSCameraUsageDescription</key> <string>カメラ使います</string> <key>NSMicrophoneUsageDescription</key> <string>マイクを使います</string>

<key>NSCameraUsageDescription</key>

<string>カメラ使います</string>

<key>NSMicrophoneUsageDescription</key>

<string>マイクを使います</string>

また、cameraパッケージの動作環境は、iOSでは10以上、Androidは21以上になっています。それ以下のバージョンでは動作しません。

実装

プレビューの表示

最初に、カメラのプレビューをアプリで表示したいと思います。
まずは、デバイスで使用できるカメラの一覧を取得します。

 import 'package:camera/camera.dart'; import 'package:flutter/material.dart'; late List<CameraDescription> _cameras; Future<void> main() async { WidgetsFlutterBinding.ensureInitialized(); // 使用できるカメラの一覧取得 _cameras = await availableCameras(); runApp(const CameraApp()); }

import 'package:camera/camera.dart';

import 'package:flutter/material.dart';

late List<CameraDescription> _cameras;

Future<void> main() async {

WidgetsFlutterBinding.ensureInitialized();

// 使用できるカメラの一覧取得

_cameras = await availableCameras();

runApp(const CameraApp());

}

CameraDescriptionの中身は以下のようになっており、バックカメラやフロントカメラを取得することができます。

 CameraDescription(com.apple.avfoundation.avcapturedevice.built-in_video:0, CameraLensDirection.back, 90)

1	CameraDescription(com.apple.avfoundation.avcapturedevice.built-in_video:0, CameraLensDirection.back, 90)

次にカメラを制御するためのCameraControllerを作成します。

 class CameraApp extends StatefulWidget { /// Default Constructor const CameraApp({Key? key}) : super(key: key); @override State<CameraApp> createState() => _CameraAppState(); } class _CameraAppState extends State<CameraApp> { late CameraController controller; @override void initState() { super.initState(); controller = CameraController(_cameras[0], ResolutionPreset.max); controller.initialize().then((_) { if (!mounted) { return; } setState(() {}); }).catchError((Object e) { if (e is CameraException) { switch (e.code) { case 'CameraAccessDenied': print('User denied camera access.'); break; default: print('Handle other errors.'); break; } } }); }

class CameraApp extends StatefulWidget {

/// Default Constructor

const CameraApp({Key? key}) : super(key: key);

@override

State<CameraApp> createState() => _CameraAppState();

}

class _CameraAppState extends State<CameraApp> {

late CameraController controller;

@override

void initState() {

super.initState();

controller = CameraController(_cameras[0], ResolutionPreset.max);

controller.initialize().then((_) {

if (!mounted) {

return;

}

setState(() {});

}).catchError((Object e) {

if (e is CameraException) {

switch (e.code) {

case 'CameraAccessDenied':

print('User denied camera access.');

break;

default:

print('Handle other errors.');

break;

}

});

}

CameraControllerの第一引数に最初に取得したCameraDescriptionを、第二引数に解像度の指定を入れます。ResolutionPreset.maxを指定することで使用できる最大の解像度を設定してくれます。CameraControllerを生成したらinitializeを行い、CameraControllerの準備は完了です。

 @override Widget build(BuildContext context) { if (!controller.value.isInitialized) { return Container(); } return MaterialApp( home: CameraPreview(controller), ); }

@override

Widget build(BuildContext context) {

if (!controller.value.isInitialized) {

return Container();

}

return MaterialApp(

home: CameraPreview(controller),

);

}

最後にCameraPreviewにCameraControllerをセットすれば、カメラのプレビュー表示は完了です。

写真を撮る

プレビューの表示が出来たので、次は写真を取りたいと思います。写真撮影は、CameraControllerのtakePictureを呼び出すことで、簡単に行うことができます。プレビューの表示箇所にFloatingActionButtonを設置してtakePictureを呼びたいと思います。

 @override Widget build(BuildContext context) { return MaterialApp( home:Scaffold( body: Center( child: controller.value.isInitialized ? CameraPreview(controller) : Container() ), floatingActionButton: FloatingActionButton( onPressed: () async { // 写真を撮る final imageFile = await controller.takePicture(); // path を出力 print(imageFile.path); }, child: const Icon(Icons.camera_alt), ), ) ); }

@override

Widget build(BuildContext context) {

return MaterialApp(

home:Scaffold(

body: Center(

child: controller.value.isInitialized ?

CameraPreview(controller) :

Container()

floatingActionButton: FloatingActionButton(

onPressed: () async {

// 写真を撮る

final imageFile = await controller.takePicture();

// path を出力

print(imageFile.path);

child: const Icon(Icons.camera_alt),

)

);

}

パスを出力すると以下のようになっているので、jpgで画像が保存されているのがわかります。

 flutter: /var/mobile/Containers/Data/Application/xxx/Documents/camera/pictures/CAP_xxx.jpg

1	flutter: /var/mobile/Containers/Data/Application/xxx/Documents/camera/pictures/CAP_xxx.jpg

さいごに

swiftでカメラを使用するときなど、結構面倒なコードを書かなくてはいけないので気後れしていましたが、かなり簡単にプレビュー表示など行えるので気軽に実装できますね。

日	月	火	水	木	金	土
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30
31

Flutterで写真撮影しよう！

はじめに

準備

実装

プレビューの表示

写真を撮る

さいごに

おすすめ書籍

フォロー

アプリ情報