how to enable scrolling when ListView widget reach at top in flutter

Question

To explain what I want I have created a simple demo file

Here I have 4 container,

What I want is, when I scroll up,all three container( RED, GREEN and listview) should be scrolled up and when listview reach at top (below welcome container) its scrolling should be start...

class HomeScreen extends StatelessWidget {
  HomeScreen({Key? key}) : super(key: key);

  List<String> mydata = [];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Column(
          children: [
            //this welcome container should be fixed at top
            Container(height: 50, child: Center(child: Text('Welcome'))),
            Container(
              height: 100,
              color: Colors.red,
            ),
            Container(
              height: 200,
              color: Colors.green,
            ),
            Expanded(
                child: ListView.builder(
                    itemCount: mydata.length,
                    itemBuilder: (context, index) {
                      return ListTile(
                        title: Text(mydata[index]),
                        leading: CircleAvatar(),
                      );
                    }))
          ],
        ),
      ),
    );
  }
}

Answer 1

You can increase the itemCount by two.

body: SafeArea(
  child: Column(
    children: [
      Container(height: 50, child: Center(child: Text('Welcome'))),
      Expanded(
          child: ListView.builder(
              itemCount: mydata.length + 2,
              itemBuilder: (context, index) {
                if (index == 0) {
                  return Container(
                    height: 100,
                    color: Colors.red,
                  );
                }
                if (index == 1) { // you can just merge it with if like `index<2`, then use condition
                  return Container(
                    height: 200,
                    color: Colors.green,
                  );
                }
                return ListTile(
                  title: Text(mydata[index - 2]),
                  leading: CircleAvatar(),
                );
              }))
    ],
  ),
),

Also I will suggest you to check CustomScrolView .

Answer 2

In order to enable scrolling when the ListView widget reaches the top, and have the other containers scroll with it, you can wrap the entire column in a SingleChildScrollView widget. The SingleChildScrollView allows you to scroll the entire column, including the welcome container, the red container, the green container, and the ListView.

Here is an example of how you can modify your code to enable scrolling when the ListView widget reaches the top:

return Scaffold(
    body: SafeArea(
        child:SingleChildScrollView(
        child: Column(children: [
          
         //this welcome container should be fixed at top
          Container(
              height: 50,
              child: Center(child: Text('Welcome'))),
          Container(
            height: 100,
            color: Colors.red,
          ),
          Container(
            height: 200,
            color: Colors.green,
          ),
          Expanded(child: ListView.builder(
              itemCount: mydata.length,
              itemBuilder: (context,index){
            return ListTile(
              title: Text(mydata[index]),
              leading: CircleAvatar(),
            );

          }))
        ],),
      ),
    ),
);

By wrapping the column in a SingleChildScrollView, when you scroll up, all three container (RED, GREEN, and ListView) will be scrolled up and when the ListView reaches the top (below the welcome container), its scrolling will start.

Alternatively, you can use the ListView widget and set the physics property to NeverScrollableScrollPhysics to prevent the ListView from scrolling.

Expanded(
    child: ListView.builder(
        physics: NeverScrollableScrollPhysics(),
        itemCount: mydata.length,
        itemBuilder: (context,index){
            return ListTile(
                title: Text(mydata[index]),
                leading: CircleAvatar(),
            );
        }
    )
)

This approach will allow the parent Scrollview to scroll up, and when the ListView reaches the top, the Welcome container will be seen.