Displaying a Composable inside another Composable

I've been playing around with Jetpack Compose a lot lately and it reminds me of Flutter quite a lot. It's making Android Dev a breeze for me, and today I thought I'd highlight a tip about how to show a Composable inside another Composable.

Being able to displaying something inside something else is a pretty important feature for declarative UI frameworks. It wasn't immediately obvious for me how to do this in Jetpack Compose but it turns out that it's a pretty similar method to how things are done with SwiftUI. You just need to add one small parameter to your parent @Composable:

Copycopy code to clipboard
1content: @Composable () -> Unit

So if for example you had the following @Composable:

Copycopy code to clipboard
1@Composable
2fun TextContainer() {
3    Row {
4        
5    }
6}

It would turn into this:

Copycopy code to clipboard
1@Composable
2fun TextContainer(
3    content: @Composable () -> Unit,
4) {
5    Row {
6        content()
7    }
8}

And you could use it like this:

Copycopy code to clipboard
1TextContainer {
2    Text("ABC")
3}

And that's it. That's my short Compose tip for the day!