Flutterで動画の再生を行う Video Player / Image Picker Plugin使い方

Flutterでの画像・動画取得

大体使い方はImageの時と同じですが、Flutter はデフォルトでは動画再生をサポートしていないため、動画を表示したり再生したりするにはサードパーティのプラグインを使う必要があります。
そこで、動画を再生するためには video_player プラグインを使用します。※後述

Image Pickerで画像や動画を取得する

画像や動画を端末から取得する方法は、公式が出しているpluginのImage Pickerを使うのが一番ポピュラーのようです。
Image Pickerっていう名前ですが、getVideo()関数が動画も取ってくれます。

Pluginの追加

pubspec.yamlにimage_pickerプラグインを追加してflutter pub getを実行します。
ちなみに以下から最新バージョンはわかります。
https://pub.dev/packages/image_picker

permissionの追加

指定されたプラグインのように、アンドロイドではパーミッションは必要ありませんが、iOSではいくつかのパーミッションを指定する必要があります。
Runner/Info.plistに以下を追加すればOK。

<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>

Pluginの呼び出し

画像をとる

https://pub.dev/documentation/image_picker/latest/image_picker/ImagePicker/getImage.html
画像を取るにはImagePicker().getImageメソッドを使います。

// メソッド定義
Future<PickedFile> getImage (
  {
    @required ImageSource source,
    double maxWidth,
    double maxHeight,
    int imageQuality,
    CameraDevice preferredCameraDevice = CameraDevice.rear
  }
)

第1引数：ImageSource：どこから画像・動画をとるか指定できます。ImageSource.galleryだと、ローカル(ギャラリー)に保存されたファイルから取得し、ImageSource.cameraだとカメラを起動して取得します。
第2引数：maxWidth: 画像の最大幅を指定します。
第3引数：maxHeightを指定します。画像の最大の高さを指定します。
第4引数：imageQuality：このプロパティは0から100までのdouble型の数値です。
第5引数：preferredCameraDevice : 使用するカメラを設定します。

使い方

// カメラから画像をとる例
  File file;
  final picker = ImagePicker();
  Future getImage() async {
    final pickedFile = await picker.getImage(source: ImageSource.camera);
      if (pickedFile != null) {
        file = File(pickedFile.path);
      } else {
        print('No file selected.');
      }
      notifyListeners();
  }

こんな感じです。notifyListners();使ってなくて_setState()してる人は適宜読み替えてください。

動画をとる

https://pub.dev/documentation/image_picker/latest/image_picker/ImagePicker/getVideo.html
画像を取るにはImagePicker().getVideoメソッドを使います。

// メソッド定義
Future<PickedFile> getVideo (
  {
    @required ImageSource source,
    CameraDevice preferredCameraDevice = CameraDevice.rear,
    Duration maxDuration
  }
)

大体使い方はImageの時と同じですが、Flutter はデフォルトでは動画再生をサポートしていないため、動画を表示したり再生したりするにはサードパーティのプラグインを使う必要があります。
そこで、動画を再生するために video_player プラグインを使用します。

Video Playerで動画を再生する

Pluginの追加

https://pub.dev/packages/video_player
ここから最新版のバージョンをチェックして、pubspec.yamlにこの依存関係を追加のち、flutter pub getします。
動画を再生するには video_player プラグインを使用していますが、このプラグインには VideoPlayerController が必要です。

使用方法

 _pickVideoFromCamera() async {
    PickedFile pickedFile = await picker.getVideo(source: ImageSource.camera);

    _cameraVideo = File(pickedFile.path);

    _cameraVideoPlayerController = VideoPlayerController.file(_cameraVideo)
      ..initialize().then((_) {
        setState(() {});
        _cameraVideoPlayerController.play();
      });
  }

この例では、まずファイルから動画を設定し、初期化が完了したら initialize を呼び出してsetState() {}) を実行し、_cameraVideoPlayerController.play()を使用して動画の再生を開始します。
何かのボタンをトリガーにして上記メソッドを呼べば、動画を取得でき、成功したときに再生できます。

また、Widget側では表示のために

child: VideoPlayer(_cameraVideoPlayerController),

としてあげれば、見事に動画を再生できます。