Closed KobayashiYoh closed 1 year ago
gallery_saverとは、Flutterで画像をアルバムに保存するためのパッケージです。
これを使えば、第1回で紹介したimage_pickerで撮影した写真をアルバムに保存することができます。
第1回で作成したflutterプロジェクトをそのまま使用すると楽です。
https://pub.dev/packages/gallery_saver
まず、pubspec.yamlのdependencies:
にgallery_saver: ^2.3.2
を追加します(flutter pub add gallery_saver
でも可)。
次に、pub getボタンをクリックします(flutter pub get
でも可)。
ここまで終わったら、image_pickerと同様にパーミッションを追加します。
今回はアルバムを使用するのでNSPhotoLibraryUsageDescription
を記述していきます。
しかし、第1回で使用したFlutterプロジェクトをそのまま使用する場合、既にパーミッションが追加されているので、新たに追加する必要はありません。
それ以外の場合はios/Runner/Info.plisetにNSPhotoLibraryUsageDescription
を追加してください。
詳しい方法は第1回の資料を参照してください。
まず、android.permission.WRITE_EXTERNAL_STORAGE
と呼ばれるパーミッションを追加します。
android/app/src/main/AndroidManifest.xmlを開き、上から2行目と3行目の間に<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
を下記のように追加します。
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example.image_picker_camera">
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<application
android:label="image_picker_camera"
公式ドキュメントだとここまでしか説明がないのですが、このままだと恐らくminSdkVersionに関するエラーが出てくると思います。 android/app/build.gradleを開き、デフォルトの値から21以上の値に変更しましょう。
defaultConfig {
// TODO: Specify your own unique Application ID (https://developer.android.com/studio/build/application-id.html).
applicationId "com.example.image_picker_camera"
minSdkVersion 21
targetSdkVersion 30
versionCode flutterVersionCode.toInteger()
versionName flutterVersionName
}
これでもまだエラーが表示されること場合あります。ext.kotlin_versionに関するエラーです。 これを解決するには、android/build.gradleの上から2行目にあるext.kotlin_versionを変更する必要があります。 '1.5.10’ぐらいに設定しておけば問題なく実行できると思います。
buildscript {
ext.kotlin_version = '1.5.10'
repositories {
google()
jcenter()
}
import 'dart:io';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:gallery_saver/gallery_saver.dart';
import 'package:image_picker/image_picker.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Image Picker App',
theme: ThemeData(
brightness: Brightness.dark,
floatingActionButtonTheme: FloatingActionButtonThemeData(
backgroundColor: Colors.blue[500],
),
),
debugShowCheckedModeBanner: false,
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key}) : super(key: key);
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
XFile? _imageFile;
final ImagePicker _picker = ImagePicker();
Future<void> _selectImageFromDevice(ImageSource source) async {
final pickedFile = await _picker.pickImage(source: source);
if (pickedFile == null) {
return;
}
if (source == ImageSource.camera) {
GallerySaver.saveImage(pickedFile.path);
}
setState(() {
_imageFile = XFile(pickedFile.path);
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
if (_imageFile == null) Center(child: const Text('ここに写真を表示')),
if (_imageFile != null) Image.file(File(_imageFile!.path)),
],
),
floatingActionButton: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
FloatingActionButton(
onPressed: () {
_selectImageFromDevice(ImageSource.camera);
},
child: const Icon(Icons.camera_alt_outlined),
),
const SizedBox(height: 16.0),
FloatingActionButton(
onPressed: () {
_selectImageFromDevice(ImageSource.gallery);
},
child: const Icon(Icons.photo_library_outlined),
),
],
),
);
}
}
cameraとは、名前の通りカメラのFlutterパッケージです。 image_pickerより複雑ですが、その分できることも多いです。 image_pickerでは、デバイスのカメラを起動するだけでした。 しかし、cameraでは、自分の実装で写真を撮影したり、内カメラと外カメラに切り替えたりすることができるため、自由度の高いオリジナルのカメラアプリを作成することができます。 とはいえ、この説明ではあまりピンと来ないと思うので、実際に自分の手を動かしながらcameraについて学んでいきましょう。 今回は新規Flutterプロジェクトを作成し、そこでcameraパッケージを使ってみましょう。
https://pub.dev/packages/camera
まず、pubspec.yamlのdependencies:
にcamera
を追加します。
次に、pub getボタンをクリックします(flutter pub getでも可)。
ここまで終わったら、これまでと同様にパーミッションを追加します。
ios/Runner/Info.plist
に次の4行を追加してください。
<key>NSCameraUsageDescription</key>
<string>your usage description here</string>
<key>NSMicrophoneUsageDescription</key>
<string>your usage description here</string>
android/app/build.gradle
を次のように設定してください。21以上ならOKです。
minSdkVersion 21
import 'dart:async';
import 'package:camera/camera.dart';
import 'package:flutter/material.dart';
late List<CameraDescription> cameras;
Future<void> main() async {
WidgetsFlutterBinding.ensureInitialized();
cameras = await availableCameras();
runApp(const CameraApp());
}
class CameraApp extends StatefulWidget {
const CameraApp({Key? key}) : super(key: key);
@override
_CameraAppState createState() => _CameraAppState();
}
class _CameraAppState extends State<CameraApp> {
late CameraController controller;
@override
void initState() {
super.initState();
controller = CameraController(cameras[0], ResolutionPreset.max);
controller.initialize().then((_) {
if (!mounted) {
return;
}
setState(() {});
});
}
@override
void dispose() {
controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
if (!controller.value.isInitialized) {
return Container();
}
return MaterialApp(
debugShowCheckedModeBanner: false,
home: CameraPreview(controller),
);
}
}
第1回「ImagePicker」
ImagePickerってなに?
ImagePickerとは、Flutterでカメラや画像を利用するためのパッケージです。 ImagePickerを使用することでデバイスのカメラを起動したり、アルバムを開いたりすることができます。 また、カメラで撮った写真やアルバムから選択した画像を画面に表示することも可能です。 今回はカメラとアルバムを開くのをゴールとします。
公式ドキュメント
https://pub.dev/packages/image_picker
インストール
iOS・Android共通
それでは、さっそくImagePickerをインストールしていきます。 まず、
flutter pub add image_picker
をコマンドで叩く or pubspec.yamlのdependencies:にimage_picker: ^0.8.4+11
を追加してImagePickerをインストールします。 インストールが終わったら、flutter pub get
をコマンドで叩く or pub getボタンをクリックしてください。普通のパッケージならこの段階で使用できるようになりますが、ImagePickerだとそうはいきません。 パーミッション(カメラやアルバムなどを使用する許可)をデバイスに与えてあげなければいけないのです。 パーミッションをデバイスに与える方法はiOSとAndroidによって異なるため、それぞれ個別に紹介していきます。
iOS編
まず、ios/Runner/Info.plisetを開いてください。 Info.plisetを開いてファイルを一番下までスクロールすると、このような記述があります。
この との間に与えたいパーミッションを追加で記述していきます。
アルバムへのアクセスを求める
NSPhotoLibraryUsageDescription
とカメラへのアクセスを求めるNSCameraUsageDescription
、マイクへのアクセスを求めるNSMicrophoneUsageDescription
(今回は使いませんがビデオ撮影をする際に必要です)を追加します。 こんな感じで記述できればOKです。Android編
今回は不要です。
サンプルコード