firebase - 如何从 flutter 中的异步任务检索到的数据中将图像加载到卡中？

Question

我是 Flutter 开发的新手。我需要根据通过异步任务加载的数据将图像加载到卡片中。

我有一个异步任务返回从 sqlite 本地数据库中获取的 Future> 用户数据。使用检索到的数据，我构建了一个 ListView 来向使用 Card 的用户显示。但在卡片内部，我试图显示一张图像，该图像将根据从本地数据库检索到的数据从 Firebase 存储下载。但是图像 URL 为空。

Widget build(BuildContext context) {
    var allCards = DBProvider.db.getAllCards();
    return FutureBuilder<List<User>>(
      future: DBProvider.db.getAllCards(),
      builder: (BuildContext context, AsyncSnapshot<List<User>> snapshot) {
        if (snapshot.hasError) return new Text('Error: ${snapshot.error}');
        switch (snapshot.connectionState) {
          case ConnectionState.waiting:
            return new Text('Loading...');
          default:
            return ListView.builder(
              itemCount: snapshot.data.length,
              itemBuilder: (BuildContext context, int index) {
                User user = snapshot.data[index];
                return Card(
                  elevation: 8.0,
                  margin:
                      new EdgeInsets.symmetric(horizontal: 10.0, vertical: 6.0),
                  child: Column(
                    children: <Widget>[
                      Stack(
                        children: <Widget>[
                          Container(
                            child: Image(
                              image: CachedNetworkImageProvider(FirebaseStorage().ref().child('employer_logo').child('00001').child('google-banner.jpg').getDownloadURL().toString()),
                              fit: BoxFit.cover,
                            ),
                          ),
                          Positioned(
                            bottom: 0,
                            left: 0,
                            child: Container(
                              padding: EdgeInsets.all(10),
                              child: Text(
                                'Google Incorperation',
                                style: TextStyle(
                                    fontSize: 20, color: Colors.white),
                              ),
                            ),
                          )
                        ],
                      ),
                      Container(
                        decoration: BoxDecoration(
                          color: Colors.white10,
                        ),
                        child: ListTile(
                          title: Text(user.fname + " " + user.lname,
                              style: TextStyle(
                                  color: Colors.blue[400], fontSize: 20)),
                          subtitle: Text(user.designation,
                              style: TextStyle(
                                  color: Colors.blue[300], fontSize: 16)),
                          onTap: () => {
                                Navigator.push(
                                    context,
                                    MaterialPageRoute(
                                        builder: (context) => Profile(
                                            user.fname,
                                            user.lname,
                                            user.uid,
                                            user.designation,
                                            user.mobile,
                                            user.employerId)))
                              },
                        ),
                      )
                    ],
                  ),
                );
              },
            );
        }
      },
    );
  }

我希望显示从 firebase 存储下载的图像

Answer 1

这将是我的第一个答案，这里可能有很多方法可以改进我的答案。但我会试一试:实际上，您必须在 Futures 上查找很多内容。和 Streams ，因为它在许多应用程序中占据了相当大的一部分。如果您的应用程序需要网络上的任何内容，它将需要 Futures，或者更大的对应流。在这种情况下，如果您想设置一个可能包含多个图像的 Listview，我会选择 Stream。此外，我会将所有数据库逻辑保存在一个单独的文件中。但是，如果您现在不想过多修改代码，我会使用 FutureBuilder .我已经看到您已经在代码中使用了其中之一。但在这种情况下，请使用:

...

int maxsize = 10e6.round(); // This is needed for getData. 10e^6 is usually big enough.
return new Card (
  FutureBuilder<UInt8List> ( // I also think getting Data, instead of a DownloadUrl is more practical here. It keeps the data more secure, instead of generating a DownloadUrl  which is accesible for everyone who knows it. 
  future: FirebaseStorage().ref().child('entire/path/can/go/here')
      .getData(maxsize),
  builder: (BuildContext context, AsyncSnapshot<UInt8List> snapshot) {
      // When this builder is called, the Future is already resolved into snapshot.data
      // So snapshot.data contains the not-yet-correctly formatted Image. 
      return Image.memory(data, fit: BoxFit.Cover);
  },
),