BottomSheetScaffold
fun BottomSheetScaffold(sheetContent: @Composable BoxScope.() -> Unit, modifier: Modifier = Modifier, sheetPeekHeight: Dp = BottomSheetDefaults.SheetPeekHeight, scaffoldState: BottomSheetScaffoldState = rememberBottomSheetScaffoldState(), sheetSwipeEnabled: Boolean = true, sheetDragHandle: @Composable () -> Unit? = { DragHandle() }, topBar: @Composable () -> Unit? = null, snackbarHost: @Composable (SnackbarHostState) -> Unit = {
androidx.compose.material3.SnackbarHost(it)
}, content: @Composable (PaddingValues) -> Unit)
BottomSheetScaffold is a composable that implements a scaffold with a bottom sheet. It is a wrapper around androidx.compose.material3.BottomSheetScaffold. It provides a way to display a bottom sheet that can be swiped up and down. The scaffold can have a top bar, a screen content, a bottom sheet content, and a drag handle. The scaffold can also have a snackbar host.
Parameters
sheetContent
The content of the bottom sheet.
modifier
The modifier to apply to this layout.
scaffoldState
The state of the scaffold.
showHandle
Whether to show the drag handle.
sheetContentTopPadding
The top padding of the sheet content.
screenContentPadding
The padding of the screen content.
sheetSwipeEnabled
Whether the sheet can be swiped.
topBar
The top bar composable.
snackbarHost
The snackbar host composable.
content
The content of the screen.
Samples
import androidx.compose.foundation.ExperimentalFoundationApi
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.BoxScope
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.material3.BottomSheetDefaults
import androidx.compose.material3.BottomSheetScaffoldState
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.rememberBottomSheetScaffoldState
import androidx.compose.material3.rememberStandardBottomSheetState
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment.Companion.TopCenter
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp
import com.adevinta.spark.PreviewTheme
import com.adevinta.spark.components.bottomsheet.DragHandle
import com.adevinta.spark.components.bottomsheet.SheetDefaults.ContentTopPadding
import com.adevinta.spark.components.bottomsheet.SheetDefaults.ContentTopPaddingNoHandle
import com.adevinta.spark.components.icons.Icon
import com.adevinta.spark.components.list.ListItem
import com.adevinta.spark.components.text.Text
import com.adevinta.spark.icons.LikeFill
import com.adevinta.spark.icons.SparkIcons
import com.adevinta.spark.tools.modifiers.sparkUsageOverlay
fun main() {
//sampleStart
PreviewTheme(padding = PaddingValues()) {
BottomSheetScaffold(
sheetContent = {
Box(
modifier = Modifier
.fillMaxWidth()
.height(700.dp),
) {
Text(
modifier = Modifier.align(TopCenter),
text = "Sheet Content",
)
}
},
modifier = Modifier.fillMaxSize(),
scaffoldState = rememberBottomSheetScaffoldState(
bottomSheetState = rememberStandardBottomSheetState(),
),
) {
LazyColumn {
stickyHeader {
Row(
Modifier
.fillMaxWidth()
.background(Color.Green),
horizontalArrangement = Arrangement.Center,
) {
Text(
text = "Screen Content",
)
}
}
items(50) {
ListItem(
headlineContent = { Text("Item $it") },
leadingContent = {
Icon(
SparkIcons.LikeFill,
contentDescription = "Localized description",
)
},
)
}
}
}
}
//sampleEnd
}