Spacer

A layout composable sized via its modifiers, creating a visual space between any surrounding components

View in Playground

Constructors

@Composable
fun Spacer(modifier: Modifier)
  • modifier – the modifier(s) to be applied to the Spacer instance
    • required

Examples

Creating a spacer

When creating a spacer we make use of its modifiers to declare the space that it should occupy. For example, we can create a spacer with a specified height using the preferredHeight modifier.

Spacer(modifier = Modifier.preferredHeight(16.dp))

This allows us to create specific spaces between different composables. For example, instead of using the Columns arrangement property we might want to provide individual spaces between the child composables:

Column(
    modifier = Modifier.fillMaxSize().padding(32.dp)
) {
    Text(
        text = "First item"
    )
    Spacer(modifier = Modifier.preferredHeight(16.dp))
    Text(
        text = "Second item"
    )
    Spacer(modifier = Modifier.preferredHeight(32.dp))
    Text(
        text = "Third item"
    )
}

Column