Modal Bottom Sheet

Modal Bottom Sheet

A modal dialog that slides up from the bottom of the screen.


Installation

Modal Bottom Sheet uses the bottom sheet implementation from the composables library.

💡
Components with complex implementation are provided via the composables library.
dependencies {
    api("com.nomanr:composables:$version")
}

Then add the component:

./gradlew lumo --add ModalBottomSheet

Usage

Basic Bottom Sheet

var isVisible by remember { mutableStateOf(false) }
 
ModalBottomSheet(
    isVisible = isVisible,
    onDismissRequest = { isVisible = false }
) {
    Column(modifier = Modifier.padding(16.dp)) {
        Text("Bottom Sheet Content")
    }
}

Custom Bottom Sheet

val sheetState = rememberModalBottomSheetState()
 
ModalBottomSheet(
    sheetState = sheetState,
    isVisible = isVisible,
    onDismissRequest = { isVisible = false },
    sheetGesturesEnabled = true,
    dragHandle = {
        Box(
            modifier = Modifier
                .padding(12.dp)
                .background(color = Color.Unspecified)
        ) {
            Spacer(
                Modifier
                    .size(width = 36.dp, height = 6.dp)
                    .background(
                        color = AppTheme.colors.secondary,
                        shape = RoundedCornerShape(50)
                    )
            )
        }
    }
) {
    // Sheet content
}

API Documentation

Parameters

ParameterTypeDescription
sheetStateSheetStateState of the bottom sheet
isVisibleBooleanWhether the sheet is visible
onDismissRequest() -> UnitCallback when sheet is dismissed
sheetGesturesEnabledBooleanWhether gestures are enabled
dragHandle@Composable (() -> Unit)?Optional custom drag handle
content@Composable ColumnScope.() -> UnitContent to display in the sheet