25

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")
}
Gabriele Mariotti
  • 320,139
  • 94
  • 887
  • 841
ccd
  • 5,788
  • 10
  • 46
  • 96

3 Answers3

54

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

Gabriele Mariotti
  • 320,139
  • 94
  • 887
  • 841
14

You can use this:

Row(
    modifier = Modifier.fillMaxWidth(),
    horizontalArrangement = Arrangement.SpaceBetween
) {
    Text("Start")
    Text("End")
}
Saurabh Thorat
  • 18,131
  • 5
  • 53
  • 70
2

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

Ebin Joy
  • 2,690
  • 5
  • 26
  • 39