web-dev-qa-db-ja.com

FlutterでStreamBuilderクラスをColumnまたはListViewクラスでラップする方法は？

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']),
                );
              },
            );
          },
        ]));
      }
    }
firebasedartgoogle-cloud-firestoreflutter
5
Fernando Henrique Köetz

StreambuilderをFlexible（）でラップしてから、FlexibleをColumn（）セットでラップし、scaffold（）の本体として列を設定します

8
Rajesh Jr.

また、ListView.builder()内に属性shrinkWrap: trueを作成することもできます。

 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']),
            );
0
Farwa