Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to wrap a StreamBuilder class with a Column or ListView class in Flutter?

I'm having a problem with my Flutter app, I have a class that returns only a StreamBuilder, it works well, displaying data from Cloud Firestore. But, when I try to wrap this class in a Column or ListView class, it just doesn't show anything.

I need this to display the name of the current page. And the AppBar class is already with the app name, so I can't use this too.

Does anyone know how I can wrap this and keep it running?

A sample code working

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

A sample code not working

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']),
                );
              },
            );
          },
        ]));
      }
    }
like image 464
Fernando Henrique Köetz Avatar asked Jul 18 '18 11:07

Fernando Henrique Köetz


2 Answers

Wrap Streambuilder with Flexible(),then wrap Flexible with Column() set column as body of your scaffold()

like image 77
Rajesh Jr. Avatar answered Sep 20 '22 00:09

Rajesh Jr.


Also, you can just make the attribute shrinkWrap: true inside 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']),
            );
like image 24
Farwa Avatar answered Sep 20 '22 00:09

Farwa