A modern programming language that makes developers happier.

kotlinlang

Hi, why `Spacer` is not working in simple function?

```Column(
            modifier = Modifier
                .padding(10.dp)
                .fillMaxSize()
                .verticalScroll(rememberScrollState()),
            horizontalAlignment = Alignment.CenterHorizontally,
            verticalArrangement = Arrangement.SpaceBetween
        ) {
            PairScreenImage()
            PairDeviceDescription()
            if (viewModel.isBluetoothEnabled) {
                PressAndHoldDescription()
                WaitingToPair(scanning.value)
                UnableToPair(scanning.value)
            } 
        }```
*WaitingToPair*
```@Composable
fun WaitingToPair(scanning: Boolean) {
    AnimatedVisibility(scanning) {
        Spacer(modifier = Modifier.height(10.dp))
        Row(
            modifier = Modifier
                .fillMaxWidth()
                .background(OffWhite),
            horizontalArrangement = Arrangement.Center,
            verticalAlignment = Alignment.CenterVertically
        ) {
          .... // more item
          }
    }
}```
*UnableToPair*
```@Composable
fun UnableToPair(scanning: Boolean) {
    AnimatedVisibility(!scanning) {
        Spacer(modifier = Modifier.height(10.dp)
        .... // more item
    }
}```
Space is not working properly between views in function. Any reason behind this?

Probably the Spacer is behind the row (or viceversa)

You can confirm that if you wrap the Spacer and the Row inside a Column in WaitingToPair

Yes it working fine if I wrap `Row`  and `Spacer` inside `Column` in `WaitingToPair` function.

But it will duplicate the `Column` in main function and `WaitingToPair` function

I have so many small function where I want to use `Spacer`

It's because it's inside `AnimatedVisibility`. You can do something like:
```@Composable
fun ColumnScope.WaitingToPair(...) {
    AnimatedVisibility(scanning) {
        ...
    }
}```

`AnimatedVisibility` has special versions for `ColumnScope` and `RowScope`, but you're putting it inside a function without that scope

Sorry for all of the edits, I can't type today, apparently.

In your above example where should I use `Spacer` ? inside `ColumnScope.WaitingToPair` or `AnimatedVisibility(scanning)`  ?

`AnimatedVisibility`  uses `Layout` to _stack_ all the children. The `ColumnScope` and `RowScope` extension funs are only helping setting the default enter/exit transition that makes sense in the context of Row/Column. All the children will be placed on top of each other like in a `Box` in those variations as well.

With that said, here you could either create another Column in AnimatedVisibility or express the Spacer as a `padding` or `offset` on the `Row` .