NestedScrollView reverse: scroll view length and additional grey space

[pmi-luf]

Hello,

I have some trouble setting up the NestedScrollView with the reverse option set to true. as you can see in the screenshot if I set the reverse to true the scroll view goes up (blue rectangle) as expected but it doesn't fill the available space. I'd like to get rid of the grey space (red rectangle).

Here is the code of the nested view implementation:

return NestedScrollView(
      controller: ScrollController(),
      physics: ScrollPhysics(parent: PageScrollPhysics()),
      reverse: true,
      headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
        return <Widget>[
          SliverList(
            delegate: SliverChildListDelegate(
              [
                Container(height: 100, color: Colors.blue),
                Container(height: 100, color: Colors.red),
                Container(height: 100, color: Colors.yellow),
              ],
            ),
          ),
        ];
      },
      body: ListView.builder(
        controller: ModalScrollController.of(context),
        itemBuilder: (context, index) {
          return Container(
            height: 100,
            color: index.isOdd ? Colors.green : Colors.orange,
          );
        },
        itemCount: 12,
      ),
    );

Here is how I show the bottom sheet modal:

onPressed: () => showCupertinoModalBottomSheet(
    expand: true,
    context: context,
    builder: (context) => MessageComposeAttachmentsManager(),
  ),

I don't know if I'm missing something, I couldn't find any user reporting this issue. What am I doing wrong?

[DaleLaw]

I found a solution that is use ClampingScrollPhysics() for any sub scrollview in the NestedScrollView:

return NestedScrollView(
      controller: ScrollController(),
      physics: ScrollPhysics(parent: PageScrollPhysics()),
      reverse: true,
      headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
        return <Widget>[
          SliverList(
            delegate: SliverChildListDelegate(
              [
                Container(height: 100, color: Colors.blue),
                Container(height: 100, color: Colors.red),
                Container(height: 100, color: Colors.yellow),
              ],
            ),
          ),
        ];
      },
      body: ListView.builder(
        physics: ClampingScrollPhysics(), // Use ClampingScrollPhysics to prevent over scroll, thus eliminating the spaces
        controller: ModalScrollController.of(context),
        itemBuilder: (context, index) {
          return Container(
            height: 100,
            color: index.isOdd ? Colors.green : Colors.orange,
          );
        },
        itemCount: 12,
      ),
    );