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

# compose

[KotlinLeaner]

Hi, why Spacer is not working in simple function?

[KotlinLeaner]

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?

[Javier]

Probably the Spacer is behind the row (or viceversa)

[Javier]

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

[KotlinLeaner]

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

[KotlinLeaner]

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

[KotlinLeaner]

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

[Sean Proctor]

It's because it's inside AnimatedVisibility. You can do something like:

@Composable
fun ColumnScope.WaitingToPair(...) {
    AnimatedVisibility(scanning) {
        ...
    }
}

[Sean Proctor]

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

[Sean Proctor]

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

[KotlinLeaner]

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

[Doris Liu]

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 .

[KotlinLeaner]

okk perfect got it..

[KotlinLeaner]

Thank you so much guys