I want to scroll up after the all childs of ListView have been scrolled up, parent widget of listview is SingleChildScrollView in flutter

Question

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"),);
        },),
      ),


    ],),)

Answer 1

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,
       )
 ]
}

Answer 2

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 behavior.

Sample

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(
      physics: NeverScrollableScrollPhysics(),
      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"),
                  );
                },
              ),
            ),
          ),
        ],
      ),
    );
  }
}

Answer 3

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> with TickerProviderStateMixin {
  // this variable determnines whether the back-to-top button is shown or not
  bool _showBackToTopButton = false;

  // scroll controller
  late ScrollController _scrollController;

  @override
  void initState() {
    _scrollController = ScrollController()
      ..addListener(() {
        setState(() {
          print(_scrollController.offset);
          if (_scrollController.offset >= 400) {
            _showBackToTopButton = true;
            // _scrollToTop();
            // show the back-to-top button
          } else {
            _showBackToTopButton = false; // hide the back-to-top button
          }
        });
      });

    super.initState();
  }

  @override
  void dispose() {
    _scrollController.dispose(); // dispose the controller
    super.dispose();
  }

  // This function is triggered when the user presses the back-to-top button
  void _scrollToTop() {
    _scrollController.animateTo(0,
        duration: const Duration(seconds: 3), curve: Curves.linear);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('com'),
      ),
      body: ListView.builder(
        controller: _scrollController,
        itemCount: 40,
        itemBuilder: (context, index) {
          print(index);
          if (index == 39) {
            _scrollToTop();
          }
          return const ListTile(
            leading: Icon(
              Icons.icecream,
              color: Colors.amber,
            ),
            title: Text(' Ice Cream'),
          );
        },
      ),

      
    );
  }
}

Answer 4

You Can Do something like this on the Controllers:

import 'dart:developer';

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

class ScrollingBehaviourInDart extends StatefulWidget {
  const ScrollingBehaviourInDart({Key? key}) : super(key: key);

  @override
  State<ScrollingBehaviourInDart> createState() =>
      _ScrollingBehaviourInDartState();
}

class _ScrollingBehaviourInDartState extends State<ScrollingBehaviourInDart> {
  late ScrollController _sc1;
  late ScrollController _sc2;
  late ScrollController _sc3;

  @override
  void initState() {
    _sc1 = ScrollController();
    _sc2 = ScrollController();
    _sc3 = ScrollController();
    var _pr = Provider.of<MyScrollProvider>(context, listen: false);
    _sc1.addListener(() {
      log("SC1::::::::::: " + _sc1.position.pixels.toString());
      if (_sc1.position.pixels == _sc1.position.minScrollExtent) {
        print("OK");
        _pr.changePhysics(enableScrolling: true);
      }
    });
    _sc2.addListener(() {
      if (_sc2.offset == _sc2.position.maxScrollExtent) {
        _pr.changePhysics(enableScrolling: false);
        log("YAAA");
      }
    });

    _sc3.addListener(() {
      log("SC3::::::::::: " + _sc3.position.pixels.toString());
    });

    super.initState();
  }

  @override
  void dispose() {
    _sc1.dispose();
    _sc2.dispose();
    _sc3.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    var _size = MediaQuery.of(context).size;
    return SafeArea(
      child: Scaffold(
        backgroundColor: Colors.white.withOpacity(0.8),
        body: SizedBox(
          height: _size.height,
          child: Consumer<MyScrollProvider>(
            builder: (context, myScrollProvider, _) => SingleChildScrollView(
              controller: _sc1,
              child: Column(
                children: [
                  SizedBox(
                    height: _size.height * 0.5,
                    child: ListView.builder(
                      controller: _sc2,
                      physics: myScrollProvider.enablePrimaryScroll
                          ? const AlwaysScrollableScrollPhysics()
                          : const NeverScrollableScrollPhysics(),
                      itemCount: 20,
                      shrinkWrap: true,
                      itemBuilder: (context, index) {
                        return const ListTile(
                          leading: Icon(
                            Icons.icecream,
                            color: Colors.amber,
                          ),
                          title: Text("Ice Cream"),
                        );
                      },
                    ),
                  ),
                  ListView.builder(
                    itemCount: 20,
                    controller: _sc3,
                    shrinkWrap: true,
                    physics: const NeverScrollableScrollPhysics(),
                    itemBuilder: (context, index) {
                      return const ListTile(
                        leading: Icon(
                          Icons.cake,
                          color: Colors.red,
                        ),
                        title: Text("Cake"),
                      );
                    },
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}

class MyScrollProvider extends ChangeNotifier {
  var enablePrimaryScroll = true;
  changePhysics({required bool enableScrolling}) {
    enablePrimaryScroll = enableScrolling;
    notifyListeners();
  }
}