 Hey everybody, this is Brian. Welcome to the 21st Flutter Tutorial. Alright, so in this tutorial we're going to be continuing our conversation about material design, but we're also going to be just kind of looking around here. And if I can find it, yeah, basic widgets. We're going to cover the row and the column classes and kind of just kind of want to pick and see what they do. Definitely recommend going out and reading their little... I want to say their documentation plus the sample code. I was going to call it something fancy, but the word escapes me. All right, so we're not going to do their code, but I highly recommend you use their code and you kind of play around with it and figure out how it works. We're just going to dive right in here and we're going to create a whole new project. And we're going to call those basic layouts. Now if you're wondering why I'm not going to cover their examples is because, well, their examples are on the web. You can just quite simply copy and paste those into your app and they should, Quoty Fingers should just work. Also, it's really because I kind of want to do something a little more advanced than just the bare basic here plug this in and talk about it for three hours. So we're going to wipe all that out. Wipe all this out. All right, so go in here. You can notice how test has got a little problem here. We're just going to delete that. If you're wondering why it has problems because it's referencing the my app, which we just deleted, we're going to actually create that though. We're going to extend the stateless widget again. All right, so what we're going to really be covering in this is the role in the columns. And we're going to intentionally make this application very busy, a lot busier than it really should be. And when I say busy, I mean the code is just going to be a complete mess and there'll probably be a lot of mistakes, but I just kind of want to prove a point here. And don't worry, we're going to fix it in the next tutorial what it really should be. But I just want to show you how kind of spaghetti code this could be a little bit. But even though it is spaghetti code, it's actually still very easy to work with here. So we're going to build a material app. All right, so we've got our our home and our material app is set. Let's actually build this and push this out to our emulator just to make sure we'd have no problems going forward here. It's going to take just a second for this thing to compile. All right, so as expected, we have our big white box with our slow mode. We're going to go out here. Now that we have our scaffold, something we want to do is actually make the the body here and we're going to add an app bar too. Now someone had already emailed me and said, hey, why is everything an object? This gets little nuts having to say new text just to set the title. That's a good question. It's because it uses Dart in the background. It's the underlying language is Dart and because in Dart, everything is an object. So everything's a class. All right, so the body of this, we're going to just make a new container. And we're going to use container simply because we want to be able to use some padding in here. And we want to say 32.0 just because why not and then we want to... Let's just play around with this a little bit here. We'll say child, new center and in child. We're going to say new child equal new column. And here's our actual column. Now the column is going to go from top to bottom. And in that we can say children. You notice how this is different from child. The first thing it's doing is it's saying, hey, this is templated. So it's going to hold a type of widget and then here is our actual array. And through the magic of copy and paste, there's going to be a whole lot of copy and paste in this tutorial. Initializing hot reload and you can see it reloaded. So here is what we've got thus far. So we've got our app bar. We've got our body in our scaffold and the scaffold kind of has a container and I think a container just as a glass box at see-through, right? So in this box, we've said we want the padding to be 32.0, which is why we've got 32.0 from the top. If we got rid of that center, it would also be 32.0 from the edge here, but we just wanted the centered. Now in that center, we have a child called a column. The column does top to bottom. The widgets that we have in there are three texts. Hello and hello world and then the exclamation. So bang, bang, bang. There's our three. Pretty simple, pretty easy to use a column. But as you can see, our text starts getting a little crazy in the tab markers. These lines keep going out and out and out and it gets kind of nuts here. So what we want to do next is we want to say new row and you can see how the tab marker goes out again, and it gets kind of crazy here. We're going to do cross access alignment center. So basically we want to center everything and then main access alignment. We want to center that and then from there we can add our children. Notice how this is once again templated. It's a templated array. Is that even the right term templated array? It's expecting a widget type and it's an array. So we're just going to grab some hello world here. Dump that in and let's see if hot reload picks that up. Looks like it did. So there's our hello world. So that's going across here. Hmm, not liking that too much. There's no space between hello and world. So let's actually get this out here. Let me look at this for just a second. See how we want to do this here. Let's do this. Let's get rid of this guy. And we're going to say actually we can probably just now let's do this. I'm deviating from my notes. That's why I'm sitting here on the fence about something here. Sometimes I like to just play around and do things because the notes get kind of boring because by the time I've recorded this video I've already done it two or three times. So we're going to pad this by five and then from there we're going to say, and we are just going to grab these right here because I just don't feel like typing that out again. So now you can see how we have got our our rows and columns. That was my chair that made that noise. I hope this thing didn't just break. Dump me on my butt. Alright, so let's find this little guy. And this is very helpful where you click on one of these end points here. It'll actually highlight where it begins. So we're going to grab this and hot reload picked it up. So you can see now how it is our Hello world on the top and then we've got three on the bottom here. So what we've really done is we've got a column. So here's the first one. Here's the second one and in that second one we have a row. We have bang bang bang and in each item we've got another column. So that is kind of crazy how you can lay things out, but you can get really precise with just rows and columns. I'm kind of surprised. Some other mobile frameworks rows and columns completely suck, but with Flutter. It's actually not bad. I mean you get pretty nice precision here and you can just add on and on and on. But as you can see what happens to your code is it starts pushing out and you get these tab markers, these lines that go out and out and out and it's not uncommon that you get way out here. So you really need to and we're going to cover this in a future tutorial how to kind of shrink that down a little bit and compartmentalize or make things into components or widgets. Ideally you could actually take this whole Hello world thing and make that that way you don't have this spaghetti code going out. So that in a nutshell is really how to work with rows and columns and it's super simple super easy. I kind of wish this was like a long drawn-out tutorial, but it's really just not because they're so easy to work with. Kind of the major takeaway from this is that when you're working with these you should kind of check the access alignment and you can put things where you want and then the children property, not the child property, the children because it can hold more than one is templated. So you can say widget and then you can actually change that if you wanted to not recommended but you can change that if you want to and then it has an array and you can see how that's everything that's in that array and then you can you know see here again. That's everything in this array. Pretty similar both row and column. Follow the same design pattern. So that's it for this tutorial. I hope you found this educational and entertaining. Highly recommend going out reading their official documentation. The source code for this and all other tutorials will be out on voidromes.com. Just click on that takes you right out to GitHub and you can join the Voidromes Facebook group which has really close to 1,800 other programmers out there all different languages.