Where to open modal Bottom Sheet in Jetpack Compose?

In my Android app, I am using Google Maps and displaying markers on the map. When a user clicks on one of the markers, I want to open a modal Bottom Sheet to display marker details.
Where should I implement sheet code, in top most composable or in marker composable which displays a marker?

What is the best way to open the Modal Sheet quickly?

here is what I am currently doing:

    @OptIn(ExperimentalMaterial3Api::class)
@Composable
fun A() {
    // Sheet state should be handled at the highest relevant level
    val sheetState = rememberModalBottomSheetState(
        skipPartiallyExpanded = false
    )
    var showBottomSheet by remember { mutableStateOf(false) }
    var selectedMarker by remember { mutableStateOf<MarkerData?>(null) }
    
    // Handler to be passed down
    val onMarkerClick: (MarkerData) -> Unit = { markerData ->
        selectedMarker = markerData
        showBottomSheet = true
    }

    // Main content
    Box(modifier = Modifier.fillMaxSize()) {
        Maps(onMarkerClick = onMarkerClick)
        
        // BottomSheet
        if (showBottomSheet) {
            ModalBottomSheet(
                onDismissRequest = { 
                    showBottomSheet = false
                    selectedMarker = null 
                },
                sheetState = sheetState
            ) {
                // Sheet content
                MarkerDetailContent(
                    markerData = selectedMarker,
                    onDismiss = { 
                        showBottomSheet = false
                        selectedMarker = null 
                    }
                )
            }
        }
    }
}

@Composable
fun Maps(
    onMarkerClick: (MarkerData) -> Unit
) {
    // Map implementation
    GoogleMap(
        modifier = Modifier.fillMaxSize(),
        properties = MapProperties(/*...*/)
    ) {
        Markers(onMarkerClick = onMarkerClick)
    }
}

@Composable
fun Markers(
    onMarkerClick: (MarkerData) -> Unit
) {
    // Marker data (could come from ViewModel)
    val markers = remember { /* Your markers data */ }
    
    markers.forEach { markerData ->
        Marker(
            state = rememberMarkerState(
                position = markerData.position
            ),
            onClick = {
                onMarkerClick(markerData)
                true // consume the event
            }
        )
    }
}

@Composable
fun MarkerDetailContent(
    markerData: MarkerData?,
    onDismiss: () -> Unit
) {
    Column(
        modifier = Modifier
            .fillMaxWidth()
            .padding(16.dp)
    ) {
        Text(
            text = "Marker Details",
            style = MaterialTheme.typography.headlineSmall,
            modifier = Modifier.padding(bottom = 16.dp)
        )
        
        markerData?.let {
            Text("Title: ${it.title}")
            Text("Position: ${it.position}")
            // Add more marker details
        }
        
        Spacer(modifier = Modifier.height(16.dp))
        
        Button(
            onClick = onDismiss,
            modifier = Modifier.fillMaxWidth()
        ) {
            Text("Close")
        }
    }
}

// Data class for markers
data class MarkerData(
    val id: String,
    val title: String,
    val position: LatLng,
    // Add other marker properties
)

You need to sign in to view this answers

Related Post