🎉 Try it out! Every sample is now interactive and ready to play with.

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

Copyright © Noman R