使用 Flutter 中的 Firebase 存储在容器中显示图像？

Question

I'm new to Firebase and I don't know how to move forward from here now. I have an image in Firebase storage and I just want to display it in my app. In full size, so I chose Container. Now by watching a tutorial I have wrote some code but didn't get anywhere. Please can you guys help. It maybe a silly question but you know the beginners. Thank you in advance. I've updated by code with StreamBuilder.

**MAIN.DART**

void main() {
runApp(MyApp());
}

class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
  title: 'Flutter Demo',
  theme: ThemeData(
    primarySwatch: Colors.blue,
  ),
  home: DetailScreen(),
);
}
}

**DETAILSCREEN.DART

 class DetailScreen extends StatefulWidget {
 @override
_DetailScreenState createState() => _DetailScreenState();
 }

 class _DetailScreenState extends State<DetailScreen> {

 StreamSubscription<QuerySnapshot> subscription;
 List<DocumentSnapshot> wallpaperList;
 final CollectionReference collectionReference =
  FirebaseFirestore.instance.collection("wallpaperimg");

 @override
 void initState() {
  super.initState();
   subscription = collectionReference.snapshots().listen((datasnapshot) {
   setState(() {
    wallpaperList = datasnapshot.docs;
  });
});
  }

 @override
 void dispose() {
  subscription?.cancel();
 super.dispose();
 }

@override
Widget build(BuildContext context) {
 return return StreamBuilder(
    stream: FirebaseFirestore.instance
        .collection("wallpaperimg")
        .doc()
        .snapshots(),
    builder: (context, snapshot) {
      if (!snapshot.hasData) {
        return Text("Loading");
      }
      var profiledetail = snapshot.data;
      return Container(
          child: Image(image: NetworkImage(profiledetail['imgUrl'])));
    });
      }
   }

Answer 1

This is assuming that every document in firebase is storing a single imageUrl.

To display the first image in your list, you can use:

Container(
 child: Image.network(wallpaperList[0].data()['imageUrl'])
)

But since you are retrieving multiple documents, not just one, you can use a ListView.builder to do that to display all the images you are getting.

ListView.builder(
itemCount: wallpaperList.length,
itemBuilder: (context, index) {
 return Container(
 child: Image.network(wallpaperList[index].data()['imageUrl'])
);})

Post how your data looks in firebase, to get a better answer.

-- edit 2: Since youa re using streambuilder now, you need to pass the the document id to your query .collection('wallpaperimg').doc('theRandomNumberDocumentIdinfirebase').get()

Answer 2

use like this pass your stream where your images is saved.

StreamBuilder(

              stream: Firestore.instance
                  .collection("userprofile")
                  .document(userid)
                  .snapshots(),
              builder: (context, snapshot) {
                if (!snapshot.hasData) {
                  return Text("Loading");
                }  var  Profiledetail = snapshot.data;return    Container(child:Image(image:NetworkImage(Profiledetail["imgurl"])));

I hope this would be Helpful