ListView doesn't separate objects from doc

Question

I'm trying to create scrollable list of posts, but instead i got static non-scrollable bloc of strings, which is overflowing.

1. Example:

2. Oveflowing:

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        floatingActionButton: FloatingActionButton(
          onPressed: _writePost,
          tooltip: 'Increment',
          child: Icon(Icons.create, color: Colors.grey[300]),
        ),
        body: SizedBox(
            child: Container(
                child: Column(children: [
          StreamBuilder<List<Post>>(
            initialData: const [],
            stream: _socketStream.stream,
            builder: (context, snapshot) {
              if (_isLoading) {
                return const Center(
                  child: CircularProgressIndicator(),
                );
              }
               ListView(
                scrollDirection: Axis.vertical,
                shrinkWrap: true,
                children: [
                  ...snapshot.data!.map<Widget>(
                    (post) => Padding(
                      key: ValueKey(post.id),
                      padding: const EdgeInsets.symmetric(vertical: 10),
                      child: ListTile(
                        title: Text(
                          post.content,
                          style: const TextStyle(fontSize: 20),
                        ),
                        trailing: MaterialButton(
                          onPressed: () {
                            _deletePost(post.id);
                          },
                          child: const Icon(
                            Icons.delete,
                            size: 30,
                          ),
                        ),
                      ),
                    ),
                  )
                ],
              );
            },
          ),
        ]))));
  }

Moreover, they all go like a single card, without separating.

Edited code, which is scrolling but doesn't separate posts

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        floatingActionButton: FloatingActionButton(
          onPressed: _writePost,
          tooltip: 'Increment',
          child: Icon(Icons.create, color: Colors.grey[300]),
        ),
        body: SizedBox(
          height: 500, 
          child:
              StreamBuilder<List<Post>>(
            initialData: const [],
            stream: _socketStream.stream,
            builder: (context, snapshot) {
              if (_isLoading) {
                return const Center(
                  child: CircularProgressIndicator(),
                );
              }
              return Card(child: ListView(
                scrollDirection: Axis.vertical,
                shrinkWrap: true,
                children: [
                  ...snapshot.data!.map<Widget>(
                    (post) => Padding(
                      key: ValueKey(post.id),
                      padding: const EdgeInsets.symmetric(vertical: 10),
                      child: ListTile(
                        title: Text(
                          post.content,
                          style: const TextStyle(fontSize: 20),
                        ),
                        trailing: MaterialButton(
                          onPressed: () {
                            _deletePost(post.id);
                          },
                          child: const Icon(
                            Icons.delete,
                            size: 30,
                          ),
                        ),
                      ),
                    ),
                  )
                ],
               ) );
            },
          ),
        ));
  }

I'm tried to find error with documentation, but...

Answer 1

Column and Listview take the maximum available height. therefore, the height of Listview which here is a child of Column should be constrained. You can do so by wrapping your ListView inside Expanded:

child: Column(
        children: [
          Expanded(
            child: ListView(

Also, if your list is long, it is not recommended to set shrinkwrap to true. Because it makes the ListView to load all its items when the layout gets built. So it can slow down performance.

Answer 2

@override
  Widget build(BuildContext context) {
    return Scaffold(
        floatingActionButton: FloatingActionButton(
          onPressed: _writePost,
          tooltip: 'Increment',
          child: Icon(Icons.create, color: Colors.grey[300]),
        ),
        body: SizedBox(
           height: MediaQuery.of(context).height*0.8,  // add this line 
            child: 
          // Container(        // do not need this
          //                   child:   // and this do not need    
          // Column(children: [      // and this do not need 
          StreamBuilder<List<Post>>(
            initialData: const [],
            stream: _socketStream.stream,
            builder: (context, snapshot) {
              if (_isLoading) {
                return const Center(
                  child: CircularProgressIndicator(),
                );
              }
               ListView(  // change this to ListView.builder for more performance
                scrollDirection: Axis.vertical,
                shrinkWrap: true,
                children: [
                  ...snapshot.data!.map<Widget>(
                    (post) => Padding(
                      key: ValueKey(post.id),
                      padding: const EdgeInsets.symmetric(vertical: 10),
                      child: ListTile(
                        title: Text(
                          post.content,
                          style: const TextStyle(fontSize: 20),
                        ),
                        trailing: MaterialButton(
                          onPressed: () {
                            _deletePost(post.id);
                          },
                          child: const Icon(
                            Icons.delete,
                            size: 30,
                          ),
                        ),
                      ),
                    ),
                  )
                ],
              );## Heading ##
            },
          ),
       // ]) // comment this
       // ).  // and comment this
     )
   );
  }