Remove padding of ListDetailPaneScaffold

Question

How do I remove the padding created by ListDetailPaneScaffold?

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.material3.VerticalDivider
import androidx.compose.material3.adaptive.AnimatedPane
import androidx.compose.material3.adaptive.ExperimentalMaterial3AdaptiveApi
import androidx.compose.material3.adaptive.ListDetailPaneScaffold
import androidx.compose.material3.adaptive.ListDetailPaneScaffoldRole
import androidx.compose.material3.adaptive.rememberListDetailPaneScaffoldNavigator
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

@ExperimentalMaterial3Api
class MainActivity : ComponentActivity() {
    @OptIn(ExperimentalMaterial3AdaptiveApi::class)
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContent {
            val scaffoldNavigator = rememberListDetailPaneScaffoldNavigator()
            ListDetailPaneScaffold(
                scaffoldState = scaffoldNavigator.scaffoldState,
                listPane = {
                    AnimatedPane(
                        modifier = Modifier.fillMaxSize()
                    ) {
                        Surface(
                            color = MaterialTheme.colorScheme.secondary,
                            onClick = {
                                scaffoldNavigator.navigateTo(ListDetailPaneScaffoldRole.Detail)
                            }
                        ) {
                            Text("List")
                        }
                    }
                },
                extraPane = {
                    AnimatedPane(
                        modifier = Modifier.fillMaxSize()
                    ) {
                        Surface(
                            modifier = Modifier.fillMaxSize(),
                            color = MaterialTheme.colorScheme.tertiary,
                            onClick = {
                                scaffoldNavigator.navigateBack()
                            }
                        ) {
                            Text("Extra")
                        }
                    }
                }
            ) {
                AnimatedPane(
                    modifier = Modifier
                ) {
                    Surface(
                        color = MaterialTheme.colorScheme.primary,
                    ) {
                        Column(verticalArrangement = Arrangement.spacedBy(16.dp)) {
                            Text("Detail")
                            Row(
                                modifier = Modifier
                                    .fillMaxWidth()
                                    .padding(horizontal = 4.dp),
                                horizontalArrangement = Arrangement.spacedBy(8.dp)
                            ) {
                                Surface(
                                    onClick = {
                                        scaffoldNavigator.navigateBack()
                                    },
                                    modifier = Modifier
                                        .weight(0.5f)
                                        .fillMaxHeight(),
                                    color = MaterialTheme.colorScheme.primary.copy(alpha = 0.8f)
                                ) {
                                    Box(
                                        modifier = Modifier.fillMaxSize(),
                                        contentAlignment = Alignment.Center
                                    ) {
                                        Text("Previous")
                                    }
                                }
                                VerticalDivider()
                                Surface(
                                    onClick = {
                                        scaffoldNavigator.navigateTo(ListDetailPaneScaffoldRole.Extra)
                                    },
                                    modifier = Modifier
                                        .weight(0.5f)
                                        .fillMaxHeight(),
                                    color = MaterialTheme.colorScheme.primary.copy(alpha = 0.6f)
                                ) {
                                    Box(
                                        modifier = Modifier.fillMaxSize(),
                                        contentAlignment = Alignment.Center
                                    ) {
                                        Text("Next")
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

Answer 1

I've solved it by copying the scaffoldDirective from the device and setting the padding values to 0:

val systemDirective = calculateDensePaneScaffoldDirective(currentWindowAdaptiveInfo())
val customDirective = PaneScaffoldDirective(
    contentPadding = PaddingValues(0.dp),
    maxHorizontalPartitions = systemDirective.maxHorizontalPartitions,
    horizontalPartitionSpacerSize = 0.dp,
    maxVerticalPartitions = systemDirective.maxVerticalPartitions,
    verticalPartitionSpacerSize = systemDirective.verticalPartitionSpacerSize,
    excludedBounds = systemDirective.excludedBounds
)

val scaffoldNavigator =
    rememberListDetailPaneScaffoldNavigator<Nothing>(customDirective)