Как загрузить изображение на карту из данных, извлеченных из асинхронной задачи во флаттере?

Question

Я новичок в разработке. Мне нужно загрузить изображения на карту в зависимости от данных, загруженных с помощью асинхронной задачи.

У меня есть асинхронная задача, которая возвращает Future> пользовательских данных, запрашиваемых из локальной базы данных sqlite. Получив данные, я создаю ListView, чтобы показать пользователям, использующим Card. Но внутри карты я пытаюсь показать изображение, которое будет загружено из Firebase Storage в зависимости от данных, полученных из локальной базы данных. Но 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 или более крупный аналог Stream. В этом случае, если вы хотите настроить 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)))
                          },
                    ),
                  )
                ],
              ),
            );
          },
        );
    }
  },
);
}