FlexibleBottomSheet
š¬ Advanced Compose Multiplatform bottom sheet for segmented sizing, non-modal type, and allows interaction behind the bottom sheet similar to Google Maps.
Install / Use
/learn @skydoves/FlexibleBottomSheetREADME
Download
Gradle
Add the dependency below to your module's build.gradle file:
dependencies {
// compose material
implementation("com.github.skydoves:flexible-bottomsheet-material:0.2.0")
// compose material3
implementation("com.github.skydoves:flexible-bottomsheet-material3:0.2.0")
}
For Kotlin Multiplatform, add the dependency below to your module's build.gradle.kts file:
sourceSets {
val commonMain by getting {
dependencies {
// compose material
implementation("com.github.skydoves:flexible-bottomsheet-material:$version")
// compose material3
implementation("com.github.skydoves:flexible-bottomsheet-material3:$version")
}
}
}
Usage
You can implement a flexible bottom sheet with FlexibleBottomSheet, similar to the ModalBottomSheet provided by Compose Material 3. Essentially, you can achieve the same behavior as ModalBottomSheet by not altering any properties.
FlexibleBottomSheet
<img src="previews/preview3.gif" width="280px" align="right">This is a basic example of the FlexibleBottomSheet, which is modal, allowing customized sheet sizes for each expanded status, and offers three different expanded statuses (fully, intermediately, slightly):
FlexibleBottomSheet(
onDismissRequest = onDismissRequest,
sheetState = rememberFlexibleBottomSheetState(
flexibleSheetSize = FlexibleSheetSize(
fullyExpanded = 0.9f,
intermediatelyExpanded = 0.5f,
slightlyExpanded = 0.15f,
),
isModal = true,
skipSlightlyExpanded = false,
),
containerColor = Color.Black,
) {
Text(
modifier = Modifier
.fillMaxWidth()
.padding(8.dp),
text = "This is Flexible Bottom Sheet",
textAlign = TextAlign.Center,
color = Color.White,
)
}
FlexibleBottomSheetState
FlexibleBottomSheetState is a crucial concept that must be bound to FlexibleBottomSheet to manage its state changes. It also enables you to customize UI/UX behaviors for the bottom sheet and take manual control over expanding/hiding the bottom sheet. You can remember the FlexibleBottomSheetState by using rememberFlexibleBottomSheetState as demonstrated in the example below:
FlexibleBottomSheet(
onDismissRequest = onDismissRequest,
sheetState = rememberFlexibleBottomSheetState(
skipSlightlyExpanded = false,
skipIntermediatelyExpanded = false,
isModal = true,
allowNestedScroll = true,
flexibleSheetSize = FlexibleSheetSize(
fullyExpanded = 1.0f,
intermediatelyExpanded = 0.5f,
slightlyExpanded = 0.25f
)
),
) {
..
}
You can expand or hide the bottom sheet manually by utilizing the FlexibleBottomSheetState like the code below:
val scope = rememberCoroutineScope()
val sheetState = rememberFlexibleBottomSheetState(
flexibleSheetSize = FlexibleSheetSize(fullyExpanded = 0.9f),
isModal = true,
skipSlightlyExpanded = false,
)
FlexibleBottomSheet(
sheetState = sheetState,
containerColor = Color.Black,
onDismissRequest = onDismissRequest
) {
Button(
modifier = Modifier.align(Alignment.CenterHorizontally),
onClick = {
scope.launch {
when (sheetState.swipeableState.currentValue) {
FlexibleSheetValue.SlightlyExpanded -> sheetState.intermediatelyExpand()
FlexibleSheetValue.IntermediatelyExpanded -> sheetState.fullyExpand()
else -> sheetState.hide()
}
}
},
) {
Text(text = "Expand Or Hide")
}
}
BottomSheet Expanded Status
The flexible bottom sheet offers four primary sheet statuses known as FlexibleValues:
- Fully Expanded: The sheet is visible at its fully-expanded height. This is mandatory and cannot be skipped.
- Intermediately Expanded: The sheet is visible at an intermediate expanded height. This can be skipped by setting
skipIntermediatelyExpandedtotrue. - Slightly Expanded: The sheet is visible at a slightly expanded height. This is skipped by default but can be enabled by setting
skipSlightlyExpandedtofalse. - Hidden: The sheet is completely not visible on the screen. If you never want to dismiss and keep displaying the bottom sheet, you can give
skipHiddenStatetotrue.
You have the option to skip the Intermediately Expanded and Slightly Expanded states, as demonstrated below:
FlexibleBottomSheet(
onDismissRequest = onDismissRequest,
sheetState = rememberFlexibleBottomSheetState(
skipSlightlyExpanded = false,
skipIntermediatelyExpanded = false
),
) {
..
}
Initial Value
You can specify the initial expanded state when the bottom sheet first appears by using the initialValue parameter. This allows you to start the sheet at a specific state (e.g., FullyExpanded, IntermediatelyExpanded, or SlightlyExpanded) without animation:
FlexibleBottomSheet(
onDismissRequest = onDismissRequest,
sheetState = rememberFlexibleBottomSheetState(
initialValue = FlexibleSheetValue.FullyExpanded,
skipSlightlyExpanded = false,
),
) {
..
}
Note: The
initialValuemust be compatible with the skip settings. For example, ifskipSlightlyExpanded = true, you cannot setinitialValue = FlexibleSheetValue.SlightlyExpanded.
Expanded Sizes
FlexibleBottomSheet offers you to customize the expanded size the content size of bottom sheet based on its states. These constraints are calculated by multiplying the ratio with the maximum display height excluding the systembars (status and navigation bars). You can simply customize the expanded sheet size by setting FlexibleSheetSize to the rememberFlexibleBottomSheetState like the code below:
FlexibleBottomSheet(
onDismissRequest = onDismissRequest,
sheetState = rememberFlexibleBottomSheetState(
flexibleSheetSize = FlexibleSheetSize(
fullyExpanded = 0.85f,
intermediatelyExpanded = 0.45f,
slightlyExpanded = 0.15f,
),
)
) {
..
}
Fully (0.85) | Intermediately (0.45) | Slightly (0.15) | | :---------------: | :---------------: | :---------------: | | <img src="previews/preview5.png" align="center" width="320px" height ="480px"/> | <img src="previews/preview6.png" align="center" width="320px" height ="480px"/> | <img src="previews/preview7.png" align="center" width="320px" height ="480px"/> |
Wrap Content Size
Instead of using fixed ratios, you can make the bottom sheet size itself based on its content height by using FlexibleSheetSize.WrapContent. This is useful when you want the sheet to automatically fit its content:
FlexibleBottomSheet(
onDismissRequest = onDismissRequest,
sheetState = rememberFlexibleBottomSheetState(
flexibleSheetSize = FlexibleSheetSize(
fullyExpanded = FlexibleSheetSize.WrapContent,
intermediatelyExpanded = 0.5f,
slightlyExpanded = 0.15f,
),
)
) {
// The sheet will wrap this content when fully expanded
Column {
Text("Item 1")
Text("Item 2")
Text("Item 3")
}
}
You can use WrapContent for any of the expanded states. When the content is smaller than the screen, the sheet will size itself to fit the content. When the content is larger, it will be constrained to the screen height.
Non-Modal BottomSheet
<p align="center"> <img src="previews/preview0.png" width="270"/> <img src="previews/preview1.png" width="270"/> <img src="previews/preview2.png" width="270"/> </p>If you need to interact outside of the bottom sheet while the sheet is displayed on the screen, similar to the Google Maps style, you can easily achieve this by setting the isModal as false property for the FlexibleBottomSheet composable, as shown below:
FlexibleBottomSheet(
onDismissRequest = onDismissRequest,
sheetState = rememberFlexibleBottomSheetState(
isModal = false,
skipSlightlyExpanded = false,
),
) {
..
}
You will see the result below:
<img src="previews/preview10.gif" width="320px">Dynamic Content By Monitoring Value Changes
You can dynamically compose your bottom sheet content by tracking the bottom sheet state changes. The sample code below demonstrates how you can easily obser
