📷
カメラ機能の実装(imagepicker)
はじめに
こんにちは、たかくです！
普段はバンタンテックフォードアカデミーという都内の学校に通っています！
今現在、作成しているアプリにカメラ機能があるので、アプリとは違った
やり方でカメラ機能を実装してみたので記事にしました。
事前準備
image_pickerパッケージをインストール
パッケージをインストールするために、pubspec.yamlに以下のように追加します。
pubspec.yaml
dependencies:
flutter:
sdk: flutter
// 以下を追加
image_picker: ^0.8.5+1
iOS
次に、カメラやフォトライブラリを利用するために以下の設定をします。
ios/Runner/Info.plist
<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はimage_pickerが更新され、secoped storageを使用するようになったため
AndroidManifest.xml の <application> タグに android:requestLegacyExternalStorage="true"
を追加する必要は無くなったので設定は不要です。
カメラ機能の実装
カメラから写真を取得する部分は下記になります。
snipet.dart
New API
picker.pickImage(source: ImageSource.camera); ⭕️
Old API
picker.getImage(source: ImageSource.camera); ❌
getImageは使えないのでpickImageを使います！
全体のソースコード
main.dart
import 'dart:io';
import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';
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> {
// imagepickerを使うために次の二行を追加する
File? _image;
final _picker = ImagePicker();
Future getImageFromCamera() async {
// カメラから写真を取得する部分
final pickedFile = await _picker.pickImage(source: ImageSource.camera);
setState(() {
if (pickedFile != null) {
// 写真取得後に_imageを更新して表示している
_image = File(pickedFile.path);
}
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('カメラ',
style: TextStyle(color: Colors.white),
),
backgroundColor: Colors.cyan,
),
body: Center(
// imageがnullだったら写真を撮る
child: _image == null?
Text('写真を撮る')
: Image.file(_image!),
),
// floatingActionButtonLocationでボタンの位置を指定します
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
floatingActionButton: FloatingActionButton(
onPressed: getImageFromCamera,
child: Icon(Icons.photo_camera,
// カメラアイコンの色を指定
color: Colors.white,
),
// アイコンの背景の色を指定
backgroundColor: Colors.cyan,
),
);
}
}
動作確認
カメラモード
撮影した写真を表示
カメラ撮影と写真の表示ができました！
imagepickerを使えばズーム機能や外カメラ、インカメラも使えます🎉
さいごに
初めて記事を書いてみて、自分が思い描いていることを形にする難しさ
理解したことを言葉にする難しさ、もっと勉強しなきゃなと改めて思いました。
後、普段物凄くお世話になっているFlutter大学のURL貼っときます！
質問zoomや共同開発、オンライン交流会などとても充実しているコミュニティで自分が挑戦していることや、自分の弱さなど全部受け止めてくれるそんな場所だと思っています。
恵まれた環境にいられることに感謝して日々挑戦していこうと思います！
自分と歳が近い人が入ってくれると嬉しいです！笑
今回のプロジェクトも公開しています！
参考にした記事
Discussion