Modifiers

[00:00:00]
>> What if I wanna have two text? Well first me remove one of the previews for now. And the second composable as well so we can just stay with only one preview. So remember you can do this. What if I wanna add more paddings to this text? So the padding is actually a modifier.

[00:00:23]
So, this takes a while, but we're going to do this so many times today that I promise you that by the end of the day you will see it. So, every composable or every building composable, let me be more accurate here, every building composable has a modifier argument.

[00:00:43]
So I can pass the argument with a name. The modifier is actually a chain of functions of type modifier. So for example, if I want a padding, it's Modifier.padding, okay? So I'm adding a padding and I need to specify the padding in the Dps. So you can see the type there it says Dp is a type.

[00:01:14]
How do you express a Dp? Look at this, I will say 16.dp.. I'm seeing Dp in red. And we are going to see this a lot in Android Studio. Red means there is a problem there. Most of the time, when you're writing code like this, it's because there is a need for an import.

[00:01:39]
We need to import a class or a function or someone from an external package. In Android Studio, you quickly import will Option+Return on the Mac, Alt+Enter on Windows or Linux. So Option+Enter, Alt+Enter solves the problem. And actually what it's doing is at the top, there is a section that is minimized or it's collapsed with imports.

[00:02:06]
And here you can see it's importing the Dp, okay? So what's going on here? 16.dp, look at that. So Dp seems like a property of integers from a Kotlin point of view. But the idea is to write this similar to CSS. But actually this is using Kotlin behind the scenes.

[00:02:31]
So if I bill a refresh, I should see, The padding, okay? So what if I wanna change the background color? It's another modifier. But I all ready said the modifier property, there is only one modifier property per text per composable. Something that I can do is I can continue this chain.

[00:02:57]
So after the padding, I can change the background and define Color., let's pick any one here like cyan or maybe yellow. As you can see, reading these lessons look really nice. So most of the time what we do is we put the modifier, the declaration in a new line, and then each modifier also in a new line, like so.

[00:03:32]
So most of the time we are going to see composable like this. And by the way, if you're coming in from the web, there is something weird with the padding. What's going on with that padding? The yellow is not taking my padding, okay? That's because the order in which you apply the modifiers is actually important.

[00:03:57]
If I change the order, it's going to change what it's doing, it's first applying the background and then applying the padding. Because a modifier is a function that transforms a composable into another composable. It's not the property. It's a set of input-output transformers. It receives something in a composable, it transforms the composable into another composable, and then it can apply another thing.

[00:04:28]
In fact, I can apply the padding more than one because padding is not a property like in CSS. With CSS, you can apply padding twice but only the last one with valid values will be accepted. But here, both will work. In this case, I will have both matching and padding.

[00:04:50]
In fact, we don't have matching here. A matching here is a padding that you apply before the background. And now I have matching and padding. My app is still not using this composable, this is like a composable that I'm building separate from my app. But instead of a text Hello World, I can just use my first composable and just call the function that have you render a composable.

[00:05:18]
So if I do this, and I run this on the emulator, not in the preview, it should run my Hello Jetpack Compose composable. Does it make sense? So we are going to be building composable functions like this. Inside the body of the function, we are going to be publishing more composables with properties and modifiers.

[00:05:50]
And that's how we are going to build the whole application, okay? So we have something for now, okay, pretty simple. I'm going to add two more things really quickly. So first, what if I add another text? How do I add another text? When the first text is finished, I can put a new line and put another text.

[00:06:12]
Let me minimize the emulator for now, hide it like so. So if I do this, can I have two text like this? I can, but if you look at the preview, I'm not sure it is what I was expecting. By default, if I emit more than one composable in my composable, they are one on top of the other, okay?

[00:06:38]
So it says like, I don't think that's what I want. Maybe what I want is to have the other text below the first one. Well to do that, we need a container that will mark the layout. The container is column. So I'm going to create a column and inside the column, there is some kind of a code block that I will explain in a minute, and I can emit two texts there.

[00:07:07]
And now I have one text on the other text. And if I want a padding on the other text, well I need to set another modifier. Modifier =, and I can start typing Python here, and I have like that little thing there. So build and refresh every time you wanna update this.

[00:07:28]
So you don't need to build and refresh on every change. There are some small changes that you can, for example if you change the padding, like here instead of 16 I use 8, you can see that immediately. So if you change numbers, or even some text, there is no need for rebuild.

[00:07:51]
But when you make other changes, you need to rebuild, okay? So changing literally strings or changing values for the units will let you see the preview quicker, okay? So I have column and because I have column, I also have row. So instead of column I can use row.

[00:08:10]
And this is like flex books. By the way, I'm getting an error. Whoo, what's going on? Look at Row, it's red. So I need to import, option return, probably, and that import. Why I didn't import column? Because actually there is a difference between typing row, and picking row from the list.

[00:08:38]
So, if I pick someone from the list and press Return or Enter, it will add the import automatically, make sense? If I type it completely, there is no automatic import. Make sense? So that's why it's a good idea to pick it from here if you get used to that because that will add the import declaration automatically.

[00:09:02]
So now I need to build again. And now there is a row. So it goes that way. And of course you can nest rows and columns. This is like a D with flex box on the web, or this is like an Hstack or a Vstack on iOS. Depends on the platform Swift UI.

[00:09:30]
So we have row and we have columns as the most common things here. But, what is this code block that we have here? That's kind of weird, this is a lambda expression. We don't see that here, but it's a lambda expression. So column receives in the constructor lambda expression, lambda is a function, okay?

[00:09:52]
We don't see that function, it looks like a code block, but that's why it has its own this, its own context here, that it's saying that I'm in a column. Anyway for now, this is the kind of how Jetpack Compose looks like? Any question on how it looks like.

[00:10:10]
>> If you wanted to like have like a base modifier and then have each one like add on to it, can you create like an instance of modifier above and then.
>> So the question is, if you wanna apply like the same modifiers to many elements? Typically if you wanna do that, you can create your own modifier, okay?

[00:10:31]
So you can create your own modifier with a name, padding and background, okay? That will apply the padding and background inside. What's a modifier? A function. Okay, so the way to do that is to create your own modifiers that's the simplest. There are many patterns to solve the problems but probably what you wanna do, the simplest way is to create your own.

[00:10:53]
How is it going to work that? Well what is Padding? I can command click on everything that you have here because it's open source, the whole framework is open source. You can command click or control click on windows on every element like ID column, and you can see the code, okay?

[00:11:10]
So that means that I can also see the padding or the background modifier. If I Control click or Command click here, you will get and see what it is. So what is a modifier? If I ask you what's a modifier, it's a function, but not any function. Its an extension function.

[00:11:29]
It extending modifier which means if you wanna create your own modifier you need to do the same. You add a function to modifier, okay? Well, then you need to add the code, but here you have all the code how to add the padding. But that's how you compose elements here, okay?

[00:11:53]
Make sense?
>> Do you do that outside of this function just because it's,
>> Yeah, you should do it outside, it can also be in a different file. So anywhere but yeah.