Question

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

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

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，因为它在许多应用程序中都起着很大的作用。如果您的应用程序需要网络上的任何内容，则将需要期货或更大的对应流。在这种情况下，如果您想设置一个可能包含多个图像的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);
  },
),

Answer 2

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];
            int maxsize = 10e6.round();
            return Card(
              elevation: 8.0,
              margin:
                  new EdgeInsets.symmetric(horizontal: 10.0, vertical: 6.0),
              child: Column(
                children: <Widget>[
                  Stack(
                    children: <Widget>[
                      Container(
                          child: FutureBuilder<dynamic>(
                        future: FirebaseStorage()
                            .ref()
                            .child('employer_logo')
                            .child('00001')
                            .child('google-banner.jpg')
                            .getDownloadURL(),
                        builder: (BuildContext context,
                            AsyncSnapshot<dynamic> snapshot) {
                          if (snapshot.connectionState !=
                              ConnectionState.waiting) {
                            return Image(
                              image: CachedNetworkImageProvider(
                                  snapshot.data.toString()),
                              fit: BoxFit.cover,
                            );
                          }
                          else {
                            return Text('Loading image....');
                          }

                        },
                      ),


                      ),
                      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)))
                          },
                    ),
                  )
                ],
              ),
            );
          },
        );
    }
  },
);
}

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

2 个答案: