Handling Overflow

[00:00:00]
>> So now, it's time to clear the design a little bit. For example, maybe I don't think I like that shade version of the amber color. We can try different ones like ad. Also you have a little preview here of the color, and you see that within the source code, okay?

[00:00:15]
So we have a shade 50 for example, that may look a little better there. Also, maybe, what if I want a background color over the text? I want the text to have a background color, a different background color. So you can have some kind with some padding or something like that.

[00:00:37]
So you need to play with everything. So everything here is just taking the text applying the padding, applying a container. For example the container, I can take the text. The text that is rendering the description, and the title both, and I can apply to it a container. So, rap with container.

[00:01:00]
Container has a color purple that defines background color for that container. And I can use any color here for example, the same amber shade 50 from material design. So, if you pay attention there, we do have that background color over the text now. And, if you want padding, well, the padding I should apply another padding here.

[00:01:29]
Should apply the padding to the container, or to the text. What do you feel? If I want more space with that background color. So, it will get different results if we apply the padding to the container or to the text, that is the container child. So if I apply the padding to the text, more padding, I can say instead of 816, you will see what happens here.

[00:02:02]
So applying the padding before or after in the tree, will make things different. And I can use eight here. And then I can do the same or something similar to the other text. And if the same maybe later homework, you can make a widget that can be known as text with padding and color, whatever you wanna call that.

[00:02:24]
And then you reuse that widget twice. Remember, we are going to create reusable widgets. So every time you find that you're doing the same thing more than one, maybe it's a time for creating a widget for that. So, this text, I'm going to add a container so I can set its color.

[00:02:42]
I will take the same color as before. The color of amber shade 50, remember it's one of the material colors. And, we also need to add a padding of eight. So, to the text, look at these. Sometimes, the little help disappears from the ID, and be sure to go.

[00:03:03]
It's common. When they disappear, you can actually get the same menu if you right click, and you go to refactor. So right click refactor, you get the same menu. And after a while it reappears again, anyway. So I'm going to add padding. So now, it gets better. And my yo first page, that is the one that I have here, what if I wanna add more offers?

[00:03:31]
I want two offers. I need always a container, a layout container. If you want two elements, so if I want two offers, I need to wrap these in a container. Which container should I use this for horizontal scrolling, let's say column. So, I will take the offer, now my little light bulb is back, I will wrap this in a column.

[00:03:55]
But sometimes it doesn't appear, so you actually need to sometimes click again, or click outside. If not, you can always rub with whichever and do it manually. So, rub would column. So now I have one offer. Now it's complaining because it says hey, what you can do for the cost, if you can put the cost to the whole array instead of adding cost declarations on each item, and you can just copy this couple of times.

[00:04:24]
So we have a couple of offers. If I save this, now we see these on the screen. But, the look at the bottom. It's overflow. And by default, we don't have a scroll. So, flutter by default will not give you a scroll, and it will give you those warnings saying that you're getting out of the screen, the content is getting out of the screen.

[00:04:50]
How to solve the problem? We don't have a scroll view, something like that. We can add a modifier to the column, or we can use a list view. A list view is like a column with a scroll. So, [LAUGH] It was simple, right? Instead of column, we use this view.

[00:05:07]
And now we have a nice section for our offers section.