Flutter Futureの非同期処理 意図通りの順番に処理されない

Question

#実現したいこと

Flutterを利用して、FirebaseのFirestorageに画像をアップロードし、画像URLをForestoreに保存したいです。

#躓いている点

Firestorageの画像アップロードは非同期処理で行っています。
ただ、アップロード中にFirestoreの保存が行われ、画像URLが保存されません。

環境

Flutter:version1.20.2
Dart:version2.9.1

pubspec.yaml
-firebase_core: ^0.5.0
-cloud_firestore: ^0.14.0+2
-firebase_storage: ^4.0.0

#コード

Future<void> saveData(
      String title, String address, String description) async {
   　
　　　///↑入力されたフォーム情報を引数として取得
　　
    String _userimageurl, _displayname, _username, _uid;
    _uid = FirebaseAuth.instance.currentUser.uid;


    ///user情報をDBから取得
    var result = await FirebaseFirestore.instance
        .collection('users')
        .where("uid", isEqualTo: _uid)
        .get();

    _userimageurl = result.docs[0].get("imageurl");
    _displayname = result.docs[0].get("displayname");
    _username = result.docs[0].get("username");


    ///画像アップロード、URL取得
    var value = await this.saveImage(this.images);

　　　///Firestore保存
    await FirebaseFirestore.instance.collection('posts').add({
      'title': title,
      'address': address,
      'description': description,
      'star': this.star_cnt,
      "category": this.category,
      "images": value,
      "user_id": _uid,
      "username": _username,
      "user_displayname": _displayname,
      "user_imageurl": _userimageurl,
      'created': new DateTime.now(),
    });

    notifyListeners();
  }

Future<List<String>> saveImage(List<Asset> images) async {
    List<String> images_arr = [];
    await images.forEach((element) async {
      String unixtimestamp =
          DateTime.now().toUtc().millisecondsSinceEpoch.toString();
      ByteData byteData = await element.getByteData();
      List<int> imageData = byteData.buffer.asUint8List();
      StorageReference ref = FirebaseStorage.instance
          .ref()
          .child("images")
          .child("${unixtimestamp}.jpeg");

      StorageUploadTask uploadTask = ref.putData(
          imageData,
          StorageMetadata(
            contentType: "image/jpeg",
          ));

      var url = await (await uploadTask.onComplete).ref.getDownloadURL();

      images_arr.add(url);
    });
    return images_arr;
  }

参考：multi_image_picker　FireStoreサンプルコード

コード補足

画像のアップロード、ダウンロードURL取得、DB保存はすでにできています。
できていないのは、画像のURL取得まで待ってDB保存することだけです。

Future、awaitが間違っていると思いますが、ネット記事を読んでも解決しなかったため質問しました。
よろしくお願いします。

Answer 1

forEachは、戻り値がFutureではなくvoidなので、awaitを使うことができません。
なので、saveImage関数内の以下の部分のawaitが働いていないのだと思います。

await images.forEach((element) async {

代わりに、Future.forEach()を使って試してみてください。

Future<List<String>> saveImage(List<Asset> images) async {
    List<String> images_arr = [];
    await Future.forEach<Asset>(images, (element) async {
      String unixtimestamp =
          DateTime.now().toUtc().millisecondsSinceEpoch.toString();
      ByteData byteData = await element.getByteData();
      List<int> imageData = byteData.buffer.asUint8List();
      StorageReference ref = FirebaseStorage.instance
          .ref()
          .child("images")
          .child("${unixtimestamp}.jpeg");

      StorageUploadTask uploadTask = ref.putData(
          imageData,
          StorageMetadata(
            contentType: "image/jpeg",
          ));

      var url = await (await uploadTask.onComplete).ref.getDownloadURL();

      images_arr.add(url);
    });
    return images_arr;
  }

もしくは、forEachではなく、単純にfor文でループさせることでも解決できるかもしれません。

Future<List<String>> saveImage(List<Asset> images) async {
    List<String> images_arr = [];
    for (int i = 0; i < images.length; i++) {
      String unixtimestamp =
          DateTime.now().toUtc().millisecondsSinceEpoch.toString();      
      ByteData byteData = await images[i].getByteData();
      List<int> imageData = byteData.buffer.asUint8List();
      StorageReference ref = FirebaseStorage.instance
        .ref()
        .child("images")
        .child("$unixtimestamp.jpeg");
      StorageUploadTask uploadTask = ref.putData(
        imageData,
        StorageMetadata(contentType: "image/jpeg"),
      );
      var url = await (await uploadTask.onComplete).ref.getDownloadURL();
      images_arr.add(url);
    }
    return images_arr;
  }

Comments

[takumi123]

for文で行うと上手くいきました。ありがとうございます！！！