Basics of Flutter
For the previous blogs and videos you guys are pretty much aware about what is flutter, its architecture, and features. In this blog we start some building block of the flutter which are necessary before starting developing the applications.
There is a line for reference of widgets in flutter is the “Everything in Flutter is a Widget”. It means any component which you want to use to developing is a widget. Suppose you want to use some text to show something then the text also is a widget in flutter. Flutter follows a tree means every widget is my be a child of someone or parent of someone. The root of the tree is also a widget like Material App, you have already seen in previous example. This tree is called as widget tree. Some Examples of widgets are like Scaffold, Buttons, Row, Columns, Stack etc.
There are different type of widgets which are define below:-
1. Stateless Widgets
2. Stateful Widgets
As its name suggest stateless widgets haven’t any state which means this widget remains static throughout the app. We can’t modify these widgets. Example: - You are developing an app and you are designing a UI so you have make your stateless because you don’t want to change the layout like height, width of the components.
To use stateless widgets class can extends stateless widget class and define a build function which returns a widget.
Stateful widgets are reverse from the stateless widgets. As its name suggests these widgets have state property. These widgets are not static these can be changed according to the user. These widgets provides a setstate() method when this invoked from an event like onclick from a button or any other event then complete stateful widget redraw by flutter. In stateful widget class extends stateful widget , this class haven’t any return build method , it has a create state method which return a class that extends state class , this class return a widget through build method. This widget is statful widget and can use setstate method.
In above we read that everything in flutter is a widget so that Layouts in flutter are also widgets. Layout are the main component to design any UI for an app. Layout gives the space in which developer can add components. For proper understanding you can assume layouts are empty containers which contain any widget and set the widgets in the container like left, right alignment, margin, padding, border, etc.
Most commonly used layout widgets are
1. Row – Row widget is multichild widget means it can contain many other widgets and those widgets are also can contain other widgets. As its name suggest it align widgets in a Row manner (Horizontally). It contains mainAxisAlignmet , crossAxisAlignment , children etc. properties which we discuss in our upcoming blogs.
2. Column – Column widget is also a multichild widget as same as Row widget. It also contains the properties like mainAxisAlignemt, corssAxisAlignment, children etc. properties. But the main difference between Row and Column is Row align its children in Row manner ( Horizontally ) and Column align its children in Column manner ( Vertically ).
3. Stack – Stack widget is different from both above because above widgets are follow a manner, it can be vertically or horizontally but stack doesn’t follow any manner. If you declare an area a Stack mans you can align any widget to any part of the space of Stack. Its work same as stack means last widget appears on the top and first widget on the bottom of the other widgets. Stack is also a Multichild widgets. You can align widgets in the Stack from Positoned widget, Align Widget, Padding Widget etc. We discuss these in later tutorials.
Gestures – Gestures are the events through which user interact with the UI of the application , like tap on button , drag to scroll the lists , double tap , long press for select something etc. all are come into gestures. Flutter provides a rich set of Gestures so than developer can use any gesture he/she wants. Different types of gestures like
1. Tap Gestures – These Gestures are like onTap , ondoubleTap , onLongPress , onTapdown , onTapdown , Longpress etc.
2. Drag – Drag Gestures vertical drag, horizontal drag etc.
3. Pan – These type gestures like when you touch from finger and drag finger in any direction without releasing it. It contains onPanstart, onPanend etc.