A stitch in time saves nine. This video covers scaffolding and how planning out your app using simple blocks before your start coding will solve many of your design issues in advance.
- [Instructor] All right, so before we get started, I wanted to quickly run through just what a Flutter app is composed of, or the anatomy of a Flutter app. And we're going to decompose it and we're going to break it down. So as I mentioned before, everything inside of Flutter app is a widget and you build widgets upon widgets just like Lego blocks on Lego blocks in order to create your app. So let's say that we decided to create a brand new app. The first thing we might do is we might create a scaffold, and this is just a blank screen for our app. And inside the scaffold, we're going to add an AppBar at the top, and this is a pre-built widget that simply looks like an AppBar and acts like an AppBar and it's also super easy to create. Now the other thing I'm going to put into my scaffold is a container, and this container is just a box and it's going to contain the content of my app. Now the container is going to have a column, so this is column, and so now we can put widgets inside the column that stack vertically. So for example, the first thing I might put into my column at the top is a row, and the second thing is I might put in a piece of text. So now I have a column with two items with two widgets, a row at the top, and some text at the bottom. Now I can go deeper into my widget tree and in my row, I'm going to add some text and an icon. So when I want widgets to be positioned vertically, one on top of another, then I'll use a column to lay them out. If I want widgets to be side by side, horizontally, then I'll use a row, and if I wanted to add in a piece of text, then I would use a text widget. If I wanted to add an icon, then I would use an icon widget. If I wanted to add an image, then I would use an image widget, so you get the point. And by the end of building our app, we end up with a widget tree like what you see on the right here. Now our widget tree is just a whole bunch of widgets that are nested within each other. And if we were to look at the code for our widget tree, it would look kind of similar, although it would be rotated, I guess, but essentially, we would have all of our widgets nested inside each other. So inside these parentheses for the scaffold, we've got an AppBar and a container, an AppBar and a container. Now inside the parentheses for the container, so here is where it starts and here is where it ends, then we have a column. Here's our column. Inside our column, we have two things, a row and some text. And inside our row, we have another two things, some text and some icon. And this is how you would represent this tree or this design in Dart code. So creating a user interface like the one we have here is as simple as writing a few lines of code like this. Now while a lot of these widgets that we've seen so far are basically UI widgets, right? Their functionality is mainly to either lay things out or to show pieces of text or icons, now there's also other widgets that have some functionality. For example, if inside the column instead of showing a piece of text, I wanted to show a picture from the internet, well, I can then use a widget called a network image and I'll give it a URL and it'll be able to load the image from that URL address. So this is a widget that performs a little bit of functionality. And so the way I like to think of it is when you're building Flutter apps, it's kind of like working with Lego Technic because while traditional Lego is mostly just about building blocks on top of each other to create, well, all I created as pyramids. It was the easiest thing to do, so I made a lot of pyramids. Wasn't creative enough to make much else, but with Lego Technic, you can build something that not only looks good, but also has functionality. For example, this truck here. We've got a little remote control and you can move the crane arm up and down and this is because not only does it have the Lego pieces or the widgets for the appearance, such as wheels or the front bumper or the crane, but it also has the pieces that gives it functionality, like a motor or a battery, and it's through plugging all of these pieces together you end up with something that not only looks beautiful, but is also interactive. And that is essentially what our Flutter apps are and how they will get built through the use of all these different types of widgets. So once you're ready, let's get started and setup and download our tools so that we can get started developing our very own Flutter apps. For all of that and more, I'll see you on the next lesson.
This course was created by London App Brewery. We are pleased to host this content in our library.