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());
              }
            },
          ),
        ],
      ),
    );

CodePudding user response：

As per your comment I think below link will helpful to you.

Lists

CodePudding user response：

I just added the below lines to your code. You can try the below code.

shrinkWrap: true,
physics: const  NeverScrollableScrollPhysics(),

return Scaffold(
      appBar: AppBar(),
      body: ListView(
        children: [
          ListView.builder(
              scrollDirection: Axis.horizontal,
              itemCount: 2,
              shrinkWrap: true,
              physics: const  NeverScrollableScrollPhysics(),
              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
                    shrinkWrap: true,
                    physics: const  NeverScrollableScrollPhysics(),
                    itemBuilder: (context, index) {
                      var anime = snapshot.data; //Get the data from the index
                      return AnimeCard(
                        anime: anime,
                      );
                    });
              } else {
                return const Center(child: CircularProgressIndicator());
              }
            },
          ),
        ],
      ),
    );

CodePudding user response：

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"),
          ),
        ],
      ),
    ));