Is it possible to display a placeholder on the detail pane of a ListDetailPaneScaffold
when still no item from the list has been selected? I'm displaying a route in a map when an item is selected, and whould be preferable to display an empty map on the detail pane before any item has been selected. Displaying a white empty space seems not good. I can't find how to achieve this on docs.
ListDetailPaneScaffold(
modifier = Modifier.fillMaxSize(),
directive = navigator.scaffoldDirective,
value = navigator.scaffoldValue,
listPane = {
AnimatedPane(modifier = Modifier.fillMaxWidth(0.1f)) {
LinesList(
lines = uiState.lines,
selectedIndex = uiState.lines.indexOf(uiState.selectedLine),
onItemClick = { index ->
// Navigate to the detail pane with the passed item
navigator.navigateTo(ListDetailPaneScaffoldRole.Detail, index)
},
)
}
},
detailPane = {
AnimatedPane {
// Show the detail pane content if selected item is available
navigator.currentDestination?.content?.let { index ->
val selectedLine = uiState.lines[index]
vm.selectLine(selectedLine)
Map(selectedItem = uiState.selectedLine)
}
}
},
)
You already properly distinguish between a loaded entry and the unselected state by only applying the details content when navigator.currentDestination?.content
is not null.
You just need to add your placeholder in the case it is null:
navigator.currentDestination?.content?.let { index ->
// details of selected item
} ?: DetailsPlaceHolder()