Modifier is one of the most frequently used parameters in Jetpack Compose. In this article, we will learn what it is and how to use it.
Prerequisites:
The Modifier allows us to customize the appearance of the composable. Using it, you can:
- Change the composable’s sizeand appearance
- Add information, like accessibility labels
- Process user input
- Add interactions, like making an element clickable, scrollable, draggable, or zoomable
Let’s create a box with 100 dp size. We can set the size using Modifier.size().
Box(modifier = Modifier.size(100.dp)) {
}Run the project. You will see nothing. That’s because we haven’t set the background color. We can do that by using Modifier.background().
Box(modifier = Modifier.size(100.dp).background(color = Color.Cyan)) {
}The output contains a box with a Cyan color.
There are two things you need to keep in mind while working with Modifier in Jetpack Compose.
1. The Order of Modifier Functions Matters
The order of modifier functions affects the final result. For example, let’s set padding and background color multiple times.
Box(
modifier = Modifier
.size(100.dp)
.background(color = Color.Cyan)
.padding(all = 10.dp)
.background(color = Color.Magenta)
.padding(all = 10.dp)
.background(color = Color.Yellow)
) {
}Here is how it looks.
Now, let’s add Magenta first, and Cyan next.
Box(
modifier = Modifier
.size(100.dp)
.background(color = Color.Magenta)
.padding(all = 10.dp)
.background(color = Color.Cyan)
.padding(all = 10.dp)
.background(color = Color.Yellow)
) {
}Here is the output.
Notice the difference? In the previous code, Cyan is applied first, followed by Magenta, and then Yellow. Now, Magenta, Cyan, and Yellow are applied respectively.
2. Scope also Matters
The modifier functions of the child depend on its parent Composable. For example, Box() composable allows us to align the children in several ways like TopStart, TopCenter, CenterEnd, etc.
But, if you change the Box() to Column(), you will only find 3 positions – CenterHorizontally, End, and Start.
This is because Column() places the children vertically. We can only align them along the horizontal axis. You can see the scope you are in at the beginning of the block.
