Adding Button

[00:00:00]
>> The other thing that I need here is a padding. So I will like to see a padding at the right, I want to position in here that says, Add. If I can add that product into my order, that's kind of the goal. How can I add the button there?

[00:00:19]
What do you think, sir?
>> Row.
>> A row, where? Where should I add a row here? So let me add the const that are complaining here, either row because now I need row, where? It's kind of where should I add a row? So actually, what I need is, I need the image, and after the image, I need a row.

[00:00:38]
So I can add a row manually with some children. Okay, and the children's are these two paddings. First, but if I do this, this is what's gonna happen. Now, they are in a row and I don't want that.
>> Another column.
>> Another column, make sense? So I need, first, a column.

[00:01:08]
Makes sense? Then we need a row, but then within that row, we need another column for the title and price and then the padding. We have a question on the chat, yeah.
>> Why wouldn't you wrap the elements in a single padding?
>> In a single padding? Padding, padding, I understand.

[00:01:29]
Padding accepts child not children. So if you wanna do that, it's fine, but you need another container, okay? So a padding, you cannot apply a padding to two elements. So a padding is to one element. So if you have a padding and you have two, you need another container in the middle, like another row, another column.

[00:01:52]
But it's possible here, I have a row, so now I could remove these paddings and get the padding out to the row. It's not going to be the same because you won't be having padding between the text. But you layout your design by having in mind that some widgets, they have child as a property and some widget, they have children as a property.

[00:02:14]
So, and you cannot change that, is not your decision, is the wish of decision. The padding widget accepts only one element, you will apply the padding to one element only, okay? So we were adding, we set a new column. So I'm going to wrap this into a column.

[00:02:34]
I'm going to add the second padding as a sibling of the first one. So we are back here. Yeah, we need to solve some problems there. You can see it's getting messy pretty quickly. In just five minutes, I have, I don't know, probably six, seven nested elements. This is pretty common in Flutter.

[00:02:57]
And also, I need in the row. Fortunately, we have these hints to know where we are. So probably here, I need to add a botton, okay? Unfortunately, we don't have a button, say, we don't have buttons. Actually, there are many buttons. And they use button as a suffix, so they don't call button, we have a TextButton, we have an ElevatedButton, an IconButton.

[00:03:24]
ElevatedButton looks like a button. And the TextButton is just like a link. Also, we have a LinkButton as well available. But let's say an ElevatedButton will probably make the trick, It has an onPressed property and child, child is for the contents of the button box. And what do I want?

[00:03:45]
Sure, can I add a text here, like a string, saying Add? Not gonna work. Every time you see child, the type expected is a widget, not a string. So I need to actually create a widget, for example, a text widget that will have the text inside, Trailing comma.

[00:04:08]
And what about onPressed? What do you think this is in terms of type? What should the type of onPressed should be? A function. So how to create a function here. Parentheses, code or parentheses, an arrow function. Arrow function only for one expression. Okay, Text(Add) is complaining because it's constant.

[00:04:31]
Okay, so let's see. Look at the color of the button. By default, It's using the color of the swatch that I define the theme. I can change that if I want to, but if you're okay, it's fine. So what? We have some layout issues to solve here. So first, the price for some reason is centered with the title, why?

[00:04:59]
So let me show you something, what if I wanna add another product here? So I wanna see two products at the same time, what do I need to do in the menu page?
>> The widget, I mean, let's make column, I guess.
>> A column, there is no other way.

[00:05:15]
So I need to create a container, so if you want to, one after the other, column. So I need to wrap this into column. And now, I can add another product with another, let's say q. Let's make it q. I'm going to create another one, another Dummy Product, this is a much larger, okay?

[00:05:38]
Well, I am not seeing it, but we know that instead of a column, we can use a ListView. So we have it curl. So what I wanna show you is this, they are not even uniform. So what's going on here? By default, the children of rows and columns, they have their width, their size little flexible based on the contents.

[00:06:07]
And I'm not sure I like that, right? It's kind of weird. So something that we can do, okay, so there are many things that you can do. Okay, there are many ways to solve this layout issues. So now, we need to go back to the problem item and see what else we can play with.

[00:06:23]
We can play with alignments of things. For example, in this case, we have this column, is the one that has the name of the price. So, we can solve the center problem, okay? Though we wanna move the price there by changing the property of this column. Is it gonna be main axis

[00:06:47]
>> Cross.
>> Or cross axis?
>> Cross.
>> Cross. Let's say CrossAxisAlignment.start. Save, yeah, that'll work. Now, I need to work with the row because I wanna change how the elements in the row are aligned, okay? Should I use cross or main? I wanna see if I can move this button there.

[00:07:17]
That's a goal, main, mainAxisAlignment. So we are going to take elements from mainAxisAlignment. There is one that says a space between the children. So it will actually put a space between the children and push the children to the edges. Make sense? That looks good. Yeah, maybe we need some padding on the button.

[00:07:47]
Can we do that? We know how to do that, right? So we click on the ElevatedButton. Let's say some right padding only. So how can I only right padding? As far as I wrap these in a padding, but then I don't want to apply to all, only to the right.

[00:08:12]
Of course, I'm doing this with, let's say nice speed, even if I'm explaining this. When you're doing this for the first time, your speed will not be this one, right? But you get used to that, to know where to add the elements, where to change the cross, blah, blah, blah, okay?

[00:08:32]
Makes sense?
>> The row and the main axis still throws me off.
>> So the row, it's actually put the elements in the row horizontally. So the mainAxisAlignment defines the alignments of the elements horizontally. So you can say, I want them center, I want them here at the start, I want them at the end.

[00:08:54]
Or there are other options, thare are space between, space around. I mean, this is actually pretty similar to Flexbox. In fact, it's based on Flexbox. So if you are a web designer, and you have been using Flexbox and CSS, you will be at home here this with the names and how that works.

[00:09:14]
So, you can play with that. For example, instead of a space between, we can create a space around. And in this case, it's adding a space in the middle of the two elements and also around. So we have a space, maybe doesn't look so bad, but anyway, we have a space between elements and also around the row, okay?

[00:09:38]
Then you have a space evenly. This is exactly the same as space no matter how big the elements are. I think for this case, space between is the one, I don't want spaces around. For that, I use paddings, okay, to define the spaces around. Does it make sense?

[00:10:02]
Yep, So then what you do with the Add button? I have a button, okay? And the button has an onPressed, I need to do something. Well, again, I don't know, I don't have the data yet, I don't have the repository. But I'm a widget. I'm a product item, my responsibility is to render a product.

[00:10:26]
Actually, I don't think I know what to do. So most of the time, in this case, what I want is to move these events up. So whoever is calling me, hey, the user has clicked add here. It's your problem now. How to move an event up. We create a property of type function.

[00:10:52]
So I can call this onAdd. So it's like a callback JavaScript. So I'm going to also receive this in the constructor. It's another property. This onAdd, like so. And then the only thing that I'm doing here is just calling onAdd. And I can pass maybe the product, that's an argument.

[00:11:19]
Again, I'm responsible for the little widgets, I don't know what to do. I don't know where the data is located, I don't care. I shouldn't care. And then I'm just moving, lifting the value up. So now I'm getting errors at the top because I need to implement onAdd.

[00:11:44]
Make sense? For now, I can just put empty go, we will probably solve this pretty quickly. So we've been playing a little bit with cross alignments, with layout, so we haven't seen anything so new. Modelland plane or fighting with alignments, paddings, and all that stuff. By the way, do we have margin?

[00:12:07]
No, a margin is a padding that you apply outside of the content, outside of the background color or something like that. If you have a container with a background color, you can apply padding outside the container and padding inside the container. The padding inside the container is the CSS padding, and the padding outside the container is the CSS margin.

[00:12:30]
Makes sense? I mean, Kibera, you don't do this, but I wanna show you that you can. You can apply padding to the padding, it doesn't make sense, okay, I know. But in fact, it's not even appearing in the list, but they can actually do it manually. I can apply padding to the padding, of course, they're gonna say, hey, come on, you can just use one and increase the number.

[00:12:52]
But it's a widget. So actually, you can have a widget with a widget with a widget with a widget with a widget without issues. This is actually using high performance structures, so your objects, so it's not going to be a high performance problem to create a large tree