本記事では、Flutterでカメラを実装する方法について解説をしていきます。
これからカメラ機能を実装してみたい方は是非参考ください。
カメラを実装する方法
使用するライブラリ
Flutterでカメラを実装したい場合は「image_picker」を利用します。
image_pickerを使えば、実機デバイスのカメラ機能にアクセスして利用できるようになります。
実装してみよう
実際に実装してみましょう。
今回実装したソースコードは以下で全量を確認できます。
ライブラリの追加
pubspec.yamlに以下のライブラリを追加してください。
dependencies:
flutter:
sdk: flutter
image_picker: ^0.8.5 #追加設定ファイルの修正
次に今回はデバイスの写真アルバムへのアクセス、実機端末のカメラ機能へのアクセスが必要になりますので以下の設定を行います。
iOS端末で実行する場合
ios/Runner/Info.plistの<dict>タグ配下
<key>NSPhotoLibraryUsageDescription</key>
<string>This app requires to access your photo library</string>
<key>NSCameraUsageDescription</key>
<string>This app requires to add file to your camera</string>
<key>NSMicrophoneUsageDescription</key>
<string>This app requires to add file to your photo library your microphone</string>Android端末で実行する場合
android/app/src/main/AndroidManifest.xmlの<application> タグ配下に追加
android:requestLegacyExternalStorage="true"カメラ機能の実装
最後にmain.dartを以下の内容に書き換えてください。
import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';
import 'dart:io'; // Fileクラスを利用するためにインポート
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
File _image = File("");
final picker = ImagePicker();
var imgFlg = false;
Future getImage() async {
final pickedFile = await picker.pickImage(source: ImageSource.camera);
setState(() {
if (pickedFile != null) {
try {
_image = File(pickedFile.path);
imgFlg = true;
} catch (e) {
imgFlg = false;
}
}
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: imgFlg ? Image.file(_image) : Text('写真を撮ってみましょう！'),
),
floatingActionButton: FloatingActionButton(
onPressed: getImage,
child: Icon(Icons.add_a_photo),
),
);
}
}
重要なポイント
カメラ機能を利用するためのライブラリとカメラで撮影した画像を一時的に保存しておくFileクラスを使うために以下のライブラリをインポート
import 'package:image_picker/image_picker.dart';
import 'dart:io'; // Fileクラスを利用するためにインポート撮影した画像や、アクセスするカメラ機能の情報、撮影した画像へのアクセスができたかどうかのフラグ情報を管理する変数を定義
File _image = File("");
final picker = ImagePicker();
var imgFlg = false;getImage()では、カメラ機能へのアクセスや、撮影した画像の保存、それらが成功したかどうかの確認を行なっています。
Future getImage() async {
final pickedFile = await picker.pickImage(source: ImageSource.camera);
setState(() {
if (pickedFile != null) {
try {
_image = File(pickedFile.path);
imgFlg = true;
} catch (e) {
imgFlg = false;
}
}
});
}UI上では、フラグ情報を確認した、撮影した画像にアクセスできれば画像を表示し、アクセスできなければ文字列情報を表示しています。
body: Center(
child: imgFlg ? Image.file(_image) : Text('写真を撮ってみましょう！'),
),getImage()の呼び出しはfloatingActionButtonのonPressedオプションで行なっています。
floatingActionButton: FloatingActionButton(
onPressed: getImage,
child: Icon(Icons.add_a_photo),
),まとめ
いかがでしたか？
Flutterであればカメラの実装が簡単にできますので、是非この機会に習得してみてください。
今回実装したソースコードは以下で全量を確認できます。
デフォルトのカウンターアプリとの差分のみ確認したい方は以下を参考ください。
最新のFlutterの勉強方法 まとめ
Flutterを入門から実践レベルまで一通り学習できる方法をまとめました。
