Flutter Basics | Layouts

One of the reasons flutter is growing so much and becoming one of the biggest development frameworks out there is because of how easy it is to generate beautiful looking layouts. With only a handful of widgets, you can create complete and functional UI for your app.

Scaffold & AppBar

The scaffold is the very base widget of every screen that you will have on your app. You can think of it as the base building block of your screen. In order to put widgets on the screen there has to be something to put it on. Think of it like a bulletin board. In order to stick things onto it, you need the actual board. That’s the Scaffold widgets role. The AppBar is just as it sounds. It is a bar that is at the top of the page usually containing a heading for the page that you are on.

Container

Containers are the most basic of building blocks that flutter has to offer. If you put a Container around any widget, it will not change how that widget looks at all. However, if you add in some properties that the Container provides, you can change the look of the widget completely. With Containers, you can change padding, add color, add borders, etc…

Center

Center widgets are a bit boring. It is very similar to a container, except with a lot less properties. Its’ main function is just to center the content.

Row & Column

The Row and Column widgets are what you will most likely use for the core layout of most apps. Most app development frameworks and even any frameworks that work with a UI utilize rows and columns for their layouts in some way. Just like on a graph paper or excel, you can place your widgets in the correct row and column to achieve the look that you want to get. With flutter you are able to nest the rows and columns to have more and more accuracy and control of your layout.

ListView

ListView is pretty much a list of Row widgets stacked on top of each other. Except it has two main function that make it…