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") } 
Add a comment |
4 Answers
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") } 
answered Oct 19, 2020 at 18:21
4 Comments
Ali_Waris
What if my 'Start' Text is long enough that it reaches till 'End' Text. How to limit 'Start' width to be limited till 'End' starts
Gabriele Mariotti
@Ali_Waris In this case you can use
Arrangement.SpaceBetween applying a weight modifier to the first text.
NewPartizal
Why doesn't it work properly when I don't add fillmaxwidth?I was just wondering why
Gabriele Mariotti
@NewPartizal Because the
horizontalArrangement places children according to the available space.You can use this:
Row( modifier = Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.SpaceBetween ) { Text("Start") Text("End") } 
Comments
The possible horizontal arrangements are following. I added 3 elements for better clarity.
Row( modifier = Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.SpaceEvenly ) { TextButtons... } 
Row( modifier = Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.SpaceBetween ) { TextButtons... } 
Row( modifier = Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.SpaceAround ) { TextButtons... } 
1 Comment
Muhamed Riyas M
Also we can set custom space between with
horizontalArrangement = Arrangement.spacedBy(4.dp)Using Box can give spacing of exactly the amount of dp you specify.
Row { Text(text = "1") Box(modifier = Modifier.width(10.dp)) // gives horizontal spacing of 10 dp Text(text = "1") } Same goes for Column
Column { Text(text = "1") Box(modifier = Modifier.height(10.dp)) // gives vertical spacing of 10 dp Text(text = "1") } 