How inflate composable dynamically in jetpack compose?

Question

I want to inflate composable on trigger events in Jetpack COmpose.

If I used XML, I would use Binding.inflate or LayoutInlfater.inflate.

// example
lifecycleScope.launch {
   viewModel.createNumberEffectEvent.collect { number ->
      val numberText = CustomAnimationTextBinding.inflate(LayoutInflater.from(context), this, true)
      numberText.tvNumber.text = "number: $number"

      // View Animation
      numberText.slideAnimate()
      numberTExt.remove(delay = 3000)
   }
}

But I don't know in Jetpack Compose.

I don't think dynamic inflate on compose is a good way because it's declarative programming, but I wonder if there's a way.

The code below is an example of what I want.

LaunchedEffect(Unit) {
   viewModel.createNumberEffectEvent.collect { number ->
      inflate(CustomAnimationText(text = "create number: $number")) // Like this.
   }
}

Answer 1

You should turn your "event" to some state instead because with Jetpack Compose your approach to showing/hiding views is simply checking with the 'if'/'?let' statement your state value and declaring the composable (which will lead to screen recomposition with your composable on it) or not.

In your case I think it can look like this, your composable "screen":

val number by viewModel.number.collectAsState<Int?>()
number?.let {
   CustomAnimationText(text = "create number: $it")
}

More about states in Compose