3

I am tying to put two ListView.builder in a single widget screen, but I am getting the following error:

The following assertion was thrown during performLayout():
I/flutter (17103): RenderFlex children have non-zero flex but incoming         
height constraints are unbounded.
I/flutter (17103): When a column is in a parent that does not provide a     
finite height constraint, for example if it is
I/flutter (17103): in a vertical scrollable, it will try to shrink-wrap its 
children along the vertical axis. Setting a
I/flutter (17103): flex on a child (e.g. using Expanded) indicates that the 
child is to expand to fill the remaining
I/flutter (17103): space in the vertical direction.
I/flutter (17103): These two directives are mutually exclusive. If a parent 
is to shrink-wrap its child, the child
I/flutter (17103): cannot simultaneously expand to fit its parent.
I/flutter (17103): Consider setting mainAxisSize to MainAxisSize.min and 
using FlexFit.loose fits for the flexible
I/flutter (17103): children (using Flexible rather than Expanded). This will 
allow the flexible children to size
I/flutter (17103): themselves to less than the infinite remaining space they 
would otherwise be forced to take, and
I/flutter (17103): then will cause the RenderFlex to shrink-wrap the 
children rather than expanding to fit the maximum
I/flutter (17103): constraints provided by the parent.
I/flutter (17103): The affected RenderFlex is:
I/flutter (17103):   RenderFlex#446cb relayoutBoundary=up14 NEEDS-LAYOUT 
NEEDS-PAINT

This is my code:

 @override
 Widget build(BuildContext context) {
if (!loaded) _loadZones();
return new Scaffold(
    body: new Column(
  children: <Widget>[
    new Padding(padding: EdgeInsets.fromLTRB(0, 20, 0, 0)),
    new Expanded(
        child: new ListView.builder(
            itemCount: zones.length,
            itemBuilder: (BuildContext context, int index) {
              Zone zone = zones[index];
              List<Place> places = zone.places;
              print(zone.toString());
              print(places.length);
              return InkWell(
                  onTap: () {
                    Navigator.push(
                      context,
                      FromRightToLeft(
                          builder: (context) => CondominiumScreen(zone.id)),
                    );
                  },
                  child: Card(
                      color: Colors.white,
                      key: Key(zone.name),
                      margin: EdgeInsets.fromLTRB(10, 5, 10, 5),
                      child: new InkWell(
                          child: new Column(
                        children: <Widget>[
                          ListTile(
                            leading: Icon(Icons.place),
                              title: Row(
                            children: <Widget>[
                              Icon(
                                Icons.place,
                                color: Colors.grey,
                              ),
                              Text(
                                ' ${zone.name}',
                                style: TextStyle(fontSize: 20),
                              ),
                            ],
                          )),
                          new Divider(),
                          new Flexible(
                            child: new ListView.builder(
                                itemCount: places.length,
                                itemBuilder: (BuildContext ct, int i) {
                                  Place place = places[i];
                                  return Text(
                                    "● ${place.name}",
                                    textAlign: TextAlign.start,
                                  );
                                }),
                          ),
                          new Divider(),
                          new Row(
                            children: <Widget>[
                              Padding(
                                padding: EdgeInsets.fromLTRB(5, 0, 5, 0),
                              ),
                              Expanded(
                                flex: 50,
                                child: InkWell(
                                    child: FlatButton(
                                        child: const Text('Reportes'),
                                        shape: RoundedRectangleBorder(
                                            side: BorderSide(
                                                color: Colors.black12)),

Blockquote

              splashColor: Colors.white10,
                                        color: Colors.white,
                                        onPressed: () {
                                          /* ... */
                                        })),
                              ),
                              Padding(
                                  padding: EdgeInsets.fromLTRB(5, 0, 5, 0)),
                              Expanded(
                                flex: 50,
                                child: InkWell(
                                    child: FlatButton(
                                        child: const Text('Turnos'),
                                        shape: RoundedRectangleBorder(
                                            side: BorderSide(
                                                color: Colors.black12)),
                                        splashColor: Colors.white10,
                                        color: Colors.white,
                                        onPressed: () {
                                          /* ... */
                                        })),
                              ),
                              Padding(
                                padding: EdgeInsets.fromLTRB(5, 0, 5, 0),
                              ),
                            ],
                          ),
                        ],
                      ))));
            }))
  ],
));

}

I've try puttin the mainAxisSize to MainAxisSize.min in each column, but it does not works.

The following assertion was thrown during performLayout():

I/flutter (17956): RenderFlex children have non-zero flex but incoming height constraints are unbounded.
I/flutter (17956): When a column is in a parent that does not provide a finite height constraint, for example if it is
I/flutter (17956): in a vertical scrollable, it will try to shrink-wrap its children along the vertical axis. Setting a
I/flutter (17956): flex on a child (e.g. using Expanded) indicates that the child is to expand to fill the remaining
I/flutter (17956): space in the vertical direction.
I/flutter (17956): These two directives are mutually exclusive. If a parent is to shrink-wrap its child, the child
I/flutter (17956): cannot simultaneously expand to fit its parent.
I/flutter (17956): Consider setting mainAxisSize to MainAxisSize.min and using FlexFit.loose fits for the flexible
I/flutter (17956): children (using Flexible rather than Expanded). This will allow the flexible children to size
I/flutter (17956): themselves to less than the infinite remaining space they would otherwise be forced to take, and
I/flutter (17956): then will cause the RenderFlex to shrink-wrap the children rather than expanding to fit the maximum
I/flutter (17956): constraints provided by the parent.

2 Answers 2

12

In order to fix the Given Error in your Code - you need to do Two things - Add shrinkWrap: true, in ListView.builder & removed Flexible in Second ListView.builder -

Updated Code Looks Like:

   Widget build(BuildContext context) {
    if (!loaded) _loadZones();
    return new Scaffold(
        body: new Column(
      children: <Widget>[
        new Padding(padding: EdgeInsets.fromLTRB(0, 20, 0, 0)),
        new Expanded(
            child: new ListView.builder(
                shrinkWrap: true,   //Added
                itemCount: zones.length,
                itemBuilder: (BuildContext context, int index) {
                  Zone zone = zones[index];
                  List<Place> places = zone.places;
                  print(zone.toString());
                  print(places.length);
                  return InkWell(
                      onTap: () {
                        Navigator.push(
                          context,
                          FromRightToLeft(
                              builder: (context) => CondominiumScreen(zone.id)),
                        );
                      },
                      child: Card(
                          color: Colors.white,
                          key: Key(zone.name),
                          margin: EdgeInsets.fromLTRB(10, 5, 10, 5),
                          child: new InkWell(
                              child: new Column(
                            children: <Widget>[
                              ListTile(
                                  leading: Icon(Icons.place),
                                  title: Row(
                                    children: <Widget>[
                                      Icon(
                                        Icons.place,
                                        color: Colors.grey,
                                      ),
                                      Text(
                                        ' ${zone.name}',
                                        style: TextStyle(fontSize: 20),
                                      ),
                                    ],
                                  )),
                              new Divider(),
                              new ListView.builder(   //removed Flexible
                                  shrinkWrap: true, //Added
                                  itemCount: places.length,
                                  itemBuilder: (BuildContext ct, int i) {
                                    Place place = places[i];
                                    return Text(
                                      "● ${place.name}",
                                      textAlign: TextAlign.start,
                                    );
                                  }),
                              new Divider(),
                              new Row(
                                children: <Widget>[
                                  Padding(
                                    padding: EdgeInsets.fromLTRB(5, 0, 5, 0),
                                  ),
                                  Expanded(
                                    flex: 50,
                                    child: InkWell(
                                        child: FlatButton(
                                            child: const Text('Reportes'),
                                            shape: RoundedRectangleBorder(
                                                side: BorderSide(
                                                    color: Colors.black12)),
                                            splashColor: Colors.white10,
                                            color: Colors.white,
                                            onPressed: () {
                                              /* ... */
                                            })),
                                  ),
                                  Padding(
                                      padding: EdgeInsets.fromLTRB(5, 0, 5, 0)),
                                  Expanded(
                                    flex: 50,
                                    child: InkWell(
                                        child: FlatButton(
                                            child: const Text('Turnos'),
                                            shape: RoundedRectangleBorder(
                                                side: BorderSide(
                                                    color: Colors.black12)),
                                            splashColor: Colors.white10,
                                            color: Colors.white,
                                            onPressed: () {
                                              /* ... */
                                            })),
                                  ),
                                  Padding(
                                    padding: EdgeInsets.fromLTRB(5, 0, 5, 0),
                                  ),
                                ],
                              ),
                            ],
                          ))));
                }))
      ],
    ));
  }
Sign up to request clarification or add additional context in comments.

Comments

2

When using nestled ListViews, you would have to specify the height constraint for the inner list view. And also remember when there is a column inside a list view, you cannot use expanded child without specifying column height.

To specify height constraints, just wrap respective widgets in a Container with height.

If you would not want to specify height and let framework layout the children. So kindly remove inner ListView.builder & replace it with a Column, also please remove any Expanded or Flexible widgets inside root ListView that has no parent having height information.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.