Small details that build taste in Flutter.

curated by Kamran BekirovKamran Bekirov

Close the sheet by swiping down at the top

When a sheet has a list inside, swiping down at the top should start closing it. Every native sheet works like this, and users expect it: no reaching for the close button at the top. Here's how it should work:

showModalBottomSheet doesn't do it, and probably your custom sheets don't either: a swipe on the list only scrolls. At the top it just stops, the sheet doesn't move. The sheet moves only when you drag a part that doesn't scroll.

Want this behavior? Use any route from stupid_simple_sheet: all of them do it out of the box, with great motion physics. While the list can scroll, the swipe scrolls it. When it hits the top, the same swipe starts pulling the sheet down:

Navigator.of(context).push(
  StupidSimpleSheetRoute(
    child: FiltersPage(),
  ),
);

Want to keep your own sheet? The handoff piece is its own package: scroll_drag_detector, by the same author. It gives you the combined gesture, but moving the sheet, the resistance, and the close-or-snap-back decision stay on you. stupid_simple_sheet's source is the working example to get inspired from.

One note:

Don't set a custom ScrollConfiguration on the sheet content. The package needs Flutter's default scroll behavior to catch the moment the list hits the top.

Kamran Bekirov
Kamran Bekirov

Want this level of care in your Flutter apps?

Work With Me