Can't use Overflow box inside a scrollable list

Question

I want to use OverflowBox inside a ListView but it doesn't work properly in case of scrollable content but it works perfectly in those cases:

1. If I replace ListView with a non-scrollable widget such as Column.
2. If the ListView content doesn't need to be scrolled.

---

ListView(
      children: [
        SizedBox(
          height: MediaQuery.of(context).size.height * .45,
          child: OverflowBox(
            maxHeight: MediaQuery.of(context).size.height * .45,
            maxWidth: MediaQuery.of(context).size.width,
            child: HorizontalList(images: data?.pictures ?? []),
          ),
        ),
      ],
    )

Answer 1

Put the overflow box in a container with fixed size.

Answer 2

If you want to keep the HorizontalList scrolling, you should use shrinkWrap like this, assuming HorizontalList is a ListView:

class HorizontalList extends StatelessWidget {
  final List<String> images;
  const HorizontalList({Key? key, required this.images}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
        shrinkWrap: true,
        itemCount: 100,
        itemBuilder: (context, index){
      return Text("item: $index");
    });
  }
}

Change the itemCount to try.

For Testing I'm putting all in a Column so looks like this:

Expanded(
                child: ListView(
                  children: [
                    Text("before Text"),
                    SizedBox(
                      height: MediaQuery.of(context).size.height * .45,
                      child: OverflowBox(
                        maxHeight: MediaQuery.of(context).size.height * .45,
                        maxWidth: MediaQuery.of(context).size.width,
                        child: HorizontalList(images: ["1","2","2"]),
                      ),
                    ),
                    Text("after Text")
                  ],
                ),
              )