Listview.builder inside Wrap constraints.hasBoundedHeight is not true

Question

Hello I am trying to render elements in a wrap with a listview.builder but it gives me the error constraints.hasBoundedHeight and RenderBox was not laid out: RenderShrinkWrappingViewport#fd59a relayoutBoundary=up25 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE

This is my code:

    child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
          Wrap(
            alignment: WrapAlignment.start,
            crossAxisAlignment: WrapCrossAlignment.center,
            direction: Axis.horizontal,
            spacing: 10,
            runSpacing: 15,
            children: [
              const CompatiblesInput(),
              Expanded(
                child: ListView.builder(
                  scrollDirection: Axis.horizontal,
                  shrinkWrap: true,
                  itemCount: categories.length,
                  itemBuilder: (context, index) {
                    final category = categories[index];
                    return _Category(title: category, index: index);
                  },
                ),
              ),
              const _AddCategory(),
            ],
          ),
          if (categories.isEmpty) CategoryProvider.nullCheck(),
          if (categories.length >= 5) CategoryProvider.maxCheck(),
          const SizedBox(height: 10),
        ],
     ),

This is giving me the error above. I have been searching everywhere and everyone says to put a shinkWrap: true but it is there and still not working. Is there a way to solve this?

I hope you can help me. Thanks in advance!

Answer 1

Instead of wrapping your horizontal list with Expanded widget, you should wrap it with SizedBox, like this:

SizedBox(
     height: 20,
     child: ListView.builder(
        scrollDirection: Axis.horizontal,
        itemCount: categories.length,
        itemBuilder: (context, index) {
        final category = categories[index];
            return _Category(title: category, index: index);
        },
    ),
),

or if you don't want to set a height for list view, you can do this:

SingleChildScrollView(
     scrollDirection: Axis.horizontal,
     child: Row(
        children: categories.map((e) => Text('data $e')).toList(),
     ),
),