RenderFlex children have non-zero flex but incoming height constraints are unbounded: Nested ListView

Viewed 59

I am trying to build a Nested listview but getting "RenderFlex children have non-zero flex but incoming height constraints are unbounded" error with below code.

Layers are like this...

Each item of a horizontal ListView has a Text widget and a ListView widget. At the second level, each item of vertical ListView contains again a Text widget and a ListView. At the third level, each item of the ListView contains a Text widget.

 -Horizontal ListView
     - Person's Name
     - ListView
         - Relation Name
         - ListView
             - Person's Name   

Thanks in advance.

person.relations is a Map<String, List<Person>>

Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Relationship Explorer"),
      ),
      body: SafeArea(
        child: BlocBuilder<RelationCubit, CubitState>(
          bloc: _cubit,
          builder: (_, state) {
            if (state is RelationSuccessState) {
              return ListView.builder(
                scrollDirection: Axis.horizontal,
                itemBuilder: (_, outerIndex) =>
                    _relationTreeView(context, outerIndex),
                itemCount: _cubit.people.length,
              );
            } else {
              return WaitWidget();
            }
          },
        ),
      ),
    );
  }

  Widget _relationTreeView(BuildContext context, int outerIndex) {
    var person = _cubit.people[outerIndex];
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: <Widget>[
        Text(person.displayName ?? ''),
        Expanded(
          child: Container(
            width: MediaQuery.of(context).size.width,
            child: ListView.builder(
              shrinkWrap: true,
              physics: ClampingScrollPhysics(),
              itemCount: person.relations?.length,
              itemBuilder: (_, index) {
                var persons = person.relations?[index];
                return Column(
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    Text(person.relations!.keys.elementAt(index)),
                    Expanded(
                      child: Container(
                        width: MediaQuery.of(context).size.width,
                        child: ListView.builder(
                          shrinkWrap: true,
                          physics: ClampingScrollPhysics(),
                          itemCount: persons.length,
                          itemBuilder: (_, index) {
                            var innerPerson = persons[index];
                            return Text(innerPerson.displayName ?? '');
                          },
                        ),
                      ),
                    )
                  ],
                );
              },
            ),
          ),
        ),
      ],
    );
  }
1 Answers

Wrap the list view with a container and give a height.

Related