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

Question

我是 Firebase 的新手，现在不知道如何继续前进。我在 Firebase 存储中有一张图片，我只想在我的应用中显示它。全尺寸，所以我选择了Container。现在通过观看教程，我编写了一些代码，但没有得到任何结果。请大家帮忙。 这可能是一个愚蠢的问题，但你知道初学者！先感谢您。？？？？ 我已经使用 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

这是假设 firebase 中的每个文档都存储一个 imageUrl。

要显示列表中的第一张图片，您可以使用：

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

但由于您要检索多个文档，而不仅仅是一个，您可以使用 ListView.builder 来显示您获取的所有图像。

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

发布您的数据在 Firebase 中的外观，以获得更好的答案。

-- 编辑 2： 由于您现在使用的是 streambuilder，因此您需要将文档 ID 传递给您的查询.collection('wallpaperimg').doc('theRandomNumberDocumentIdinfirebase').get()

Answer 2

像这样使用保存图像的流。

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"])));

我希望这会有所帮助