I'm trying to create scrollable list of posts, but instead i got static non-scrollable list, which is overflowing. Ecample: 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,
                          ),
                        ),
                      ),
                    ),
                  )
                ],
              );
            },
          ),
        ]))));
  }

I'm tried to find error with documentation, but... Pls write if u need some more code or explanations Please help me if you can <3

CodePudding user response：

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.

CodePudding user response：

@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
     )
   );
  }