เขียนฟังก์ชัน @Composable

In this lesson you will write your own Composable from scratch. By the end, you can describe a piece of UI with a single Kotlin function. 🚀

A Composable is just a function marked with the @Composable annotation. That tag tells Compose this function emits UI instead of returning a value.

Composables that emit UI use PascalCase names, like a class. So you write Greeting, not greeting, to signal it is a UI building block.

Your Composable does not return a value. It emits UI by calling other Composables inside it, so its return type is simply Unit.

Make a Composable reusable by adding parameters. Pass in a name and the same function can greet anyone you like.

Give parameters defaults so callers can skip them. Here name defaults to World, so Greeting() still works on its own.

You rarely start from nothing. Compose ships ready-made pieces like Text, Button, and Image that you call from inside your own function.

When you call Text, Android Studio adds an import for androidx.compose.material3.Text. Let the IDE auto-import so you never guess the package.

Each Composable should describe one clear thing. A small focused function is easier to read, reuse, and preview than a giant one.

Inside a Composable you do not build and return a widget. You simply call other Composables top to bottom, and Compose draws them in order.

A Composable is normal Kotlin underneath. You can use variables, conditions, and loops inside it just like any other function.

Time for a quick check on what defines a Composable.

You can now write a Composable: tag it with @Composable, name it in PascalCase, take parameters, and call other Composables to emit UI. 🎉