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 insanely useful:
It has scrolling enabled, so you can add as many items to that list and they will just scroll down on your screen. (It also adds padding at the edges of the ListView so it always looks nice)
It only loads the state and all the widgets elements as they become visible while you're scrolling. If you have a ListView of 1,000,000 widgets your app will behave without a single hiccup. It also destroys the states and widget elements as they go out of the view so you can scroll down to the millionth widget without any performance issues.
Stack
Stack widget is just as it sounds. You can stack things on top of one another. Whether it's some text over an image or how instagram creates a little heart over the picture when you like it.
Those are all the basic and very powerful widgets that flutter provides for us. Make sure to look at all the properties when using them, because there is a lot more things they can do that I haven't covered.
Thanks for Reading and Stay Creative!
Follow me on Twitter: @tadaspetra
Top comments (0)