Rich bottom sheet component for building responsive UIs. Features peek support, customizable animations, interceptable states, keyboard handling, Material design compatibility, and window control properties.
Another feature-rich bottom sheet for Compose Multiplatform. The following targets are supported.
Why this is needed when we already have ModalBottomSheetLayout and ModalBottomSheet? See the Comparisons table.
BottomSheet(
state = state,
// PeekHeight.px(Int) and PeekHeight.fraction(Float) are supported as well.
peekHeight = PeekHeight.dp(300),
// Set to true to the peeked state, default to false.
skipPeeked = false,
) { ...}
// Animation off
state.expand(animated = false)
// Default
state.expand(animationSpec = spring())
// Slow animation
state.expand(animationSpec = tween(durationMillis = 2000))
val state = rememberBottomSheetState(
confirmValueChange = {
if (it == BottomSheetValue.Collapsed) {
// Intercept logic
} else {
true
}
},
)
May be useful when the bottom sheet contains some text fields.
Please note after setting this, your sheet content be squashed if the bottom sheet is too long, so make your content scrollable by default.
BottomSheet(
state = state,
showAboveKeyboard = true,
) {
TextFieldSheetContent(
modifier = Modifier.verticalScroll(rememberScrollState()),
)
}
Migration is simple, just change the imports.
// Material 2:
import com.dokar.sheets.BottomSheet
// Material 3:
import com.dokar.sheets.m3.BottomSheet
System bar colors and some dialog window properties can be customized by the behaviors parameter.
BottomSheet(
...
behaviors = BottomSheetDefaults.dialogSheetBehaviors(
dialogSecurePolicy = SecureFlagPolicy.Inherit,
dialogWindowSoftInputMode = WindowManager.LayoutParams.SOFT_INPUT_STATE_UNSPECIFIED,
lightStatusBar = false,
lightNavigationBar = false,
statusBarColor = Color.Transparent,
navigationBarColor: Color = Color.Black,
),
) { ... }
To embed the sheet in the current layout hierarchy, use the BottomSheetLayout():
Box {
MainContent()
val state = rememberBottomSheetState()
if (state.visible) {
BottomSheetLayout(state = state) {
...
}
}
}
It's useful when syncing some transitions with the drag gesture.
fun Modifier.: Modifier = graphicsLayer {
progress = (state.dragProgress - ) /
(progress <= ) {
}
scale = - * progress
scaleX = scale
scaleY = scale
statusBarHeight = statusBarInsets.getTop()
scaledTopSpacing = size.height * /
translationY = progress * (statusBarHeight +
dp.toPx() - scaledTopSpacing)
clip =
shape = RoundedCornerShape(progress * dp)
}
implementation("io.github.dokar3:sheets:latest_version")
implementation("io.github.dokar3:sheets-m3:latest_version")
Compose Material is still evolving, so this table may no longer be accurate after some versions.
Need some features? Found a bug?
Open an issue, or just create a pull request if you want! This project is open for contributions.
Copyright 2022 dokar3
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http:
Unless applicable law agreed to writing, software
distributed under the License distributed an BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express implied.
See the License the specific language governing permissions
limitations under the License.
| Feature\Component | sheets | ModalBottomSheet | ModalBottomSheetLayout |
|---|
| Material 2 | ✅ | ❌ | ✅ |
| Material 3 | ✅ | ✅ | ❌ |
| Embedded | ✅ | ❌ | ✅ |
| In modal (Dialog) | ✅ | ✅ | ❌ |
| Dialog properties | ✅ | ❌ | / |
| Drag handle | ✅ | ✅ | ❌ |
| Half expanded (Peeked) | ✅ | ✅ | ✅ |
| Peek height | ✅ | ❌ | ❌ |
| Custom animation spec | ✅ | ❌ | ✅ |
| Drag progress | ✅ | ❌ | ✅ |
| confirmValueChange | ✅ | ✅ | ✅ |
| Dim color (scrim) | ✅ | ✅ | ✅ |
Surfaced from shared tags and platforms — no rankings paid for.