วิธีแสดงไฟล์รูปภาพใน firestore ด้วย Flutter

คุณต้องเพิ่ม url ไปที่ firestore ก่อน:

          StorageTaskSnapshot snapshot = await storage
              .ref()
              .child("images/$imageName")
              .putFile(file)
              .onComplete;
          if (snapshot.error == null) {
            final String downloadUrl =
                await snapshot.ref.getDownloadURL();
            await Firestore.instance
                .collection("images")
                .add({"url": downloadUrl, "name": imageName});
             }

ตอนนี้ใน Firestore คุณจะมีคอลเลกชันชื่อ images และเอกสารพร้อม URL รูปภาพและชื่อรูปภาพ เมธอด getDownloadUrl() ส่งคืน URL ของรูปภาพเพื่อให้คุณสามารถจัดเก็บไว้ใน Firestore ได้ จากนั้นหากต้องการแสดง คุณสามารถทำสิ่งต่อไปนี้:

body: Container(
  padding: EdgeInsets.all(10.0),
  child: FutureBuilder(
    future: getImages(),
    builder: (context, AsyncSnapshot<QuerySnapshot> snapshot) {
      if (snapshot.connectionState == ConnectionState.done) {
        return ListView.builder(
            shrinkWrap: true,
            itemCount: snapshot.data.documents.length,
            itemBuilder: (BuildContext context, int index) {
              return ListTile(
                contentPadding: EdgeInsets.all(8.0),
                title:
                    Text(snapshot.data.documents[index].data["name"]),
                leading: Image.network(
                    snapshot.data.documents[index].data["url"],
                    fit: BoxFit.fill),
              );
            });
      } else if (snapshot.connectionState == ConnectionState.none) {
        return Text("No data");
      }
      return CircularProgressIndicator();
    },
  ),
),

/// code here

  Future<QuerySnapshot> getImages() {
    return fb.collection("images").getDocuments();
  }

ที่นี่คุณใช้วิธีการ getImages() ซึ่งจะดึงภาพทั้งหมดจากคอลเลกชัน images ในการแสดงภาพคุณสามารถใช้วิดเจ็ต Image.network