虎視眈々と

Flutter × Firebaseを研究するアプリエンジニア

Flutterで画像を複数選択する

f:id:superman199323:20181203223823j:plain

Flutterで画像を複数選択する

この記事はFlutter #2 Advent Calendar 2018 4日目のものになります。

導入

公開導入するプラグインはこちら

pub.dartlang.org

pubspec.ymlを編集します。

dependencies:
  flutter:
    sdk: flutter

  multi_image_picker: ^2.2.55

編集したら、下記のコメンドを実行

flutter packages get

実装

実装は image_picker とは全然違うので最初はかなり、戸惑いました。

今回はFirebase Storageに投稿する実装も一緒に書いています。 Firebase Storageの詳しい実装は下記をご覧ください

www.shogogeek.com

import 'package:multi_image_picker/multi_image_picker.dart';

_getImageList() async {
    var resultList = await MultiImagePicker.pickImages(
      maxImages: 10,
      enableCamera: true,
    );
    
    // ここに選択したデータが一覧で返ってくる
    print(resultList);

    for (var imageFile in resultList) {
         postImage(imageFile).then((downloadUrl) {
            // ダウンロードURLを取得する
            print(downloadUrl.toString());
         }).catchError((err) {
           print(err);
         });
    }
}

    Future<dynamic> postImage(Asset imageFile) async {
    await imageFile.requestOriginal();

    String fileName = DateTime.now().millisecondsSinceEpoch.toString();
    StorageReference reference = FirebaseStorage.instance.ref().child(fileName);
    StorageUploadTask uploadTask = reference.putData(imageFile.imageData.buffer.asUint8List());
    StorageTaskSnapshot storageTaskSnapshot = await uploadTask.onComplete;

    return storageTaskSnapshot.ref.getDownloadURL();
  }

これまで

これまではこういった複数画像を登録することはできませんでした。 なので自分のアプリでは、SwiftとKotlinのコードを別々で実装していましが、この機に全部削除できるなと思いました! 管理が楽!!!!

www.shogogeek.com