Skip to content

You are here: BottomSheet Widget

BottomSheet Widget

A bottom sheet is a window that slides up from the bottom edge of the screen. It is used to reveal additional content and options to users. If required, users can show and dismiss the BottomSheet widget.

This widget is available for the iOS and Android platforms only and can be created only through code. The following Gradle Entry needs to be made in order to access the BottomSheet widget.

dependencies {
   implementation 'com.google.android.material:material:1.0.0'
}  

Following are the key use cases of Bottom Sheet widget:

  • To provide visually richer options menu. For example: when we want to share an image through an application, a BottomSheet widget can be used to show the various applications that can be used for sharing.

  • To display more data or information. For example: In a map widget, when we click on a pin, you can use a BottomSheet widget to display more information about the location.

  • Can be used instead of dialog boxes. For example: while exiting an app, a BottomSheet can be used to ask for confirmation.

The BottomSheet widget capabilities can be broadly categorized into the following:

BottomSheet State

Properties Description
skipCollapsed If this property is set to true, a BottomSheet directly goes from an Expanded state to a Dismissed one in Android platform.
Methods Description
setState Sets the state of a BottomSheet widget as Expanded or Collapsed in Android platform.
setDetentIdentifier Used to set or change selected detent in iOS platform.
Events Description
onCollapsed Called when you need to collapse a BottomSheet from its peek height.
onExpanded Called when a BottomSheet reaches its fully expanded state.
onDraggingStarted Called when you need to start dragging a BottomSheet to an Expanded or Collapsed state in Android platform.

Miscellaneous

Properties Description
backgroundTransparency Indicates to users that the UI control is currently restricted for a BottomSheet until it is dismissed, i.e., dragged down completely in Android platform.
contentWidget Sets the template of a BottomSheet.
peekHeight The height at which a collapsed BottomSheet docks in Android platform.
detents Array of different height at which collapsed BottomSheet docks in iOS platform.
selectedDetentIdentifier Default height that the user set programmatically to show BottomSheet in iOS platform.
prefersGrabberVisible A Boolean value that determines whether the sheet shows a grabber at the top in iOS platform.
preferredCornerRadius The corner radius that the sheet attempts to present with in iOS platform.
prefersEdgeAttachedInCompactHeight A Boolean value that determines whether the sheet attaches to the bottom edge of the screen in a compact-height size class in iOS platform.
widthFollowsPreferredContentSizeWhenEdgeAttached A Boolean value that determines whether the sheet’s width matches its view controller’s preferred content size when edge attached in iOS platform.
largestUndimmedDetentIdentifier The largest detent that doesn’t dim the view underneath the sheet in iOS platform.
Methods Description
destroy Ensures that the garbage collection process of a BottomSheet occurs, and the data of the BottomSheet is wiped out.
dismiss Dismisses a BottomSheet widget for users.
show Displays a BottomSheet widget for users.
Events Description
onDismiss Called when you need to dismiss a BottomSheet from the screen.
onShow Called when you need a BottomSheet to be displayed on the screen.
onSettled Called when a BottomSheet is at peek height, is expanded, or is dismissed in Android platform.
onSliding Called when a BottomSheet slides in/out of view in Android platform.
didChangeSelectedDetentIdentifier This event is called when detent value changes for BottomSheet in iOS platform.