ListView.builder inside another ListView.builder flutter

Question

I have a ListView.builder that has a dropdown arrow to the right such that when its tapped, it shows another listView.builder with its items. The first list works well as it takes the size of its child items but the same experience is not happening on the second list. I have tried every solution but its still not working as I get an error.

Code

  Column(
            mainAxisSize: MainAxisSize.min,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              SizedBox(
                height: 30,
              ),
              Text(
                "SELECT A PACKAGE",
                textAlign: TextAlign.start,
                style: TextStyle(
                  fontSize: 12,
                  fontFamily: 'Lato',
                  color: textColor,
                  fontWeight: FontWeight.w700,
                ),
              ),
              SizedBox(
                height: 14,
              ),
              !isDataLoaded?ShimmerListView():
                  Expanded(
                    child: ListView.builder(
                      shrinkWrap: true,
                      physics: NeverScrollableScrollPhysics(),
                      itemCount: bloc.packages.length,
                      itemBuilder: (context, index){
                        return Container(
                          margin: EdgeInsets.only(bottom: 5),
                          child: Card(
                            shape: RoundedRectangleBorder(
                                borderRadius: BorderRadius.
                                all(Radius.circular(12)),
                                side: BorderSide(color:
                                borderColor, width: 1)
                            ),
                            child: Container(
                              padding: EdgeInsets.symmetric(horizontal: 16, vertical: 16),
                              child:  Row(
                                mainAxisSize: MainAxisSize.min,
                                children: [
                                  Column(
                                    mainAxisSize: MainAxisSize.min,
                                    crossAxisAlignment: CrossAxisAlignment.start,
                                    children: [
                                      Text(
                                        bloc.packages[index].title,
                                        textAlign: TextAlign.start,
                                        style: TextStyle(
                                          fontSize: 16,
                                          fontFamily: 'Lato',
                                          color: primaryColor,
                                          fontWeight: FontWeight.w700,
                                        ),
                                      ),
                                      SizedBox(
                                        height: 14,
                                      ),
                                      Text(
                                        bloc.packages[index].desc,
                                        textAlign: TextAlign.start,
                                        style: TextStyle(
                                          fontSize: 14,
                                          fontFamily: 'Lato',
                                          color: textColor,
                                          fontWeight: FontWeight.w500,
                                        ),
                                      ),
                                      bloc.packages[index].isTapped?
                                      Container(
                                        height: 300,
                                        child: ListView.builder(
                                          physics: NeverScrollableScrollPhysics(),
                                          shrinkWrap: true,
                                          itemCount: bloc.packages[globalIndex].plans.length,
                                          itemBuilder: (context, index){
                                          return Container(
                                            width: 230,
                                            margin: EdgeInsets.only(top: 14),
                                            padding: EdgeInsets.symmetric
                                              (horizontal: 10, vertical: 10),
                                            decoration: BoxDecoration(
                                                color:containerBgColor,
                                                borderRadius: BorderRadius
                                                    .all(Radius.circular(12))
                                            ),
                                            child: Row(
                                              mainAxisSize: MainAxisSize.min,
                                              children: [
                                                Container(
                                                  width:24,
                                                  height:24,
                                                  decoration: BoxDecoration(
                                                    color: Colors.white,
                                                    shape: BoxShape.circle,
                                                  ),
                                                ),
                                                SizedBox(
                                                  width: 16,
                                                ),
                                                Column(
                                                  mainAxisSize: MainAxisSize.min,
                                                  crossAxisAlignment: CrossAxisAlignment.start,
                                                  children: [
                                                    Text(
                                                      bloc.packages[index].desc,
                                                      textAlign: TextAlign.start,
                                                      style: TextStyle(
                                                        fontSize: 14,
                                                        fontFamily: 'Lato',
                                                        color: textColor,
                                                        fontWeight: FontWeight.w500,
                                                      ),
                                                    ),
                                                    SizedBox(
                                                      height: 10,
                                                    ),
                                                    Text(
                                                      'NGN ${12000}',
                                                      textAlign: TextAlign.start,
                                                      style: TextStyle(
                                                        fontSize: 16,
                                                        fontFamily: 'Lato',
                                                        color: normalText,
                                                        fontWeight: FontWeight.w700,
                                                      ),
                                                    ),
                                                  ],
                                                ),
                                              ],
                                            ),
                                          );
                                          },
                                        ),
                                      )
                                          :Container(),
                                    ],
                                  ),
                                  Spacer(),
                                  IconButton(icon:
                                  Icon(
                                   !bloc.packages[index].isTapped?
                                   Mdi.chevronDown:
                                   Mdi.chevronUp,
                                    color: textColor,
                                  ), onPressed:(){
                                    setState(() {
                                      globalIndex = index;
                                      bloc.packages[index].isTapped
                                      = !bloc.packages[index].isTapped;
                                    });
                                  })
                                ],
                              ),
                            ),
                          ),
                        );
                      },
                    ),
                  ),
            ],
          ),

Error

RenderBox was not laid out: RenderRepaintBoundary#87e06 relayoutBoundary=up27 NEEDS-PAINT

Tried wrapping second list with an expanded and also give fixed height but got same error.

Elfor · Accepted Answer · 2021-02-24 19:34:38Z

2

ListView requires a finite height, but your inner ListView has an infinite height.
One way you can do it is to wrap the inner ListView with a Container, SizedBox, or any widget with a defined height

example

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text('title'),
    ),
    body: ListView.builder(
      itemCount: 20,
      itemBuilder: (BuildContext context, int index) {
        if (index == 10) {
          return Container(
            height: 200,  // finite height
            child: ListView.builder(
              itemCount: 20,
              itemBuilder: (BuildContext context, int index) {
                return Container(
                  height: 30,
                  color: Color.fromRGBO(10, 255, index * 10, 100),
                  child: Text(index.toString()),
                );
              },
            ),
          );
        }
        return Container(
          height: 36,
          color: Color.fromRGBO(index * 10, 20, 100, 100),
          child: Text(index.toString()),
        );
      },
    ),
  );
}

if you want a cleaner way check out the NestedScrollView, and this answer to a similar question.

Edit: `'constraints.hasBoundedWidth': is not true.` error

you need to provide a finite width for ListView. your ListView is in a row, which has an infinite width.

to fix it, edit the row in line 39 as follows.

Row(
  children: [
    Expanded( // 1- Wrap the Column with an Expanded
      child: Column(
        // ...
      ),
    ),
    // Spacer(), 2- Remove Spacer
    IconButton(
      // ...
    ),
  ],
)

edited Feb 24, 2021 at 19:34

answered Feb 24, 2021 at 10:18

Elfor

5876 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

custom apps Over a year ago

added height to inner list view. same result

Elfor Over a year ago

@customapps ok I tested your code and it's the same problem, but this time for the width. you need to provide a finite width for ListView. your ListView is in a row, which has an infinite width. I updated the answer to fix it.

Kdon · Accepted Answer · 2024-10-04 01:51:04Z

I had the same issue, and solved it by nesting a ListView.builder inside of a CustomScrollView. Note to set true to shrinkwrap of the nested ListView.builder.


            return CustomScrollView(
              slivers: [
                SliverList(
                  delegate: SliverChildBuilderDelegate(
                    childCount: 5,
                    (BuildContext context, int index) {
                      return Column(
                        children: [
                          if (index == 0) ...[Text('PART ONE')],
                          if (index < 4) ...[
                            ListTile(
                              title: Text('Part one $index'),
                            ),
                          ],
                          if (index == 4) ...[
                            Text('PART TWO'),
                            ListView.builder(
                                shrinkWrap: true,
                                itemCount: 3,
                                itemBuilder: (context, index) {
                                  return ListTile(
                                    title:
                                        Text(' Part two $index'),
                                  );
                                }),
                          ],
                        ],
                      );
                    },
                  ),
                ),
              ],
            );

Collectives™ on Stack Overflow

ListView.builder inside another ListView.builder flutter

2 Answers 2

Edit: `'constraints.hasBoundedWidth': is not true.` error

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Edit: 'constraints.hasBoundedWidth': is not true. error

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related

Edit: `'constraints.hasBoundedWidth': is not true.` error