Как обернуть класс StreamBuilder классом Column или ListView во Flutter?

У меня проблема с моим приложением Flutter, у меня есть класс, который возвращает только StreamBuilder, он хорошо работает, отображая данные из Cloud Firestore. Но когда я пытаюсь обернуть этот класс в класс Column или ListView, он просто ничего не показывает.

Мне это нужно, чтобы отобразить имя текущей страницы. И класс AppBar уже имеет имя приложения, поэтому я тоже не могу его использовать.

Кто-нибудь знает, как я могу обернуть это и заставить его работать?

Рабочий пример кода

  class NewCardsList extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return new StreamBuilder<QuerySnapshot>(
      stream: firestore.collection('cards_list').snapshots(),
      builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) {
        if (!snapshot.hasData) return const Text('Connecting...');
        final int cardLength = snapshot.data.documents.length;
        return new ListView.builder(
          itemCount: cardLength,
          itemBuilder: (int index) {
            final DocumentSnapshot _card= snapshot.data.documents[index];
            return new ListTile(
              title: new Text(_card['title']),
              subtitle: new Text(_card['description']),
            );
          },
        );
      },
    );
  }
}

Образец кода не работает

class NewCardsList extends StatelessWidget {

      @override
      Widget build(BuildContext context) {
        return new Column(
          children: <Widget> [
            Text("Your Card List"),
            StreamBuilder<QuerySnapshot>(
          stream: firestore.collection('cards_list').snapshots(),
          builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) {
            if (!snapshot.hasData) return const Text('Connecting...');
            final int cardLength = snapshot.data.documents.length;
            return new ListView.builder(
              itemCount: cardLength,
              itemBuilder: (int index) {
                final DocumentSnapshot _card= snapshot.data.documents[index];
                return new ListTile(
                  title: new Text(_card['title']),
                  subtitle: new Text(_card['description']),
                );
              },
            );
          },
        ]));
      }
    }
Интеграция Angular - Firebase Analytics
Интеграция Angular - Firebase Analytics
Узнайте, как настроить Firebase Analytics и отслеживать поведение пользователей в вашем приложении Angular.
5
4
11 866
2

Ответы 2

Оберните Streambuilder с помощью Flexible (), затем оберните Flexible с помощью Column (), установите столбец как тело вашего каркаса ()

Кроме того, вы можете просто сделать атрибут shrinkWrap: true внутри ListView.builder().

 return new ListView.builder(
          shrinkWrap: true,
          itemCount: cardLength,
          itemBuilder: (int index) {
            final DocumentSnapshot _card= snapshot.data.documents[index];
            return new ListTile(
              title: new Text(_card['title']),
              subtitle: new Text(_card['description']),
            );

Другие вопросы по теме