PR

[Flutter]撮影した写真や動画、カメラロールから画像や動画を取得する方法

Flutter

はじめに

アプリを作っているとカメラで撮影した写真や動画、カメラロールから画像や動画を取得したいことがあります。今回は簡単にそれが実現できてしまうプラグインを紹介しようと思います。

環境

  • Flutter 1.22.6
  • image_picker 0.6.7+22

実装方法

プラグインの最新バージョンを確認

下記のサイトにアクセスし、バージョンを確認します。

image_picker | Flutter Package
Flutter plugin for selecting images from the Android and iOS image library, and taking new pictures with the camera.

記事作成の時点では0.6.7+22が最新バージョンでした。

プラグインのインストール

pubspec.yamldependenciesに「image_picker: ^0.6.7+22」を追記します。

dependencies:
  flutter:
    sdk: flutter


  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^1.0.0
  image_picker: ^0.6.7+22

その後、プロジェクト配下で「flutter pub get」コマンドを実行

よくわからない場合はAndroid Studiopubspec.yamlファイルを開くと右上に「Pub get」ボタンがあるのでそれを押してください。

これでプラグインのインストールは完了です。

アプリの設定の追加

次にアプリの設定を追加します。この設定をしないとカメラやカメラロールにアクセスした瞬間にアプリがクラッシュするので絶対に追加してください。

iOS

iosフォルダ右クリックして[Flutter]→[Open iOS module in Xcode]を選択します。

Xcodeが開いたら、Runner/Runner/Info.plistを開きます。

以下の3つの説明文を追加します。ここに入力する内容はユーザーに表示されます。

  • Privacy – Photo Library Usage Description
  • Privacy – Camera Usage Description
  • Privacy – Microphone Usage Description

上からカメラロールカメラマイクを利用する際の説明文です。

またInfo.plistをテキストエディター等で見た際のkeyはそれぞれ以下のようになっています。

  • NSPhotoLibraryUsageDescription
  • NSCameraUsageDescription
  • NSMicrophoneUsageDescription

以上でiOSの設定は終わりです。

Android

targetSdkVersionが29未満の場合は設定は不要です。

targetSdkVersionが29以上の場合は、まずandroidフォルダ右クリックして[Flutter]→[Open Android module in Android Studio]を選択します。

次にapp/manifests/AndroidManifest.xmlを開きます。

<application>タグに「android:requestLegacyExternalStorage=”true”」を追加します。

以上でAndroidの設定も完了です。

サンプルコード

カメラロールから画像を取得して画面に表示するサンプルコードです。

main.dart

import 'dart:io';

import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  File _image;
  final picker = ImagePicker();

  Future _getImage() async {
    final pickedFile = await picker.getImage(source: ImageSource.gallery);

    setState(() {
      if (pickedFile != null) {
        _image = File(pickedFile.path);
      } else {
        print('No image selected.');
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: _image == null ? Text('No image selected.') : Image.file(_image),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _getImage,
        child: Icon(Icons.image),
      ),
    );
  }
}

結果

iOS

簡単に表示できました!

Android

こちらも簡単に表示できました!

その他

カメラから画像を取得したい場合

 final pickedFile = await picker.getImage(source: ImageSource.camera);
 if (pickedFile != null) {
   _image = File(pickedFile.path);
}

カメラロールから動画を取得したい場合

 final pickedFile = await picker.getVideo(source: ImageSource.gallery);
 if (pickedFile != null) {
   _image = File(pickedFile.path);
}

カメラから動画を取得したい場合

 final pickedFile = await picker.getVideo(source: ImageSource.camera);
 if (pickedFile != null) {
   _image = File(pickedFile.path);
}

さいごに

簡単に画像取得が実装できてしまいますね。さすがFlutter!

ただ注意点としては権限を拒否された場合の処理が入っていないので、気をつけてください。次回記事にしようかと思います。

おすすめ参考書

コメント

タイトルとURLをコピーしました