This package contains a helper class to create a bottom sheet, which persists on the screen & can be dragged from there to cover the full screen.

Draggable Bottom Sheet gif

Example

DraggableBottomSheet(
    minExtent: 150,
    useSafeArea: false,
    curve: Curves.easeIn,
    previewWidget: _previewWidget(),
    expandedWidget: _expandedWidget(),
    backgroundWidget: _backgroundWidget(),
    duration: const Duration(milliseconds: 10),
    maxExtent: MediaQuery.of(context).size.height * 0.8,
    onDragging: (pos) {},
),

Arguments

ArgumentValueDescription
alignmentAlignmentAlignment of the sheet
backgroundWidgetWidgetWidget above which draggable sheet will be placed.
barrierColorColorColor of the modal barrier. Default Colors.black54
barrierDismissibleboolCollapse bottom sheet on tap. If false, sheet will act as persistent sheet. Default true.
collapsedboolWhether the sheet is collapsed initially. Default true.
curveCurveSheet expansion animation curve. Default Curves.linear
durationDurationDuration for sheet expansion animation. Default Duration(milliseconds: 0)
expandedWidgetWidgetWidget to show on expended sheet
expansionExtentdoubleIncrement on minExtent to change from previewWidget to expandedWidget
maxExtentdoubleMaximum extent for sheet expansion
minExtentdoubleMinimum extent for the sheet
onDraggingFunctionCallback function when sheet is being dragged
previewWidgetWidgetWidget to show on collapsed sheet
useSafeAreaboolShould dialog only display in 'safe' areas of the screen. Default true

Contributors

Misir JafarovJeroen Wolff

Libraries

draggable_bottom_sheet