CustomScrollView gives "Vertical viewport was given unbounded height." error

Question

First of all I know there is lots of question like that but I tried many things but none of them worked. I just want my column and futurebuilder widget to be scrollable together.

I have two widgets and a row in a column widget. My first widget is a Column named "_mainPost":

Widget _mainPost(...) {
    return Column(
        children: [
            ...
        ],
    ),
  }

and second widget is a futurebuilder named "commentFeed":

Widget _commentFeed(){
    return FutureBuilder(
      future: comments,
      builder: (BuildContext context, AsyncSnapshot snapshot){
        if (snapshot.hasError) {
          return const Center(
            child: Text("Error"),
          );
        }
        if (snapshot.hasData) {
          List<CommentElement> comments = snapshot.data;
          return ListView.builder(
              itemCount: comments.length,
              itemBuilder: (context, index) {
                CommentElement thisItem = comments[index];
                return _commentLayout(context, thisItem);
              });
        }
        return Center(
          child: Image.asset("assets/gifs/loading_block.gif"),
        );
      },
    );
}

And I put them together like that:

SafeArea(
  child: Container(
    child: Column(
      children: [
        Row(
          //...
        ),
        //both _mainPostLayout and _commentFeed must be scrollable together.
        Expanded(
          child: CustomScrollView(
            slivers: [
              SliverToBoxAdapter(
                child: _mainPost(
                    //some input
                ),
              ),
              SliverToBoxAdapter(
                child: _commentFeed(),
              ),
            ],
          ),
        ),
      ],
    ),
  ),
),

What i'm trying to do is that these two widgets can be scrolled together. I tried changing Expanded() Widget to a container with a height value container(height: 500) . But nothing changed. I tried putting them on SingleChildScrollView and giving it shrinkwrap:true doesn't changed anyting. I tried using CustomScrollView and slivers but same. The output I expect from my code is:

instead I get unbounded height error everytime I try something.

Answer 1

While the parent CustomScrollView is handling scrolling, you don't need to add ListView, You can use Column widget.

if (snapshot.hasData) {
  List<CommentElement> comments = snapshot.data;
  return Column(
    children: comments.map((e) {
      return _commentLayout(context, e);
    }).toList(),
  );
}

This should also work

if (snapshot.hasData) {
  return Column(
    children: snapshot.data.map((e) => _commentLayout(context, e)),
  ).toList();
}

But while we are inside Sliver, I think using SliverList is more suitable.

Widget _commentFeed() { // dont need to wrap with SliverToBoxAdapter on CustomScrollView
  return FutureBuilder(
    future: comments,
    builder: (BuildContext context, AsyncSnapshot snapshot) {
      if (snapshot.hasError) {
        return const SliverToBoxAdapter(
          child: Center(
            child: Text("Error"),
          ),
        );
      }
      if (snapshot.hasData) {
        List<CommentElement> comments = snapshot.data;
        return SliverList(
          delegate: SliverChildBuilderDelegate((context, index) {
            return _commentLayout(context, comments[index]);
          }
          childCount: comments.length,),
        );
      }
      return SliverToBoxAdapter(
        child: Image.asset("assets/gifs/loading_block.gif"),
      );
    },
  );
}