Can't add a ListView in Flutter

Question

I am trying to write an App using Flutter, but every time I add a ListView, the following exception is thrown at runtime: Vertical viewport was given unbounded height. The ListView isn't nested in another scrollable widget, I get the error even if I use the ListView.builder example code from the documentation. Here is the code that is causing the problem:

import 'package:flutter/material.dart';
import '../ui/app_drawer.dart';
import '../ui/fgroup_button.dart';
import '../ui/custom_icons.dart';
import '../screens/cereales.dart';

class DayDisplay extends StatefulWidget {
  final List<String> title;
  final List<Map<String, int>> values;

  DayDisplay(List<String> title, List<Map<String, int>> values):
      this.title = title, this.values = values;
  @override
  _DayDisplayState createState() => new _DayDisplayState();

}

class _DayDisplayState extends State<DayDisplay> {
  int index = 0;
  @override
  Widget build(BuildContext context) {
    return new Column(
      children: <Widget>[
    new Container(
      margin: EdgeInsetsDirectional.only(top:5.0) ,
    child: new Column(
      mainAxisSize: MainAxisSize.min,
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        new Text(widget.title[index], textAlign: TextAlign.center, style: new TextStyle(fontWeight: FontWeight.bold, fontSize: 42.0),),
        new Text('Cereales: ${widget.values[index]['cereales']}', textAlign: TextAlign.center, style: new TextStyle(fontSize: 18.0)),
        new Text('Fruta: ${widget.values[index]['fruta']}', textAlign: TextAlign.center, style: new TextStyle(fontSize: 18.0)),
        new Text('Verdura: ${widget.values[index]['verdura']}', textAlign: TextAlign.center, style: new TextStyle(fontSize: 18.0)),
        new Text('Leguminosa: ${widget.values[index]['leguminosa']}', textAlign: TextAlign.center, style: new TextStyle(fontSize: 18.0)),
        new Text('Poa: ${widget.values[index]['poa']}', textAlign: TextAlign.center, style: new TextStyle(fontSize: 18.0)),
        new Text('Grasa: ${widget.values[index]['grasa']}', textAlign: TextAlign.center, style: new TextStyle(fontSize: 18.0)),
        new Text('Azucar: ${widget.values[index]['azucar']}', textAlign: TextAlign.center, style: new TextStyle(fontSize: 18.0)),
        new Text('Leche: ${widget.values[index]['leche']}', textAlign: TextAlign.center, style: new TextStyle(fontSize: 18.0)),
      ],
    ),
    ),
    new Container(

      margin: EdgeInsetsDirectional.only(top:8.0,),

      child: new Row(

          mainAxisAlignment: MainAxisAlignment.center,

          children: [ButtonTheme.bar(

            child: new ButtonBar(

              children: <Widget>[

                new FlatButton(onPressed: () {

                  this.setState(() => index = 0);

                }, child: new Text('Antes del ejercicio'), color: Colors.green),

                new FlatButton(onPressed: () {

                  this.setState(() => index = 1);

                }, child: new Text('Desayuno'), color: Colors.green,),

                new FlatButton(onPressed: () {

                  this.setState(() => index = 2);

                }, child: new Text('Colacion'), color: Colors.green,),

              ],

            ),

          ),

          ]

      ),

    ),
    new Container(

      margin: EdgeInsetsDirectional.only(top:4.0, bottom: 4.0),

      child: new Row(

          mainAxisAlignment: MainAxisAlignment.center,

          children: [ButtonTheme.bar(

            child: new ButtonBar(

              children: <Widget>[

                new FlatButton(onPressed: () {

                  this.setState(() => index = 0);

                }, child: new Text('Comida'), color: Colors.green),

                new FlatButton(onPressed: () {

                  this.setState(() => index = 1);

                }, child: new Text('Colacion'), color: Colors.green,),

                new FlatButton(onPressed: () {

                  this.setState(() => index = 2);

                }, child: new Text('Cena'), color: Colors.green,),

              ],

            ),

          ),

          ]

      ),

    ),

      ],

    );

  }

}


class HomePage extends StatefulWidget {
  const HomePage({ Key key}) : super(key: key);
  @override
  _HomePageState createState() => new _HomePageState();
}

class _HomePageState extends State<HomePage> {
  var dayValues = [
    {
      'cereales': 1,
      'fruta': 2,
      'verdura': 3,
      'leguminosa': 4,
      'poa': 5,
      'grasa': 6,
      'azucar': 7,
      'leche': 8
    },
    {
      'cereales': 2,
      'fruta': 4,
      'verdura': 6,
      'leguminosa': 8,
      'poa': 10,
      'grasa': 12,
      'azucar': 14,
      'leche': 16
    },
    {
      'cereales': 3,
      'fruta': 6,
      'verdura': 9,
      'leguminosa': 12,
      'poa': 5,
      'grasa': 6,
      'azucar': 7,
      'leche': 8
    },
  ];

  var dayTitles = [
    'Antes del Ejercicio',
    'Desayuno',
    'Colacion Mañana',
    'Comida',
    'Colacion Tarde',
    'Cena'
  ];


  @override
  Widget build(BuildContext context) {
    var dayDisplay = new DayDisplay(dayTitles, dayValues);
    return new Scaffold(
      appBar: new AppBar(
      title: new Text("Verde Limón"),
      backgroundColor: Colors.green
      ),
      drawer: new AppDrawer(),
      floatingActionButton: new FloatingActionButton(
        onPressed: null,
        tooltip: 'Añadir Puntos',
        child: new Icon(Icons.add)
      ),
      body: new Column(
        children: <Widget>[
          dayDisplay,
          Divider(),
          Container(
            child:  new ListView(
              children: <Widget>[
                FGroupButton('Cereales', Colors.yellow[800], 12, CerealesPage(), Icon(Icons.fastfood, color:Colors.white)),
                FGroupButton('Cereales', Colors.yellow[800], 12, CerealesPage(), Icon(Icons.fastfood, color:Colors.white)),
                FGroupButton('Cereales', Colors.yellow[800], 12, CerealesPage(), Icon(Icons.fastfood, color:Colors.white)),
                FGroupButton('Cereales', Colors.yellow[800], 12, CerealesPage(), Icon(Icons.fastfood, color:Colors.white)),
                FGroupButton('Cereales', Colors.yellow[800], 12, CerealesPage(), Icon(Icons.fastfood, color:Colors.white)),
                FGroupButton('Cereales', Colors.yellow[800], 12, CerealesPage(), Icon(Icons.fastfood, color:Colors.white)),
                FGroupButton('Cereales', Colors.yellow[800], 12, CerealesPage(), Icon(Icons.fastfood, color:Colors.white)),
                FGroupButton('Cereales', Colors.yellow[800], 12, CerealesPage(), Icon(Icons.fastfood, color:Colors.white)),
                FGroupButton('Cereales', Colors.yellow[800], 12, CerealesPage(), Icon(Icons.fastfood, color:Colors.white)),
                FGroupButton('Cereales', Colors.yellow[800], 12, CerealesPage(), Icon(Icons.fastfood, color:Colors.white)),
              ],
            ),
          )
        ],
      ),
    );
  }
}

I don't know can be causing the problem, I added a ListView the same way in another app I was working on and it worked just fine. If you need any other code from the imports, ask for it and I will post it. Here is the full error log:

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

Thanks in advance for the help.

Answer 1

Just wrap the ListView with Expanded widget.

new Expanded(
child: new ListView(
          .....
          )
);

This tells the ListView to take width and height as much as it can.