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 a 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 app bar at the top.
And this is a pre-built widget that simply looks like an app bar and acts like an app bar.
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 a 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 the other – 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 want 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 app bar and a container: an app bar and a container.
Now, inside the parentheses for the container
So here’s 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 U.R.L. 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 was pyramids.
It was the easiest thing to do, so I made a lot of pyramids.
I 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 give 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 of these different types of widgets.