まつまるまつまる

どうも、まつまるです。今回はflutterで【動画を選択動画のサムネイルを取得サムネを表示】をやってみます。

完成イメージ↓

アプリのワークフロー
・右下のボタンをタップ
・カメラorギャラリー起動でvideoを撮影or選択
・動画のサムネ表示

サムネイルって英語だと、thumbnailらしい。略すとサムネがthumb。わかりづら。

基本はvideo_thumbnailプラグインのExampleを参考にしています。ただ、コードの内容をシンプルにして理解しやすいように変更しました。

今回作成したコードはこちら↓

順を追ってプログラムの説明をしていき、最後に全文表示します。

スポンサーリンク

使用しているプラグイン

video_thumbnail
  < videoをサムネ化
image_picker
  < image/videoをピックアップ

ワークフロー

ざっくりこんな感じです。コードと下の図を交互に見ると理解しやすいと思います。

大きく分けると5つブロックがあります。まずは準備で4ブロック作成します。

スポンサーリンク

準備編

ThumbnailRequestクラスは撮影or選択したvideoのパスを入れる箱です。

ThumbnailResultクラスは作成したサムネイル画像を入れる箱です。

getThumbnailでは引数でvideoのパスを受け取って、サムネイル画像を作成し、Completerに乗せて送り出します。
CompleterFutureでデータを運ぶ役割を担っています。Unit8Listは画像を扱います。

GenThumbnailImageクラスを作成します。genThumbnailを呼び出してCompleterで運ばれたデータをsnapshotに代入します。

さて、これで準備できました。次は目に見える部分を組み立てていきます。

構成画面

DemoHomeクラスでは、ど真ん中にサムネ画像(_futureImage)を表示します。サムネ画像がnullだったらなにも表示されません。

右下のボタンを押せばカメラかギャラリーが起動して動画を撮影or選択できます。

GenThumbnailImageに動画のパスを渡し、サムネ画像が作成されて_futureImageに代入します。その後にsetStateで再ビルドしてサムネ画像が表示されます。

スポンサーリンク

コード全体

全部まとめると完成です。