How to set initial sizes / proportions of panes for ListDetailPaneScaffold?

Question

The default initial proportions for the the list-to-detail in the ListDetailPaneScaffold is about ~20% and 80%.

I'd like these to be 50% each, but can't figure out a way to set the initial proportions.

Does anyone know how to set these initial proportions?

Answer 1

You can use the modifier preferredWidth inside the pane lambdas of ListDetailPaneScaffold to adjust the pane width. You can only set a fixed dp value, though. Setting this to achieve exactly 50% will require some overhead to calculate.

Another solution is available with version 1.1.0 of the adaptive library. At the time of writing the newest version is 1.1.0-alpha08, so this may change at any time:

You can now pass a PaneExpansionState as the last parameter:

val paneExpansionState = rememberPaneExpansionState()

ListDetailPaneScaffold(
    ...
    paneExpansionState = paneExpansionState,
)

This new state allows you to set a relative width for the first pane:

paneExpansionState.setFirstPaneProportion(0.5f)

This will let the first pane take up half the space that is avaiable to all the panes in the scaffold. The rest will be distributed amongst the other panes. If you don't have an extra pane that will just be the detail pane, so both the first and the second pane will have the same width, each taking up exactly 50% of the available space.

When you use setFirstPaneProportion make sure you don't accidentally reset the width the user has specified using the drag handle, should you have enabled that.