androidandroid-jetpack-composeandroid-jetpack-compose-layout

How to set Spacer between with two elements in a row


How to use Spacer filling between with two elements in a row, let one element at the start of row and another at the end?

Row {
    Text("Start")
    Spacer(modifier = Modifier.SpaceBetween)  // How to set the modifier
    Text("End")
}

Solution

  • The Modifier.SpaceBetween doesn't exist.

    You can use the horizontalArrangement parameter in the Row applying theArrangement.SpaceBetween.This parameter places children such that they are spaced evenly across the main axis, without free space before the first child or after the last child.

    Row( modifier = Modifier.fillMaxWidth(),
            horizontalArrangement = Arrangement.SpaceBetween
        ) {
        Text("Start")
        Text("End")
    }
    

    As alternative you can apply the weight(1f) to the Spacer.
    Something like:

    Row (modifier = Modifier.fillMaxWidth()) {
        Text("Start")
        Spacer(Modifier.weight(1f))
        Text("End")
    }
    

    enter image description here