Flutter - ScrollController with CupertinoSliverNavigationBar, largeTitle to smallTitle not working

Question

When I use a ScrollController in a ListView, it blocks the CupertinoSliverNavigationBar largeTitle from transitioning to a smallTitle. However, if I remove the scrollController, the problem goes away. I think it might be a bug in the Cupertino Library

This code demonstrates the issue:

 ScrollController scrollController = ScrollController();

  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      child: NestedScrollView(
        headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
          return <Widget>[
            CupertinoSliverNavigationBar(
              largeTitle: Text('Large Title'),
            ),
          ];
        },
        body: ListView.builder(
            controller: scrollController,
            itemCount: 50,
            itemBuilder: (BuildContext context, int index) {
              return Container(
                height: 50,
                child: Center(child: Text('Entry ${index}')),
              );
            }),
      ),
    );
  }

Now if I remove the scrollController, the problem is gone:

ScrollController scrollController = ScrollController();

  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      child: NestedScrollView(
        headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
          return <Widget>[
            CupertinoSliverNavigationBar(
              largeTitle: Text('Large Title'),
            ),
          ];
        },
        body: ListView.builder(
            //controller: scrollController,
            itemCount: 50,
            itemBuilder: (BuildContext context, int index) {
              return Container(
                height: 50,
                child: Center(child: Text('Entry ${index}')),
              );
            }),
      ),
    );
  }

Stewie Griffin · Accepted Answer · 2021-03-18T18:19:12.673

This is an expected behavior since NestedScrollView is meant to manage the scroll positions of all other child scrolling views:

NestedScrollView class

A scrolling view inside of which can be nested other scrolling views, with their scroll positions being intrinsically linked.

So, you cannot control the positions of its children views with an individual ScrollController. However, you can provide one for NestedScrollView to manage all at once.

NotificationListener

There is still a way to listen to the scroll events of the inner scroll view besides using ScrollController. You can have your ListView inside of NotificationListener and check the scroll info that it provides.

@override
Widget build(BuildContext context) {
  return CupertinoPageScaffold(
    child: NestedScrollView(
      headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
        return <Widget>[
          CupertinoSliverNavigationBar(
            largeTitle: Text('Large Title'),
          ),
        ];
      },
      body: NotificationListener<ScrollNotification>(
        onNotification: (ScrollNotification scrollInfo) {
          if (scrollInfo.metrics.pixels ==
              scrollInfo.metrics.maxScrollExtent) {
            print('Reached the bottom');
          }
          return;
        },
        child: ListView.builder(
          itemCount: 50,
          itemBuilder: (BuildContext context, int index) {
            return Container(
              height: 50,
              child: Center(child: Material(child: Text('Entry $index'))),
            );
          },
        ),
      ),
    ),
  );
}

The problem I have with placing the scrollController in the NestedScrollView (the parent) is that I cannot detect when the user scrolls to the bottom of the list. I can only accurately detect when the user scrolls to the bottom if the controller is placed in the child listView. None of the solutions mentioned here work: https://stackoverflow.com/questions/46377779/how-to-check-if-scroll-position-is-at-top-or-bottom-in-listview — MobileMon, Mar 18 '21 at 17:58
Now, I understood your situation better and added an example which demonstrates what you want to do. — Stewie Griffin, Mar 18 '21 at 18:20

Flutter - ScrollController with CupertinoSliverNavigationBar, largeTitle to smallTitle not working

1 Answers1

NestedScrollView class

NotificationListener