mcrovero/rubber

https://github.com/mcrovero/rubber/raw/master/assets/rubber-logo-nopadding.jpg Awesome Flutter

An elastic material bottom sheet implementation for Flutter.

Requires Flutter 3.44 or later and Dart 3.12 or later.

This is still an early preview, some behaviors can change or being removed. Every feedback, bug report or feature request is welcome, please send it at the issue tracker

Follow the Quick Start to add it to your project. Is also available the complete example in the repository to preview the library on your device.

Common interaction options can be configured directly on the sheet:

RubberBottomSheet(
  animationController: controller,
  lowerLayer: const MyBackground(),
  upperLayer: const MySheetContent(),
  draggable: true,
  snapThreshold: 0.4,
  minFlingVelocity: 700,
  completeFlingVelocity: 5000,
  scrimColor: Colors.black54,
  onScrimTap: controller.collapse,
);

Use strict bounds when the elastic overscroll effect is not appropriate:

final controller = RubberAnimationController(
  vsync: this,
  duration: const Duration(milliseconds: 250),
  boundsBehavior: RubberAnimationBoundsBehavior.strict,
);

Use controller.addListener(...) to observe the position continuously. Status listeners report direction and boundary transitions (forward, reverse, completed, and dismissed). Pixel bounds are automatically recalculated after size and orientation changes.

https://github.com/mcrovero/rubber/raw/master/assets/video1.gif

https://github.com/mcrovero/rubber/raw/master/assets/scroll1.gif