I want to scroll up after the all childs of ListView have been scrolled up, parent widget of listvie-CodePudding

I have SingleChildScrollView as a parent and in that, I have two listviews each list view is wrapped with SizedBox with a specific height (like 700), what I want is, when I scroll up all the views that are in the first list, the first Listview should scroll up and then I'll be able to scroll next Listview, Please have a look into the code below. Your help means a lot to me. Thank you in advance. Note: I'm getting this required behavior in chrome but not on a mobile device

SingleChildScrollView( child: Column(children: [


      SizedBox(
        height: 700,
        child:ListView.builder(
            itemCount:
          20, itemBuilder: (context, index) {
            return const ListTile(leading: Icon(Icons.icecream,
              color: Colors.amber,), title: Text("Ice Cream"),);
          },),
        ),
     
      
      SizedBox(
        height: 300,
        child: ListView.builder(
          itemCount: 20, itemBuilder: (context, index) {
          return const ListTile(
            leading: Icon(Icons.cake, color: Colors.red,),
            title: Text("Cake"),);
        },),
      ),


    ],),)

CodePudding user response：

maybe you can use Stickyheader.

import 'package:sticky_headers/sticky_headers.dart';

ListView(
 shrinkwarp:true,
 children:[
  StickyHeader(
    head: Text('List 1 '),
    content : ListView.builder(
        physics: const ClampingScrollPhysics(), // use this for clamping scroll 
        itemBuilder: (context, idx) => Container(),
        itemCount:5,
       )
 StickyHeader(
    head: Text('List 2 '),
    content : ListView.builder(
        physics: const ClampingScrollPhysics(), // use this for clamping scroll 
        itemBuilder: (context, idx) => Container(),
        itemCount:5,
       )
 ]
}

CodePudding user response：

There are many easy ways to handle this situation as stated by many other developers. I have created an Example class with ScrollController and AbsordPointer classes to achieve the required behaviour.


class Example extends StatefulWidget {
  const Example({super.key});

  @override
  State<Example> createState() => _ExampleState();
}

class _ExampleState extends State<Example> {
  late ScrollController scrollController;
  var reachedAtEnd = false;
  @override
  void initState() {
    super.initState();
    scrollController =ScrollController()..addListener(() {
       if (scrollController.position.pixels == scrollController.position.maxScrollExtent) {
       reachedAtEnd = true;
       setState(() {
         
       });
      }
    },);
  }

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Column(
        children: [
          SizedBox(
            height: 700,
            child: ListView.builder(
              controller: scrollController,
              itemCount: 20,
              itemBuilder: (context, index) {
                return const ListTile(
                  leading: Icon(
                    Icons.icecream,
                    color: Colors.amber,
                  ),
                  title: Text("Ice Cream"),
                );
              },
            ),
          ),
          SizedBox(
            height: 300,
            child: AbsorbPointer(
              absorbing: !reachedAtEnd,
              child: ListView.builder(
                itemCount: 20,
                itemBuilder: (context, index) {
                  return const ListTile(
                    leading: Icon(
                      Icons.cake,
                      color: Colors.red,
                    ),
                    title: Text("Cake"),
                  );
                },
              ),
            ),
          ),
        ],
      ),
    );
  }
}