Preview Composable

[00:00:00]
>> So now, title and description are just hard coded. So something that they can do is to receive the title and the message or description as an argument, right? So instead of being hard coded My Title, I'm going to use the title. And for Description, you should use description, make sense?

[00:00:29]
Because I want that offer to be dynamic to different offers. But at this point, we have a problem. The problem is that the preview is not working anymore. Can you understand why or do you get the idea of why the preview is not working? It's giving me an error, it's red.

[00:00:50]
>> You're not setting those description titles inside those?
>> Yeah, we have a variable, because now we need some arguments. So to preview in its arguments, it doesn't know where to get these arguments from. So there are two ways to solve the problem, let's say the best way, but the most complicated one, and the hacky and quick one.

[00:01:18]
Because we have only one day, we're going to use the hacky and quick one. But it's okay, I mean, it's not really so hacky. It's fine. The thing is that we can create composables like this, we can create preview composables. And to actually make sure that no one is going to use this, we can mark this as private.

[00:01:39]
And we can create a composable just for the preview and we're going to compose an Offer, With the properties set. Okay, does it make sense? Now, I need the iComposable, I forgot the iComposable. So I don't need to actually preview exactly what I want. So I don't need to preview the composable that I want to preview.

[00:02:11]
I can preview anything I want. So I can create composables just for the preview, As I did there. Does it make sense? So I did this private, so no one from the outside of this file will actually use that composable. Because it's just a preview, it wasn't actually intended for usage.

[00:02:33]
Does it make sense? So it is hacky, but not too hacky. There are other ways where you can set a class that will provide default values for your previews and so on. But it gets more complicated, and I think that it's probably too much for the first day of coding in Jetpack Compose.

[00:02:51]
This one is better, okay? Do you have any question on that? So you can make the previews as complicated as you want. So what if I wanted padding around the whole thing? Because the final goal of this file is to create another preview composable with the name OffersPage that will render several offers, okay?

[00:03:24]
And for that I'm going to create a column with offers, and I have two offers for you. In fact, I think if you want, you can even copy and paste it from there. It's just text, the title is not a big deal anyway. So this is the offers section, I think at the bottom.

[00:03:45]
Yeah, you have two offers here, Like that. What if you want to test now this? Well, it has a preview, so I can actually preview several at the same time. This preview has no background. And even if I want, you can just comment this one for now. So I will just keep previewing just the OffersPage.

[00:04:21]
So I have several, Preview is out of date, Build & Refresh. I have several previews here. But as you can see, this doesn't look exactly as I was expecting. So first, Let me try the Interactive Mode. With Interactive Mode, you can actually scroll and see what happens. And it doesn't scroll.

[00:04:52]
I mean, maybe it's not so bad. But if I add a third one, Remember interactive is that little icon there that lets you scroll. Well, it doesn't scroll. By default, the column is not scrollable. You can make it a scrollable, if you want. Do you understand the problem that we have?

[00:05:17]
So that offer is not a scrollable. How to make this scroll? There are many ways to do this, okay? So there is another component, there are other components that are scrollable, okay? So we can use those if we want to. But if you want to work with that, the column has a modifier.

[00:05:40]
So we apply, not focusModifier, we say scrollable. And we need to pass a variable that will remember the ScrollState. And look at the scrollable. Remember I mentioned, sometimes you need to import just one part of the declaration. This is because that's probably, An extension function. So it's the extension function that applies that the scrollable modifier is in another file.

[00:06:13]
And I think, yeah, I'm, I need to close that one, yeah. Okay, so that will add, It says no, I didn't because, Instead of a scrollable, I can use verticalScroll. If not, I can use a scrollable and pass the orientation as an argument. It's just the same, refresh.

[00:06:46]
Okay, so now I'm in Interactive Mode. And you can see, I can scroll. However, it looks terrible, okay? First, what about my second offer? Why it's not centered?
>> [CROSSTALK]
>> It's not actually taking the whole width. And because the text is narrow, it's not pushing the limits.

[00:07:14]
So we need to actually go to our Offer and say okay, maybe we need to go, for example, to the column here and change another modifier. And we can say that we wanna fill the MaxWidth, right? Make sense? So if I refresh, Now it's better. Okay, because I'm filling the MaxWidth.

[00:07:43]
But this is still not exactly what I wanted. So I mean, the image is still weird, right? So the image is still getting out of its boundaries. Does it make sense? So it's like, I don't think I want this like this. Well actually, to solve the problem, it's actually better to instead of defining the image and the column directly as global elements, we can use one called a box.

[00:08:18]
What is a box? Similar to a div in HTML, with the difference that everything you put inside the box will just go as layer on the same place, okay? It's just that. It's just a layer, one over the other. So if you look at the example, I think it should be here somewhere.

[00:08:42]
Yeah, the example that you have here in the Offer section, it's actually like that. It has the box as a wrapper, okay? So for example, that's the advantage of composables, it's just a function. So if you try this, it's probably the same thing. But if you try this, paste, rebuild, This one doesn't have the right color.

[00:09:10]
Let me change that quickly, it was the Alternative2. I show you by pasting this, I just want to show you quickly, how easy it is to replace views and make it work quickly, okay?