androidkotlinandroid-jetpack-composeandroid-jetpack-compose-material3foldable

compose list-detail not visible in portrait mode using ListDetailPaneScaffold


I am expecting the list-details view when the orientation is portrait in Foldable Phones but it shows a list only like in phones, Currently it only works when we rotate the device to landscape mode

ListDetailPaneScaffold Implementations:

        setContent {
            val uiState by viewModel.uiState.collectAsStateWithLifecycle()
            AppMaterial3Theme {
                var selectedItem: SettingDetailsScreen by rememberSaveable {
                    mutableStateOf(SettingDetailsScreen.AccountDetails)
                }
                val navigator = rememberListDetailPaneScaffoldNavigator()
                ListDetailPaneScaffold(
                    scaffoldState = navigator.scaffoldState,
                    listPane = {
                        BackHandler {
                            if (paneAdaptedValue == PaneAdaptedValue.Hidden) {
                                navigator.navigateBack()
                            } else {
                                finish()
                            }
                        }
                        SettingsEntryPointsScreen(
                            uiState = uiState
                        ) { item ->
                            selectedItem = item.detailScreen
                            navigator.navigateTo(ListDetailPaneScaffoldRole.Detail)
                        }
                    },
                    detailPane = {
                        if (uiState is SettingsEntryPointUiState.SettingsDetails) {
                            SettingDetailContent { container ->
                                updateDetailFragment(
                                    selectedItem,
                                    container
                                )
                            }
                        }
                    }
                )
            }

Using the example from official doc -> Here

The expected result should be like this[Samsung's Setting App] :

enter image description here


Solution

  • Inspired by the answer from @Sevban Bayır, I learned that we can use different adaptive window calculations

       val navigator = rememberListDetailPaneScaffoldNavigator(
                    scaffoldDirective = calculateDensePaneScaffoldDirective(
                        currentWindowAdaptiveInfo()
                    )
                )
    

    Which resolved the requirement, of course, you can customize it according to your need