DEV Community

loading...
Cover image for Anatomy of  a Flutter App

Anatomy of a Flutter App

Praveen Varma
Code never lies, comments sometimes do!
Updated on ・2 min read

Widgets, widgets and widgets!

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.
lego-blocks
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.
flutter-appbar-layout

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.

flutter-container

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.
phone

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.
0_7hLwrQ9PjkOa_hFQ

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.

widgets

Thanks for the read,
Praveen Varma :)
More Flutter repos can be found here.

Discussion (0)