Widget Styles

[00:00:00]
>> At this point, many of you may be wondering, what about the UI? But I mean, if I wanna change the font size, if I wanna add paddings, because everything looks terrible on my app at this point, okay? So let's start with padding. So let me tell you this.

[00:00:18]
On Flutter, not everything, but most of the things are widgets. It's heavily based on widget. And I'm not sure if you're going to like this the first time you see that, okay? But if I wanna add a padding to the TextField, so this TextField, okay? So I wanna add a padding to the TextField.

[00:00:39]
How would you do that? With a padding widget. So I need to wrap the TextField into a widget that has a name padding. So if I click here, now I have a padding with a child of a TextField. So the padding is like having in HTML a padding element, okay?

[00:01:01]
So you wrap your elements in the padding elements. So that's why it gets big and big and big because there are already pads. So if I save now, we should see a padding. By default, it's creating, it's not actually a property. Sometimes we say a widget property, but it's actually the widget constructor.

[00:01:23]
We're calling the widget constructor. And these are actually arguments to that constructor. So here it says all the paddings, all the edges at 8, I can say 24. And this is expressed in something similar CSS pixels. So it's independent from the resolution. So it's like saying 24 px in CSS, okay?

[00:01:48]
So you can see now it's better. Instead of all, there are other options here. You can say only, and now you pick, for example, only top. Here you have all the options, bottom, right. Because there are a column there, it means that's a named argument, okay? And it's optional because it's not forcing me.

[00:02:09]
So now it's only at the right, and here I can add more, the top, and also the left as well. Okay, makes sense? What if you want a padding also to the row or to each children, well, a child? Let's go with the row. Click here, I'm adding a padding.

[00:02:31]
Save, and now everything has a padding. What about font size? Well, actually font size is another widget. So that's why I said not everything is a widget. In that case, we need to talk to, in this case, the text and see if we have more possible arguments in the constructor, okay?

[00:02:52]
And you can actually ask for all the possibilities here. And there is one that says style. That is of type TextStyle. So let's see, TextStyle is another class. Everything is a class. So TextStyle is another class that has a lot of possibilities, such a fontSize. So I will say fontSize 24.

[00:03:20]
If I say, now you see a much large hello, not, there is a const Text, okay, with exclamation mark. Why is this complaining here? Because the TextStyle is not changing. So it's asking me to add const. If I add a trailing comma to the arguments here, it will put this in different lines.

[00:03:45]
And because it gets really messy, the ID tried to help adding these hints. These are actually not comments. They are not part of the actual source code. It's saying here we are closing the text. Here we are closing the row. Here we are closing the padding. So you know where you are, okay?

[00:04:05]
Does it make sense? Any question at this point, yeah?
>> Can you apply the TextStyle to, say, you got a bunch of stuff in the row?
>> Well, so let's say I wanna apply the same style here. So you need to say style, and yeah, you can copy and paste, but we don't like copy and pasting, right?

[00:04:25]
So this is just a function build. We are returning something, so we can write content before the return. So we can create the variable and call this greetStyle or something like that, and do this, and then use greetStyle. So we can create variables here because this is just a function.

[00:04:45]
So the build is just a function, okay? Something like this, then we add a trailing comma, like so, and greetStyle. It's fine, what's going on?
>> It could be a constant.
>> It says give me a forward constant. Now, it's probably complaining here because it's a variable. I think that's the issue.

[00:05:10]
It's not a constant here? Yeah, you were right. Because it's a variable, the style might change. And now I'm reusing the same style. And of course, this is just something. And now we can go back to the const here, something that you can put on a separate class with all your styles, and then just use them.

[00:05:31]
So you can use OOP here. So if you wanna emulate CSS classes, you could do something like this, put these objects, colors. For colors, we have other place, actually. But for these objects that you wanna reuse along your app, you can create your own repository of this. This is an object of type TextStyle, so you can put them in a container, and then reuse them.

[00:06:00]
So have in mind that there is a return. So you can do a lot of stuff before the return, but the return is just one expression. So everything here is one expression. So you cannot do a lot of stuff within the return, such as creating variables. Surely, you need to do that before the return.

[00:06:17]
>> The state of state management in Flutter mirrors React in a lot of ways. It's been one of my biggest struggles in building out Flutter apps.
>> Yeah, it's copying that model. But to be honest, it's copying the React model prehooks, okay? So it's actually how it was prehooks.

[00:06:36]
On React now, you have hooks, and you don't use that setState anymore, you use useState. And Flutter is not upgrading to that part. Flutter is still heavily based in classes and OOP. So it's actually mimicking that situation, but it's a design pattern. So as any new paradigm that you learn, any new design pattern that you learn, it takes some time for your brain to make the connections actually until you make the click.

[00:07:03]
And you say, okay, I got it. And now you understand what's going on, okay? So it will take time if this is the first time you are dealing with this pattern of having a state-based UI component, okay? Cool, well, now that we've done that little widget that was just to understand the basics of widgets, and also the basics of a stateful widget versus a stateless widget.

[00:07:34]
Have in mind this works on iOS and Android. So I don't have a need to now go and test on Android and iOS. So you should be confident enough that this will work on all the platforms, they're exactly the same. Because remember that they're not using the UI kits from each operating system.

[00:07:56]
It's the same engine that is rendering the same app on every platform. So unless you are using plugins, that's something that we will mention later, there is no need for all the time to test this on all the platforms. I mean, if you're happy with testing on Chrome, you're good to go.

[00:08:17]
Of course, at the end, you can try on iOS and Android, but just pick one for testing and keep it. I think that probably the Chrome is the fastest one. I mean, the hot reload is faster here, but it's not a big deal anyway on the other emulator for this one.