لخّصلي

Flutter Layouts are built using widgets, which include both visible elements like images, icons, and text, as well as invisible elements like rows, columns, and grids that arrange and align these visible widgets. Flutter allows for building complex layouts by composing multiple widgets. An example is a layout with three icons and labels, where each icon and label is contained within a column, and the three columns are arranged in a row. The Container widget provides customization options for child widgets, such as adding borders, padding, margins, background colors, and more. In the example, the text widget is placed within a container to add margins, and the entire row is also within a container for additional margin and padding. The overall UI is further controlled by properties like color and text style.

Flutter Layouts
The main concept of the layout mechanism is the widget. We know that flutter assume everything as a
widget. So the image, icon, text, and even the layout of your app are all widgets. Here, some of the things
you do not see on your app UI, such as rows, columns, and grids that arrange, constrain, and align the
visible widgets are also the widgets.
Flutter allows us to create a layout by composing multiple widgets to build more complex widgets. For
example, we can see the below image that shows three icons with a label under each one.
In the second image, we can see the visual layout of the above image. This image shows a row of three
columns, and these columns contain an icon and label.
In the above image, the container is a widget class that allows us to customize the child widget. It is mainly
used to add borders, padding, margins, background color, and many more. Here, the text widget comes
under the container for adding margins. The entire row is also placed in a container for adding margin and
padding around the row. Also, the rest of the UI is controlled by properties such as color, text.style, etc.