Can't swipe to dismiss scrollable Bottom Sheet

[cpboyd]

Per @dnfield #31739 (comment)

Use case

See the Crane Material sample and Google I/O 2019

These both feature a bottom sheet that slides up (in the case of I/O, you select "Events" and the hit the "Filter" FAB) and scrolls.

With the I/O app, if you continue to swipe down when scrolled to the top, it will start to drag and then dismiss when a threshold is reached.

If the threshold is not reached (or you swipe upwards) then the bottom sheet will not be dismissed and it'll rebound to the top of the screen.

Proposal

I'd think this should be a part of DraggableScrollableSheet as mentioned in #31739, but maybe it makes sense to bake the logic into the Bottom Sheet itself?

I've tried both modal and non-modal bottom sheets with and without the DraggableScrollableSheet, and can't seem to make this work as is.

The current issue with the DraggableScrollableSheet is that you can't have the sheet be maximized all the time. (Since, as I mentioned in #31739 (comment), any swipe will immediately dismiss the BottomSheet rather than scroll the CustomScrollView)

[dnfield]

It would be super helpful if you had a gif/youtube/video of this behavior. I think I know what you're talking about, but I haven't used the apps you're referring to and I'm not sure which part to look for.

[cpboyd]

@dnfield See https://www.youtube.com/watch?v=95MUkecOta4

I wasn't able to get it to "rebound" while recording, but I'm pretty sure I've seen it bounce back to the top if a certain threshold isn't met.

Edit: First dismiss is dragging from the app bar. Second dismiss is from dragging the list after reaching the top (similar behavior to DraggableScrollableSheet). I had to release (after reaching the top of the list) and then drag down again.

[dnfield]

I thought the bottom sheet was working this way - the first time you hit the top of the list it will bounce, the second time it will actually drag down. I feel like I'm missing something in the desired behavior though.

[cpboyd]

@dnfield I've tried both

        _scaffoldKey.currentState.showBottomSheet(
          _buildBottomSheet,
        );

and

        showModalBottomSheet(
          context: context,
          builder: _buildBottomSheet,
          isScrollControlled: true,
        );

where _buildBottomSheet is a Widget Function(BuildContext) that contains a CustomScrollView.

Nothing seems to do the drag-to-dismiss except when wrapped in a DraggableScrollableSheet.

Do I need to pass in a special ScrollController?

[dnfield]

You have to use a DraggableScrollableSheet for that behavior to work.

[cpboyd]

@dnfield Ok. So how do I get the DraggableScrollableSheet to rebound back to maxChildSize unless the minChildSize threshold is passed?

I'm currently using this:

DraggableScrollableSheet(
      builder: scroll,
      initialChildSize: 1.0,
      minChildSize: 0.9,
    );

Unfortunately, the user can wind up with it sticking between 1.0 and 0.9, which looks a little awkward.

[dnfield]

Unfortunately this isn't really documented well at all, and in trying to do it I'm finding some other bugs.

I think this should be possible, but it may take me a little while to get back to it. If you have a proposal for fixing it we could review a PR for it as well.

[rbluethl]

Are there any updates on this?