Tech

Flutterで写真撮影しよう!

投稿日:

はじめに

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

準備

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

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

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

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

実装

プレビューの表示

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

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

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

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

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

写真を撮る

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

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

 

さいごに

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

おすすめ書籍

現場で使える Flutter開発入門 (Compass Booksシリーズ) はじめてのFlutter入門: iOS/Androidアプリ開発の⼀歩を踏み出そう!

blog-page_footer_336




blog-page_footer_336




-Tech
-

執筆者:

免責事項

このブログは、記事上部に記載のある投稿日時点の一般的な情報を提供するものであり、投資等の勧誘・法的・税務上の助言を提供するものではありません。仮想通貨の投資・損益計算は複雑であり、個々の取引状況や法律の変更によって異なる可能性があります。ブログに記載された情報は参考程度のものであり、特定の状況に基づいた行動の決定には専門家の助言を求めることをお勧めします。当ブログの情報に基づいた行動に関連して生じた損失やリスクについて、筆者は責任を負いかねます。最新の法律や税務情報を確認し、必要に応じて専門家に相談することをお勧めします。


comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA


関連記事

C# マルチキャストデリゲートの備忘録

1 はじめに2 C#のデリゲートについて2.1 デリゲートの定義3 マルチキャストデリゲートについて3.1 追加方法3.2 削除方法4 さいごに5 おすすめ書籍 はじめに こんにちはsuzukiです。 ...

Firestoreのルール設定とdumpやrestoreが簡単に行えるfsrpl

1 はじめに2 Firestoreのルール設定2.1 全て許可2.2 本番環境でのルール設定例3 fsrpl3.1 fsrplとは3.2 インストール3.3 秘密鍵3.4 copy3.5 開発環境から ...

[Flutter] CustomPaintという選択肢

1 はじめに2 CustomPaint2.1 drawLine2.2 drawRect2.3 drawCircle2.4 drawPath3 さいごに4 おすすめ書籍 はじめに Flutterで用意さ ...

Go言語

Golang で図形描画してみた

1 はじめに2 Golangで画像描画する方法3 ggでの画像描画3.1 導入3.2 基本的な画像描画4 ジェネレーティブしてみた5 さいごに6 おすすめ書籍 はじめに 今回は、Goで2Dグラフィック ...

BlueZとは? bluetoothctlとPythonから使用する方法を紹介!

1 はじめに2 BlueZとは?2.1 D-Busとは?3 bluetoothctlでのペアリング3.1 ペアリング4 Pythonでの実装4.1 bluezeroでのペアリング実装5 さいごに6 お ...

フォロー

blog-page_side_responsive

2022年7月
 12
3456789
10111213141516
17181920212223
24252627282930
31  

アプリ情報

私たちは無料アプリもリリースしています、ぜひご覧ください。 下記のアイコンから無料でダウンロードできます。