The centerpiece of a Flutter application is widgets. In fact, these are the visual components that make up the graphical interface. The basic idea is that you build your UI from widgets. Widgets describe how the interface elements should look, taking into account their current configuration and state. When the state of the widget changes, the widget rebuilds its description, which the framework further distinguishes from the previous description, in order to determine the minimum state changes required in the base rendering tree to move from one state to another.
Flutter comes with a set of powerful basic widgets, of which the following are very commonly used:
1.Text
Text Widget is used to display text and customize it. Note that, it always display String of text, so to use numbers, you need to convert them into String first. If you want the Text react to touch events, wrap it in a GestureDetector widget with a GestureDetector.onTap handler.
2.Container
Container is one of the most basic and important widgets. You can use it as a parent widget to customize and set constraints for child widget. The Container widget lets you create a rectangular visual. The container can be decorated with a BoxDecoration, with s a background, frame or shadow. A container can also have margins, padding, and constraints applied to its size. In addition, the Container can be transformed in 3D using a matrix.
3.Row
If you want to display your widgets horizontally, wrap them inside Row widget. Like column, Row can also take any number of child widget and arrange them according to defined constraints. Their design is based on the flexbox layout model in the WEB.
4.Column
If you want to display your widgets vertically, wrap them inside Column widget. Column can take any number of child widget and arrange them according to defined constraints. The Column widget does not scroll. If you have a line of widgets and want them to be able to scroll if there is insufficient room, consider using a ListView.
5.Expanded
It expands the child widget inside a Column or Row, to fill the available space. If multiple children are expanded, the available space is divided among them according to the flex factor. To be used only inside a column or a row, otherwise it will throw an error. Expanded widget helps to solve the problem of layout occuring because of different screen sizes.
6.Image
This widget is used for displaying image. This image can be Network image, Asset image or image from memory. If you are using Asset inage, you need to declare the images folder first. If you are using Network Image, don’t forget to use LoadingBuilder, to show user the image is loading.
7.SizedBox
SizedBox is basically a box with a fixed size. All it does is occupy space on the screen. It is mostly used to add spacing between 2 widgets. If it has a child widget, the child is forced to take defined dimensions.
8.AppBar
It is basically used to display title of the screen. If you have similar screens in the app, it is good practice to display the screen name, to avoid confusion. Furthermore, AppBar helps to navigate through the screens. Try it once to know what it is capable of.
9.Scaffold
This widget is needed to draw basic material widgets on the screen. It acts as the background of the app and houses AppBar and BottomNavigatorBar.
10.SafeArea
SafeArea is used to prevent a widget from interfering with system elements like status bar, notch, bottom iPhone bar.
