 Hey everybody, this is Brian. Welcome to the 22nd Flutter Tutorial. Alright, so we're continuing where we left off with our basic layouts application. We're going to kind of clean up the spaghetti code a little bit. As you can see, this gets kind of unruly, and we've got some stuff. So this is a basic design pattern. It's really what we're going to be doing. We've got this Hello World. And let's actually run this in case you missed the last video. You can see exactly what's going on here. We've got that Hello World repeated. We've got rows and columns, and it's just really simple, just stupid layout, right? So you can see in our application, we have some repetition. Hello World, Hello World, Hello World. So that's all repeated. So what we're going to do is we're going to take that Hello World, each one of these, and convert it into its own full blown widget here. That way we can get rid of some of the spaghetti code. So the first thing we need to do is let's actually make a new Dart file. And we want to import the Flutter slash material because we're working with material design, right? Now, really, it's not that bad making a whole new component. I thought this was going to be like a huge, long, drawn out tutorial. It's really not. So we're going to extend a stateless widget. I hope if I could spell widget. And remember the build is, whenever you see build, think render. So in the not building widget, we're rendering a widget. So this is what we're going to actually render on the screen here. And because it returns a widget, we need to, you guessed it, actually do something here. So let's go back to our application here. And you can see we've got some design pattern going on. So there's this. Let me get rid of this. We can see container, container, container. So let's actually just borrow that, right? Let's find our endpoint, which is this guy. Grab that, copy and paste it, put a semicolon and bang. Our component is now done. So really all we're doing is rendering that Hello World inside of its own little container with its padding and everything. So let's actually go up here. We're going to import the hello.dart. And now that we have that import, you guessed it, what we can do is just get rid of this. Let's grab this little guy. And we're going to get rid of these three right here. Just put our Hello widget. So I'm going to actually kill this app. That way it'll rebuild the whole thing. So you know there's no trickery on my part going on here. So let's save that, rebuild it, run it out, push it to the emulator. It'll take just a second, but it should look exactly the same. The real difference here is that we have pushed that snippet of code into its own little widget. That way we're not retyping that over and over again and we can just reuse that. We can even extend it if we wanted to. It makes our code a lot easier to handle and a lot smaller too. You can see we still got this tab line going out further and further and further, but it's not as verbose and it's not as spaghetti as it was before. So it's a lot more manageable. Just wanted to do that quick tutorial because I've already had a few questions on design pattern and flutter. And we haven't really gotten there yet, but I kind of wanted to cover that early on. And in a lot of my future tutorials, I will actually use this sort of design pattern where I break everything off into its own file, simply because I don't want these unwieldy 3,000 line text documents. Simple, easy, hope you found it enjoyable and entertaining. And the tutorial will be out on voidrumbs.com. Click on tutorials and then go out to GitHub. And I know I say this every single tutorial, but we have a Voidrumbs Facebook group with almost 1,800 programmers in there. Basically, I'm pushing this because everybody in there is very helpful. I've even asked a lot of questions and gotten a lot of feedback, so it's a good resource to know. Thank you for watching.