How to Pass a Modifier as a Parameter in Jetpack Compose

Jetpack Compose is a modern toolkit for building native Android UI. It simplifies and accelerates UI development on Android with less code, powerful tools, and intuitive Kotlin APIs. One of the core concepts in Jetpack Compose is the Modifier, which is used to modify the appearance and behavior of composable functions.

In this article, we'll explore how to pass a Modifier as a parameter to a composable function.

What is a Modifier?

A Modifier is an interface that defines a set of extension functions that can be applied to composable functions to modify their appearance and behavior. For example, you can use a Modifier to change the size, padding, background color, or click behavior of a composable function.

Modifiers are applied to composable functions using the modifier parameter. For example, here's how you can apply a Modifier to change the background color of a Text composable:

Copycopy code to clipboard
1Text(
2    text = "Hello World",
3    modifier = Modifier.background(color = Color.Red)
4)

Passing a Modifier as a Parameter

To pass a Modifier as a parameter to a composable function, you need to define the modifier parameter in the function signature and pass it down to the composable functions that you want to modify.

Here's an example of how you can define a custom MyButton composable function that takes a Modifier as a parameter:

Copycopy code to clipboard
1@Composable
2fun MyButton(
3    onClick: () -> Unit,
4    modifier: Modifier = Modifier,
5    content: @Composable () -> Unit
6) {
7    Button(
8        onClick = onClick,
9        modifier = modifier
10    ) {
11        content()
12    }
13}

In this example, we've defined a MyButton composable function that takes an onClick lambda function, a Modifier, and a content lambda function as parameters. The modifier parameter has a default value of Modifier, which means that if you don't pass a Modifier when calling the MyButton function, it will use the default Modifier.

Inside the MyButton function, we pass the modifier parameter down to the Button composable function. This means that any Modifier that you pass to the MyButton function will be applied to the Button.

Here's an example of how you can call the MyButton function and pass a custom Modifier:

Copycopy code to clipboard
1MyButton(
2    onClick = { /*TODO*/ },
3    modifier = Modifier
4        .background(color = Color.Red)
5        .padding(16.dp)
6) {
7    Text(text = "Click Me")
8}

In this example, we're calling the MyButton function and passing a custom Modifier that changes the background color to red and adds 16dp of padding. This custom Modifier will be applied to the Button inside the MyButton function.

Wrap Up

In this article, we've explored how to pass a Modifier as a parameter to a composable function in Jetpack Compose. We've learned that you can define the modifier parameter in the function signature and pass it down to the composable functions that you want to modify. This allows you to create reusable composable functions that can be easily customized with different modifiers.