androidkotlinandroid-jetpack-composeandroid-jetpack-compose-scaffold

Detail placeholder in ListDetailPaneScaffold?


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)
            }
        }
    },
)

Solution

  • 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()