Flutter - unboundedHeight error within ListView

Issue

Flutter newbie here!

Currently, my Scaffold has 2 listview builders and the bottom one is giving me the unbounded height (!constraints.hasBoundedHeight error) issue.

I have tried using shrinkWrap on all 3 list views, as suggested in similar questions but I get the same error.

The only thing that works is wrapping the FutureBuilder in a SizedBox. But that seems unintuitive to me, as I would want it to ideally expand as needed and be scrollable.

My rough solution is to maybe dynamically calculate the height based on the number of items the FutureBuilder needs, but again, I feel there should be a better solution.

My code snippet is attached below:

return Scaffold(
      appBar: AppBar(),
      body: ListView(
        children: [
          ListView.builder(
              scrollDirection: Axis.horizontal,
              itemCount: 2,
              itemBuilder: (context, index) {
                return const SuggestCard(
                  indexKey: 'takt',
                );
              }),
          FutureBuilder<AnimeDetails>(
            future: _animeDetail,
            builder: (context, snapshot) {
              if (snapshot.hasData) {
                return ListView.builder(
                    itemCount: 2, //Number of anime from list
                    itemBuilder: (context, index) {
                      var anime = snapshot.data; //Get the data from the index
                      return AnimeCard(
                        anime: anime,
                      );
                    });
              } else {
                return const Center(child: CircularProgressIndicator());
              }
            },
          ),
        ],
      ),
    );

Solution

The parent ListView handling scroll event for body and while second ListView will have fixed height, you can do it like this

  return Scaffold(
        body: LayoutBuilder(
      builder: (context, constraints) => ListView(
        children: [
          SizedBox(
            height: constraints.maxHeight * .3,
            child: ListView.builder(
              itemCount: 122,
              shrinkWrap: true,
              scrollDirection: Axis.horizontal,
              itemBuilder: (context, index) => Text("H $index"),
            ),
          ),
          ListView.builder(
            shrinkWrap: true,
            physics:
                const NeverScrollableScrollPhysics(), // parent controll the scroll event
            itemCount: 44,
            itemBuilder: (context, index) => Text("$index"),
          ),
        ],
      ),
    ));

Answered By - Yeasin Sheikh