mcommit's message

ソフトウェア開発の仕事をしているsimotinといいます。記事の内容でご質問やご意見がありましたらお気軽にコメントしてください\^o^/

複数画像を選択できる multi image picker を使ってみる~flutter try a wiget evryday #2~

flutterの記事2回目。

今日はスマートフォンのアルバム・ギャラリーに保存されている写真を選択するパッケージ multi_image_picker を使ってみました。

flutterでの画像選択には公式のパッケージであるimage_pickerがあります。

pub.dev

このパッケージでは1枚の画像しか選択できないため複数の画像を選択するには他のパッケージを利用する必要があります。

画像の複数選択用のパッケージにはいくつかありますが、 multi_image_picker以外はあまりメンテナンスがされていないようです。

手順

パッケージの詳しい説明はこちらのページに記載されています。
sh1d0w.github.io

インストールとインポート

パッケージのインストールとインポートはこちらに記載されている通りです。
pub.dev

ソースコード

基本的な使い方のソースコードがこちらで公開されていました。main.dartに全て張り付けるだけで動作を確認できます。
sh1d0w.github.io


2019年1月9日時点では、このbasic Usage のページのコードでは1か所エラーがでます。

    try {
      resultList = await MultiImagePicker.pickImages(
        maxImages: 300,
      );
    } on Exception catch (e) {
      error = e.message;
    }

のe.message;の部分がエラーになります。
とりあえずですが、e.toString();としておきます。

設定

続いて、各OS向けの設定が必要です。

こちらのページに書かれている通り、iOSの場合はInfo.plistに、Androidの場合はAndroidManifest.xmlに権限設定の記述をする必要があります。
sh1d0w.github.io

注意事項

気を付けないといけない点として、flutterのプロジェクトフォルダ内には

3つのAndroidManifest.xmlが存在します。
私はまだそれぞれの使い分けについては把握していないのですが、permissionの設定はandroid/src/main/AndroidManifest.xmlに記載しないと実行時にpermission deniedと表示され例外が発生します。

Androidでの注意事項

android/app/build.gradle のminSdkVersionを 19以上にする必要があります。flutter createで作成される minSdkVersionは16になっていますが、multi_image_pickerは sdkVersion の19以上に依存しているため。

iOSでの注意事項

ターゲットがiOSの場合は、ios/Podfileに


platform :ios, '9.0'
の記述が必要です。

画面イメージ

multi image picker Android版の画面イメージ
Android版の画面イメージ

multi image picker iphone版での画面イメージ
iphone版での画面イメージ

まとめ

上記手順を試したレポジトリです。
github.com

感想

permissionを記述するAndroidManifest.xmlが間違っていたため数時間嵌ってしまいました...
イメージの選択ができたのでHTTPでサーバに画像をアップロードするプログラムを書いてみたいと思います。

参考書籍

基礎から学ぶ Flutter

基礎から学ぶ Flutter

  • 作者:石井幸次
  • 出版社/メーカー: シーアンドアール研究所
  • 発売日: 2019/12/25
  • メディア: Kindle