How to set Spacer between with two elements in a row

42.5k views Asked by At

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")
}
3

There are 3 answers

4
Gabriele Mariotti On BEST ANSWER

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

0
Saurabh Thorat On

You can use this:

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

The possible horizontal arrangements are following. I added 3 elements for better clarity.

Row(
    modifier = Modifier.fillMaxWidth(),
    horizontalArrangement = Arrangement.SpaceEvenly
) {
    TextButtons...
  }

Space evenly

Row(
    modifier = Modifier.fillMaxWidth(),
    horizontalArrangement = Arrangement.SpaceBetween
) {
    TextButtons...
  }

Space Between

Row(
    modifier = Modifier.fillMaxWidth(),
    horizontalArrangement = Arrangement.SpaceAround
) {
    TextButtons...
  }

enter image description here