Use StreamBuilder in Column widget

Question

I'm using StreamBuilder to populate a list view with Firebase data. This works fine but once I put my StreamBuilder in the field "children" of a new Column widget, list view is not visible anymore.

Here is my code to build my ListView :

Widget _buildBody(BuildContext context) {
    return new StreamBuilder<QuerySnapshot>(
      stream: Firestore.instance.collection('sessions').snapshots(),
      builder: (context, snapshot) {
        if (snapshot.data == null) return LinearProgressIndicator();

        return _buildList(context, snapshot.data.documents);
      },
    );
  }

Widget _buildList(BuildContext context, List<DocumentSnapshot> snapshot) {
    return ListView(
      padding: const EdgeInsets.only(top: 20.0),
      children: snapshot.map((data) => _buildListItem(context, data)).toList(),
    );
  }

How can i fix that to use StreamBuilder in a Column widget ? (I'd like to add many other widgets next to the listView).

Put the stream builder in a container and specify a width and height — ikben

Eric Duffett Eric Duffett · Accepted Answer · 2019-07-30T21:48:02

It sounds like your problem is not really that you need to put a StreamBuilder in a Column, but getting a ListView to not take up the entire screen. Here is one solution for putting a ListView and a Column side by side, with each of them taking up 50% of the width of the screen.

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: Row(
          mainAxisSize: MainAxisSize.max,
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: <Widget>[
            Container(
              width: MediaQuery.of(context).size.width * 0.5,
              child: ListView.builder(
                itemCount: 20,
                  itemBuilder: (context, index){
                return Text('Session $index');
      }),
            ),
            Container(
              width: MediaQuery.of(context).size.width * 0.5,
              child: Column(
                children: <Widget>[
                  Container(
                    height: 100,
                    color: Colors.blue,
                  ),
                  Container(
                    height: 50,
                    color: Colors.orange,
                  ),
                ],
              ),
            )
          ],
        ),
      ),
    );
  }
}

Use StreamBuilder in Column widget

1 Answers