lutter is an open-source User Interface (UI) development kit. It is used to develop cross platform applications for Android, IOS, Linux, Mac, Windows etc.
Flutter is made up of widgets. Widget is a way to declare and construct UI, Widget is a lot more than structural elements like buttons, text, image, list or slider.
A widget might help display something, it might help define design, it might help with layout it might handle user interaction. So you can consider that widget is a blueprint and flutter uses this blueprint to create an interface. Also note that in flutter everything is a widget even the app itself.
Flutter divides widgets into two categories:
- Stateless Widgets
- Stateful Widgets
Stateless Widgets: A Stateless Widget is a widget that describes part of the User Interface by building a group of associated widgets that describe the User Interface in a more definitive way. A Stateless Widget are those widgets whose state cannot be altered once they are built therefore, any amount of change in the variables, icons, buttons, or retrieving data cannot change the state of the app. Examples : Icon, IconButton and Text.
Stateful Widgets: A Stateful Widget is a dynamic widget which means it can keep track of changes and update the UI based on those changes. It can change its appearance in response to events triggered by user interaction or when it receives data. This is why when building a screen/page it is built in a stateless widget so that the screen can be interacted with and it is able to receive data. Examples: CheckBox, InkWell, Form and TextField.
There are several types of widgets in flutter such as Appbar, Container, Column, Icon, Image, Row, Text, Padding, Just to name a few.
Appbar: This is a type of widget that displays the application bar in an app. An app bar consists of a toolbar and potentially other widgets, such as a TabBar and a FlexibleSpaceBar.
Container: A convenience widget that combines common painting, positioning, and sizing widgets. This positions widgets inside the Container widget to the specifications of the container widget.
Column: A column widget lays out a list of child widgets in the vertical direction. Everything in the column widget is vertically laid out.
Image: This is a widget that displays an image, without this widget an image cannot be displayed in an application.
Row: Unlike the Column widget the Row widget lays out a list of child widgets in the horizontal direction. Every widget identified inside the column widget is laid out in a vertical direction.
Text: Text Widget displays the text in an application. Under the text widget you can change the size of the font, the font family, the weight of the font and the color of the font.
Padding: The Padding widget allows you to resize and size an image, text, icon, etc. in a container. The padding widget allows you to properly place and center your widget in order to create an organized UI.
With the use of widgets in flutter it makes the development kit easier to understand. Widgets are very convenient, for example, if I would like to input an image and resize it, I would just type in the image widget and add the padding widget to my image. Too effectively use widgets ensure you first identify the stateless or stateful widget category before you start. As stated previously a stateful widget is used to primarily in the creation of pages/screens in order to be able to track the changes in the UI and update the changes. After identifying the stateful widgets you can then begin to input the various other widgets to create your preferred UI. Stateless widget allows you identify a part of your UI in a more definitive way. Widgets should be used in the order of how you would like your UI to be displayed. Overall the use of widgets in flutter allows for a well-constructed UI.