作るもの
flutter初めたての初心者でも作れる簡単な、写真を選択して表示する簡単なiosアプリを作成しますー！
コードはこちら
flutterアプリの作成
flutter create camera_app
cd camera_app
image_pickerのインストール
flutter pub add image_picker
pubspec.yamlにimage_pickerが追加されています
image_picker: ^1.0.7
video_playerのインストール
image_pickerと同様にvideo_playerもインストールします
flutter pub add video_player
image_picker: ^1.0.7
video_player: ^2.8.3
iosのカメラの設定
まずはiosのカメラと写真フォルダへのアクセス権限の設定をします
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
+ <key>NSPhotoLibraryUsageDescription</key>
+ <string>フォトライブラリを利用する理由を記載</string>
+ <key>NSCameraUsageDescription</key>
+ <string>カメラを利用する理由を記載</string>
+ <key>NSMicrophoneUsageDescription</key>
+ <string>マイクを利用する理由を記載</string>
<!-- 略 -->
</dict>
</plist>
import 'dart:io';
import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
// 略
}
class MyHomePage extends StatefulWidget {
// 略
}
class _MyHomePageState extends State<MyHomePage> {
// カメラの処理
XFile? _image;
final ImagePicker _picker = ImagePicker();
// カメラから画像を指定する関数
Future<void> _getImageFromCamera() async {
final file = await _picker.pickImage(source: ImageSource.camera);
setState(() {
if (file != null) {
_image = XFile(file.path);
}
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: _image == null
? const Text("写真を撮ってね")
: Image.file(File(_image!.path)),
),
floatingActionButton: FloatingActionButton(
onPressed: _getImageFromCamera,
child: const Icon(Icons.photo_camera),
),
);
}
}
iosシミュレータを起動して実行するとこんな感じになりました
わからない方はこちらをみてみてください
カメラボタンを押すとエラーが出ました
おそらくシミュレータなので利用可能なカメラが存在しなかったからかと思います
実機で動かすとうまくいけてることが確認できます
実機での動かし方はこちらの記事などを参考にしてください
写真フォルダの設定
カメラの設定と同じように写真フォルダ用の関数を追加していきます
import 'dart:io';
import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
// 略
}
class MyHomePage extends StatefulWidget {
// 略
}
class _MyHomePageState extends State<MyHomePage> {
// カメラの処理
XFile? _image;
final ImagePicker _picker = ImagePicker();
// カメラから画像を指定する関数
Future<void> _getImageFromCamera() async {
// 略
}
// 写真フォルダから画像を指定する関数
+ Future<void> _getImageFromGallery() async {
+ final file = await _picker.pickImage(source: ImageSource.gallery);
+ setState(() {
+ if (file != null) {
+ _image = XFile(file.path);
+ }
+ });
+ }
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: _image == null
? const Text("写真を撮ってね")
: Image.file(File(_image!.path)),
),
+ floatingActionButton: Column(
+ mainAxisSize: MainAxisSize.min,
+ children: [
+ FloatingActionButton(
+ onPressed: _getImageFromCamera,
+ child: const Icon(Icons.photo_camera),
+ ),
+ FloatingActionButton(
+ onPressed: _getImageFromGallery,
+ child: const Icon(Icons.photo_album),
+ ),
+ ]),
);
}
}
実行すると右下のfloatingActionButtonが増えていると思います
下の写真フォルダ用のボタンをクリックすると写真を表示することができました
まとめ
ここまでで以上です
カメラ起動できなかったのはダメダメでしたが、flutter初心者でも簡単に写真を扱えたかなと思います
ご指摘等あればコメントお願いします
終わり〜〜
ばいちゃ〜〜
エラー日記
1. Image.file is not supported on Flutter Web
chromeで、Image.file(File(_image!.path))を使って画像を表示しようとしたら怒られました
僕の場合は、iosシミュレータを使って動かしましたが、どうしてもchromeで動かしたいときは代わりにImage.assetかImage.networkを使用すると良いみたいですね
"Image.file is not supported on Flutter Web. Consider using either Image.asset or Image.network instead."
参考記事