カテゴリ: Flutterの機能拡張 更新日: 2025/10/31

Flutterでカメラ機能を使う!写真撮影・動画撮影の基本を初心者向けに解説

280
Flutterでカメラ機能を使う!写真撮影・動画撮影の基本

先生と生徒の会話形式で理解しよう

生徒

「Flutterでカメラを使って写真を撮ったり、動画を撮ったりすることってできますか?」

先生

「はい、Flutterにはcameraパッケージがあって、写真撮影も動画撮影も対応していますよ。ネイティブのカメラ機能をFlutterで簡単に使えるようになっています。」

生徒

「どんな手順でカメラを使うんですか?初心者でもできるように順番に教えてもらえますか?」

先生

「もちろんです。カメラの初期化から写真・動画の撮影、保存の基本までを順に説明しますね。」

1. Flutterでカメラ機能を使うには?

1. Flutterでカメラ機能を使うには?
1. Flutterでカメラ機能を使うには?

Flutterでカメラを使うには、公式のcameraパッケージを利用します。写真撮影や動画録画、プレビュー表示、フラッシュ制御などが可能です。Flutterアプリでスマホのネイティブカメラ機能を活用したいときには必須のパッケージです。

セットアップ手順としては、以下の流れになります:

  • cameraパッケージの導入
  • カメラの初期化処理
  • プレビューの表示
  • 写真や動画の撮影
  • ストレージ保存とパス管理

2. cameraパッケージの導入と設定

2. cameraパッケージの導入と設定
2. cameraパッケージの導入と設定

まずpubspec.yamlcamerapath_providerパッケージを追加します。後者はファイル保存時に使います。


dependencies:
  camera: ^0.10.5+5
  path_provider: ^2.1.2

Android側ではAndroidManifest.xmlに以下のパーミッションを追加します。


<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.RECORD_AUDIO"/>

iOSではInfo.plistに以下のキーを追加します。


<key>NSCameraUsageDescription</key>
<string>カメラを使用します</string>
<key>NSMicrophoneUsageDescription</key>
<string>音声を録音します</string>

3. カメラの初期化とプレビューの表示

3. カメラの初期化とプレビューの表示
3. カメラの初期化とプレビューの表示

カメラを使う前に、利用可能なカメラの一覧を取得して、コントローラーを作成する必要があります。初期化後、CameraPreviewでプレビューを画面に表示できます。


List<CameraDescription> cameras = await availableCameras();
CameraController controller = CameraController(
  cameras[0], 
  ResolutionPreset.high,
);
await controller.initialize();

初期化後にcontrollerを使ってプレビューウィジェットを表示できます。


CameraPreview(controller)

Flutterを「実務レベル」で使えるようになりたい人や、 iPhone / Android両対応アプリ開発の流れをまとめて学びたい人には、 定番の実践書がこちらです。

Flutter実践開発をAmazonで見る

※ Amazon広告リンク

4. 写真を撮影して保存する方法

4. 写真を撮影して保存する方法
4. 写真を撮影して保存する方法

写真を撮るにはtakePicture()メソッドを使います。保存先はpath_providerで取得したアプリのドキュメントディレクトリがおすすめです。


final directory = await getApplicationDocumentsDirectory();
final imagePath = '${directory.path}/photo.jpg';
await controller.takePicture(imagePath);

保存後、ギャラリーに表示したい場合は、別途パッケージ(例:gallery_saver)が必要です。

5. 動画を撮影して保存する方法

5. 動画を撮影して保存する方法
5. 動画を撮影して保存する方法

動画撮影はstartVideoRecording()stopVideoRecording()を使って開始・停止します。基本的な流れは写真撮影と似ています。


final videoPath = '${directory.path}/video.mp4';
await controller.startVideoRecording();
await Future.delayed(Duration(seconds: 5)); // 5秒間録画
final file = await controller.stopVideoRecording();
await file.saveTo(videoPath);

録画中は録画インジケーターを表示したり、UIで録画中状態をわかりやすくしておくのが一般的です。

6. カメラ機能でよくあるエラーと対処法

6. カメラ機能でよくあるエラーと対処法
6. カメラ機能でよくあるエラーと対処法

Flutterのカメラ機能を使う際、初心者がよくつまずくポイントも紹介しておきます。

  • カメラが真っ黒:初期化処理が完了していない場合、プレビューが表示されません。initialize()後にsetState()で更新しましょう。
  • パーミッションが足りない:AndroidやiOSの設定ファイルで適切な権限を設定していないと、カメラ起動時にクラッシュします。
  • 録画が保存されない:ファイルのパス指定ミスや保存先のアクセス権限不足が原因です。

このようなトラブルは、ログ出力で確認しながら一つ一つ解決していきましょう。

7. Flutterでカメラを使う応用テクニック

7. Flutterでカメラを使う応用テクニック
7. Flutterでカメラを使う応用テクニック

基本的なカメラ機能を習得したら、以下のような機能追加もおすすめです:

  • フロントカメラとバックカメラの切り替え
  • フラッシュのON/OFF切り替え
  • 録画時間の制限機能
  • 録画中にサムネイル画像をリアルタイムで表示

Flutterのカメラ機能は、UIの自由度が高いため、初心者でも実用的なアプリを作りやすいのが魅力です。

Flutterの機能拡張の一覧へ
新着記事
FlutterのMVP・MVVMアーキテクチャの違いと使い分け
FlutterのMVP・MVVMアーキテクチャの違いと使い分けを初心者向けに解説!
オニオンアーキテクチャの基本とFlutterでの適用例
オニオンアーキテクチャの基本とFlutterでの適用例を初心者向けに解説
クリーンアーキテクチャとは?Flutterでの導入メリット
クリーンアーキテクチャとは?Flutterでの導入メリットをやさしく解説
【AWS】RDS for Oracleの特徴・できないこと・バージョン・料金まとめ
【AWS】RDS for Oracleの特徴・できないこと・バージョン・料金を初心者向けに徹底解説
人気記事
インスタンスタイプの料金比較と最適な選び方(最新2025年版)
AWSのインスタンスタイプの料金比較と最適な選び方【2025年最新版】
【AWS】VPCの料金体系まとめ!無料枠・通信費・各種サービスごとの料金を徹底解説
【AWS】VPCの料金体系まとめ!無料枠・通信費・各種サービスごとの料金を徹底解説
【AWS】VPCエンドポイントとは?種類・使い方・S3連携まで完全解説
【AWS】VPCエンドポイントとは?種類・使い方・S3連携まで完全解説
【AWS】s3 cpコマンド完全ガイド!基本・recursive・exclude/includeも解説
【AWS】s3 cpコマンド完全ガイド!基本・recursive・exclude/includeも解説

🔌 USBポート不足を解消

Type-C 1本で拡張。
開発・作業環境を一気に快適に

UGREEN USB-Cハブを見る

※ Amazon広告リンク