ListView.builder not working

Question

While trying to implement the flutter-firebase, the ListView.builder failed to be displayed!

Note, when I try displaying the first element without ListView.builder it works fine, i.e. the error is only in something related to this block of code:

return ListView.builder(
    itemCount: snapshot.data.documents.length,
    padding: const EdgeInsets.only(top: 10.0),
    itemExtent: 25.0,
    itemBuilder: (context, index) {
    DocumentSnapshot ds = snapshot.data.documents[index];
    return Text(" ${ds['name']} ${ds['vote']}");
});

My full code is:

import 'package:flutter/material.dart';
import 'package:cloud_firestore/cloud_firestore.dart';

void main() => runApp(MyApp(
  textInput: Text("Text Widget"),
));

class MyApp extends StatefulWidget {
  final Widget textInput;
  MyApp({this.textInput});

  @override
  State<StatefulWidget> createState() => MyAppState();
}

class MyAppState extends State<MyApp> {
  bool checkBoxValue = false;
  @override
  Widget build(BuildContext ctxt) {
    return new MaterialApp(
      home: SafeArea(
        child: Scaffold(
            body: new Center(
                child: new Column(
                  children: <Widget>[
                    widget.textInput,
                    Checkbox(
                        value: checkBoxValue,
                        onChanged: (bool newValue){
                          setState(() {
                            checkBoxValue = newValue;
                          });
                        }
                    ),
                    StreamBuilder(
                        stream: Firestore.instance.collection('baby').snapshots(),
                        builder: (context, snapshot) {
                          if (!snapshot.hasData) return const Text('Loading...');

                           //   DocumentSnapshot ds = snapshot.data.documents[0];
                           //   return new Text(" ${ds['name']} ${ds['vote']}");

                          // When i try to replace the above code by the below it fails!
                               return ListView.builder(
                                itemCount: snapshot.data.documents.length,
                                padding: const EdgeInsets.only(top: 10.0),
                                itemExtent: 25.0,
                                itemBuilder: (context, index) {
                                DocumentSnapshot ds = snapshot.data.documents[index];
                                return Text(" ${ds['name']} ${ds['vote']}");
                              });
                           // End of the ListView builder that fails!

                        }),
                  ],
                ))),
      ),
    );
  }
}

UPDATE

The error I got is:

Performing hot reload... I/flutter ( 9119): ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════ I/flutter ( 9119): The following assertion was thrown during performResize(): I/flutter ( 9119): Vertical viewport was given unbounded height. I/flutter ( 9119): Viewports expand in the scrolling direction to fill their container.In this case, a vertical I/flutter ( 9119): viewport was given an unlimited amount of vertical space in which to expand. This situation I/flutter ( 9119): typically happens when a scrollable widget is nested inside another scrollable widget. I/flutter ( 9119): If this widget is always nested in a scrollable widget there is no need to use a viewport because I/flutter ( 9119): there will always be enough vertical space for the children. In this case, consider using a Column I/flutter ( 9119): instead. Otherwise, consider using the "shrinkWrap" property (or a ShrinkWrappingViewport) to size I/flutter ( 9119): the height of the viewport to the sum of the heights of its children. I/flutter ( 9119): I/flutter ( 9119): When the exception was thrown, this was the stack: I/flutter ( 9119): #0 RenderViewport.performResize. (package:flutter/src/rendering/viewport.dart:985:15) I/flutter ( 9119): #1 RenderViewport.performResize (package:flutter/src/rendering/viewport.dart:1038:6) I/flutter ( 9119): #2 RenderObject.layout (package:flutter/src/rendering/object.dart:1555:9) I/flutter ( 9119): #3 _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:109:13) I/flutter ( 9119): #4 RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7) I/flutter ( 9119): #5 _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:109:13) I/flutter ( 9119): #6 RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7) I/flutter ( 9119): #7 _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:109:13) I/flutter ( 9119): #8 RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7) I/flutter ( 9119): #9 _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:109:13) I/flutter ( 9119): #10 RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7) I/flutter ( 9119): #11 _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:109:13) I/flutter ( 9119): #12 RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7) I/flutter ( 9119): #13 _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:109:13) I/flutter ( 9119): #14 RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7) I/flutter ( 9119): #15 _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:109:13) I/flutter ( 9119): #16 RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7) I/flutter ( 9119): #17 _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:109:13) I/flutter ( 9119): #18 RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7) I/flutter ( 9119): #19 RenderFlex.performLayout (package:flutter/src/rendering/flex.dart:738:15) I/flutter ( 9119): #20 RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7) I/flutter ( 9119): #21 RenderPositionedBox.performLayout (package:flutter/src/rendering/shifted_box.dart:381:13) I/flutter ( 9119): #22 RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7) I/flutter ( 9119): #23 MultiChildLayoutDelegate.layoutChild (package:flutter/src/rendering/custom_layout.dart:141:11) I/flutter ( 9119): #24 _ScaffoldLayout.performLayout (package:flutter/src/material/scaffold.dart:399:7) I/flutter ( 9119): #25 MultiChildLayoutDelegate._callPerformLayout (package:flutter/src/rendering/custom_layout.dart:211:7) I/flutter ( 9119): #26 RenderCustomMultiChildLayoutBox.performLayout (package:flutter/src/rendering/custom_layout.dart:355:14) I/flutter ( 9119): #27 RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7) I/flutter ( 9119): #28 _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:109:13) I/flutter ( 9119): #29 RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7) I/flutter ( 9119): #30 _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:109:13) I/flutter ( 9119): #31 _RenderCustomClip.performLayout (package:flutter/src/rendering/proxy_box.dart:1143:11) I/flutter ( 9119): #32 RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7) I/flutter ( 9119): #33 RenderPadding.performLayout (package:flutter/src/rendering/shifted_box.dart:199:11) I/flutter ( 9119): #34 RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7) I/flutter ( 9119): #35 _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:109:13) I/flutter ( 9119): #36 RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7) I/flutter ( 9119): #37 _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:109:13) I/flutter ( 9119): #38 RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7) I/flutter ( 9119): #39 _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:109:13) I/flutter ( 9119): #40 RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7) I/flutter ( 9119): #41 _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:109:13) I/flutter ( 9119): #42 RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7) I/flutter ( 9119): #43 _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:109:13) I/flutter ( 9119): #44 RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7) I/flutter ( 9119): #45 _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:109:13) I/flutter ( 9119): #46 RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7) I/flutter ( 9119): #47 _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:109:13) I/flutter ( 9119): #48 RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7) I/flutter ( 9119): #49 _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:109:13) I/flutter ( 9119): #50 RenderOffstage.performLayout (package:flutter/src/rendering/proxy_box.dart:2831:13) I/flutter ( 9119): #51 RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7) I/flutter ( 9119): #52 RenderStack.performLayout (package:flutter/src/rendering/stack.dart:520:15) I/flutter ( 9119): #53 RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7) I/flutter ( 9119): #54 __RenderTheatre&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:109:13) I/flutter ( 9119): #55 RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7) I/flutter ( 9119): #56 _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:109:13) I/flutter ( 9119): #57 RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7) I/flutter ( 9119): #58 _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:109:13) I/flutter ( 9119): #59 RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7) I/flutter ( 9119): #60 _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:109:13) I/flutter ( 9119): #61 RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7) I/flutter ( 9119): #62 _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:109:13) I/flutter ( 9119): #63 RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7) I/flutter ( 9119): #64 _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:109:13) I/flutter ( 9119): #65 RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7) I/flutter ( 9119): #66 RenderView.performLayout (package:flutter/src/rendering/view.dart:125:13) I/flutter ( 9119): #67 RenderObject._layoutWithoutResize (package:flutter/src/rendering/object.dart:1445:7) I/flutter ( 9119): #68 PipelineOwner.flushLayout (package:flutter/src/rendering/object.dart:709:18) I/flutter ( 9119): #69 _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding&PaintingBinding&RendererBinding.drawFrame (package:flutter/src/rendering/binding.dart:270:19) I/flutter ( 9119): #70 _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding&PaintingBinding&RendererBinding&WidgetsBinding.drawFrame (package:flutter/src/widgets/binding.dart:627:13) I/flutter ( 9119): #71 _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding&PaintingBinding&RendererBinding._handlePersistentFrameCallback (package:flutter/src/rendering/binding.dart:208:5) I/flutter ( 9119): #72 _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding._invokeFrameCallback (package:flutter/src/scheduler/binding.dart:990:15) I/flutter ( 9119): #73 _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding.handleDrawFrame (package:flutter/src/scheduler/binding.dart:930:9) I/flutter ( 9119): #74 _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding.scheduleWarmUpFrame. (package:flutter/src/scheduler/binding.dart:751:7) I/flutter ( 9119): #76 _Timer._runTimers (dart:isolate/runtime/libtimer_impl.dart:382:19) I/flutter ( 9119): #77 _Timer._handleMessage (dart:isolate/runtime/libtimer_impl.dart:416:5) I/flutter ( 9119): #78 _RawReceivePortImpl._handleMessage (dart:isolate/runtime/libisolate_patch.dart:165:12) I/flutter ( 9119): (elided one frame from package dart:async) I/flutter ( 9119): I/flutter ( 9119): The following RenderObject was being processed when the exception was fired: I/flutter ( 9119): RenderViewport#a2532 NEEDS-LAYOUT NEEDS-PAINT I/flutter ( 9119): creator: Viewport ← _ScrollableScope ← IgnorePointer-[GlobalKey#363cb] ← Semantics ← Listener ← I/flutter ( 9119): _GestureSemantics ← RawGestureDetector-[LabeledGlobalKey#08fb7] ← I/flutter ( 9119): _ExcludableScrollSemantics-[GlobalKey#8d2f7] ← RepaintBoundary ← CustomPaint ← RepaintBoundary ← I/flutter ( 9119): NotificationListener ← ⋯ I/flutter ( 9119): parentData: (can use size) I/flutter ( 9119): constraints: BoxConstraints(0.0<=w<=384.0, 0.0<=h<=Infinity) I/flutter ( 9119): size: MISSING I/flutter ( 9119): axisDirection: down I/flutter ( 9119): crossAxisDirection: right I/flutter ( 9119): offset: ScrollPositionWithSingleContext#45c18(offset: 0.0, range: null..null, viewport: null, I/flutter ( 9119): ScrollableState, AlwaysScrollableScrollPhysics -> ClampingScrollPhysics, IdleScrollActivity#d36b9, I/flutter ( 9119): ScrollDirection.idle) I/flutter ( 9119): anchor: 0.0 I/flutter ( 9119): This RenderObject had the following descendants (showing up to depth 5): I/flutter ( 9119): RenderSliverPadding#9ca2b NEEDS-LAYOUT NEEDS-PAINT I/flutter ( 9119): RenderSliverFixedExtentList#1cb4d NEEDS-LAYOUT NEEDS-PAINT I/flutter ( 9119): RenderRepaintBoundary#8c403 NEEDS-LAYOUT NEEDS-PAINT I/flutter ( 9119): RenderParagraph#c05e3 NEEDS-LAYOUT NEEDS-PAINT I/flutter ( 9119): ════════════════════════════════════════════════════════════════════════════════════════════════════ I/flutter ( 9119): Another exception was thrown: RenderBox was not laid out: RenderViewport#a2532 NEEDS-LAYOUT NEEDS-PAINT I/flutter ( 9119): Another exception was thrown: RenderBox was not laid out: RenderViewport#a2532 NEEDS-PAINT I/flutter ( 9119): Another exception was thrown: RenderBox was not laid out: RenderIgnorePointer#cfad6 relayoutBoundary=up10 NEEDS-PAINT I/flutter ( 9119): Another exception was thrown: RenderBox was not laid out: RenderSemanticsAnnotations#2fd15 relayoutBoundary=up9 NEEDS-PAINT I/flutter ( 9119): Another exception was thrown: RenderBox was not laid out: RenderPointerListener#0da92 relayoutBoundary=up8 NEEDS-PAINT I/flutter ( 9119): Another exception was thrown: RenderBox was not laid out: RenderSemanticsGestureHandler#588c9 relayoutBoundary=up7 NEEDS-PAINT I/flutter ( 9119): Another exception was thrown: RenderBox was not laid out: _RenderExcludableScrollSemantics#ad008 relayoutBoundary=up6 NEEDS-PAINT I/flutter ( 9119): Another exception was thrown: RenderBox was not laid out: RenderRepaintBoundary#1e512 relayoutBoundary=up5 NEEDS-PAINT I/flutter ( 9119): Another exception was thrown: RenderBox was not laid out: RenderCustomPaint#ab136 relayoutBoundary=up4 NEEDS-PAINT I/flutter ( 9119): Another exception was thrown: RenderBox was not laid out: RenderRepaintBoundary#e6025 relayoutBoundary=up3 NEEDS-PAINT Reloaded 1 of 394 libraries in 1,363ms. I/flutter ( 9119): Another exception was thrown: RenderBox was not laid out: RenderRepaintBoundary#e6025 relayoutBoundary=up3 NEEDS-PAINT

Answer 1

Wrap your StreamBuilder into an Expanded. As it's inside a Column

Answer 2

You can add the property shrinkWrap: true as indicated in your error message:

return ListView.builder(
   shrinkWrap: true,
   ...
)