Styling the Offers Page

[00:00:00]
>> So now I need to make a little web, I'm going to make some designs here so it will look better. And I think that you will get the idea pretty quickly, so first, I think these texts they need a different font size. So first, so but before doing the font size, I wanna show you something that is actually pretty interesting.

[00:00:22]
We know that the typical joke in CSS is how to center in CSS, right, so centering text well with Flexbox is simpler but it's always a shock. How to center things here there is a widget for that, so for example we can take the column or the text and click on that little help and select Rub with center.

[00:00:50]
Center is another widget that receives one child. And now there are center. So everything is a widget [INAUDIBLE] widget, so you can get really messy. But at any time, you can extract that into another widget. In fact there is even an option here saying, extract the widget. And also we have, extract which are the last one, we also have an option to remove this which for example you say, I don't want the center.

[00:01:24]
But you know what, I don't like it. So then you remove the center, but it's not just the center, you need to remove the center and then the child declaration and then one parenthesis on the other side. So instead of doing that, you can click here and say, remove this widget, and it will do that for you.

[00:01:42]
So with flutter, we want to use the tool as much as possible. Okay, make sense? It will make your life much easier. So talking about the font sizes. Okay, we already mentioned that the text has a nine argument Style that receives a text style. Instead of creating a new text style as I did before, I can ask the theme, the material theme for a previous style, okay?

[00:02:20]
So to do that you'll use theme with capital T-OFF. It receives a context that I don't know exactly what it is but it's an object representing where you are in the widget tree. And we received that here as an argument. So we are going to pass that to theme of like so, and the theme has many things in such as text theme, they have colors.

[00:02:54]
They have a lot of stuff that you can use directly from here instead of setting your own size manually. Okay, makes sense? So there are many things that you can get from the theme. If you wanna get it from here, okay, it's up to you if you wanna write your own theme, or you wanna take one of the themes that you have here, for example, you have headline one, this is h1.

[00:03:19]
It's actually really big. Too much from my point of view but you can say, when a wonder how h5 looks better and for the other one, training coma remember will make the trick. The other text can also have a style theme of context, textile up, sorry, with all the text theme, headline six, training, and now it's looking better though.

[00:03:56]
You want panning? Well, I can take the center and rub these with panning. I can take the other center and wrap this with panning. Save now it's getting better, yeah.
>> So know when you're adding these headline five, it's still it's it's already playing the default text theme, right of your theme

[00:04:24]
>> Is not actually default. This is actually what you asked me for, like, how can we create our own textiles and reuse them? This is kind of the way. In this case, they are storing a theme and you can replace those.
>> if you don't like, what is the theme?

[00:04:38]
If you look at the main Dart, the theme declaration is actually here where it says material app, there is a theme declaration. Can you see that? So actually you can come here and change for example, your themes. So here texting you can actually declare like global themes, colors and declarations that you can use anywhere in the widget tree.

[00:05:06]
Okay, makes sense? So here instead of hard coding, my own text size, my own phone size, I'm actually taking that from the theme. They say global object injector in the tree.