This is a minimal and simple structure for a flutter app. I find this useful while building the basic skeleton of my app.
The most important thing to remember about flutter is that everything is a widget and each widget has its own use case. Here I have classified them in three categories apart from the two highest level widgets MaterialApp() and the Scaffold(). So let’s take a look at them one by one.
MaterialApp( ):
It is the topmost widget of an app which is called from main(). It is used to add material-design specific functionality to the widgets in your app. Generally we use the home property inside our MaterialApp() which is the widget for the default route of the app.
void main() => MaterialApp(
home: Scaffold(
),
);Scaffold():
The Scaffold is main widget that is shown on your app. It is basically the container of all the other apps. If you have just one widget in your app at the beginning it is Scaffold. The Scaffold also houses some of the basic features of your app like AppBar, Body, FloatingActionButton(FAB), BottomNavigationBar etc.
The body of the Scaffold contains all the widgets that you build.
Now what remains are all widgets and we can categorize them in different groups. Here are three that you should understand so that the structure comes to you easily.
Standalone Widgets:
These are the widgets that do not contain other widgets. They have a specific function and are usually contained by other widgets for alignment or styling.
They are the basic building blocks of your app. Some of the examples are-
- Text
- ImageAsset
- Icon
- AppBar
- TextStyle
Single Child Widgets:
These are the widgets that can contain one and only one Widget inside them self. They all have a property called child whose value is another widget. They are useful when you want your Standalone widget to have some Margin, Padding or some alignment from its parent.
Some examples are:
- Center
- Container
- Expanded
- CircleAvatar
- RaisedButton
Multiple Children Widgets:
These are the widgets which contain more that one widget which needs to be placed and aligned together. Most of the time if you have more than one widget in your app you will end up using these widgets as they make the layouts such a piece of cake. They have a property called children which is an array of widgets that it contains.
Some examples are:
- Row
- Column
- Stack
I’ll keep updating the post as I learn important stuff about widgets. For specific widget I may write different posts but this will be constrained to Generic term Widgets only.
Thanks for reading. :)
