Widgets are the heart of a Flutter application. These are the visual components that comprise the graphical interface. The core notion is that you construct your UI out of widgets. Widgets define how to interface elements should appear while taking into consideration their current configuration and state. When a widget’s state changes, it rebuilds its description. The framework differentiates from the previous definition to identify the minimum state changes required in the base rendering tree to shift from one state to another.
Flutter comes with several substantial basic widgets, the most prevalent of which are:
1. Text
Text Widgets are used to display and customize the Text. It should be noted that it always shows a String of Text; thus, if you want to utilize numbers, you must first convert them to a String. Wrap the Text in a Gesture Detector widget with a Gesture Detector on Tap handler if you want it to respond to touch events.
2. Container
One of the most fundamental and significant widgets is the Container. It can be used as a parent widget to configure and constrain child widgets. You can make a rectangle visual with the Container widget. A BoxD ecoration, such as a backdrop, frame, or shadow, can be used to adorn the Container. Margins, padding, and limitations can also influence a container’s size. A matrix can also be used to transform the Container in 3D.
3. Row
Wrap your widgets inside a Row widget to display them horizontally. Row, like column, can take an unlimited number of child widgets and arrange them according to constraints. Their design is based on the WEB’s flexbox layout concept.
4. Column
Wrap your widgets inside a Column widget to display them vertically. The column can contain any number of child widgets and organize them following the constraints specified. The Column widget does not support scrolling. Consider utilizing a ListView if you have a line of widgets and want them to scroll if there isn’t enough area.
5. Expanded
It enlarges the child widget contained within a Column or Row to fill the available space. When more than one child is expanded, the available space is split based on the flex factor. It should only be used within a column or row; otherwise, it will produce an error. The expanded widget aids in the resolution of layout issues that arise as a result of several factors.
6. Image
This widget is used to show a picture. This image could be a network image, an asset image, or a memory image. If you are using an Asset image, you must first define the images folder. If you’re utilizing Network Image, remember to utilize Loading Builder to show the image loading.
7.SizedBox
SizedBox is essentially a fixed-size box. It only takes up space on the screen. It is most commonly used to increase the distance between two widgets. If it contains a child widget, the child is compelled to take the dimensions specified.
8. AppBar
It is mainly used to display the screen’s title. It is good to show the screen name if you have similar panels in the app to avoid misunderstanding. Additionally, AppBar aids with screen navigation. Try it out once to see what it’s capable of.
9. Scaffold
This widget is required to draw basic material widgets on the screen. It serves as the app’s background and houses the AppBar and BottomNavigatorBar.
10.SafeArea
Safe area prevents a widget from interfering with system elements like the status bar, notch, and bottom iPhone bar.
