Skip to content

Displaying a Composable inside another Composable

Android, Jetpack, Compose1 min read

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:

1content: @Composable () -> Unit

So if for example you had the following @Composable:

2fun TextContainer() {
3 Row {
5 }

It would turn into this:

2fun TextContainer(
3 content: @Composable () -> Unit,
4) {
5 Row {
6 content()
7 }

And you could use it like this:

1TextContainer {
2 Text("ABC")

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