Flutter Layout Design

➔ Flutter layouts are created by arranging widgets in a tree structure. The basic rule of Flutter layout is: "Constraint goes down. Size goes up. Parent sets position".

Constraints go down:

The parent widget passes the constraints to its child widget. A constraint is a set of four limits, which are minWidth, maxWidth, minHeight, and maxHeight. A child widget cannot determine its size on its own and must adhere to the boundaries set by its parent.

Sizes Go Up:

Once the child widget receives the constraints from the parent widget, it calculates its desired size within those limits and communicates it to the parent. If necessary, the parent widget can suggest to the child widget to expand its constraints. For example, an Expanded widget tells the child that it must fill the available space of the parent.

Parent Sets Position:

After knowing the sizes of all his children, the parent decides exactly where to place each child in his own space. The child widget does not know its own (x, y) coordinates, it only knows its own size, width, and height.

For Example:

A Row parent will place its children horizontally side by side.

A Column parent will arrange its child widgets vertically from top to bottom.

A Stack parent will place its child widgets one on top of the other.

The Center widget centers its only child widget within its bounds, so that the child is positioned exactly in the middle of the space.

Layout Widgets

The Flutter framework has several built-in layout widgets. A composite widget can be created by using one or more widgets together. Instead of creating the same widget every time it's needed, it's better to create a single composite widget, which acts as a reusable entity and can be reused across applications. Flutter provides multi-child layout widgets like Row, Column, etc., which include multiple widgets within a single parent widget, as well as single child widgets like Center, Container, etc.

Single-Child Layout Widgets

➔ These widgets have only one child and are used to style, position, or size that child.

➔ Common layout widgets for a child include container, center, padding, align, sizedbox, and fittedbox, which are used to control positioning, dimensions, and padding.

➔ Other widgets handle constraints (such as constrainedbox) or intrinsic sizing (such as intrinsicheight).

Multi-Child Layout Widgets

➔ Multi-child layout widgets arrange multiple children in a specific pattern to accommodate all elements in the parent space.

➔ While single-child widgets use the 'child' property, multi-child widgets use a 'children' property that accept a List<Widget>.

Column: This widget arranges child widgets vertically from top to bottom.

Flex: The underlying widget for rows and columns allows you to specify a custom axis (horizontal or vertical) for rows and columns.

GridView: A two-dimensional (2D) scrollable list of widgets and is most commonly used for gallery or dashboard layouts.

ListView: This is a scrollable linear list of widgets and is the most commonly used scrolling widget for lists of items in Flutter.

Row: This widget arranges child widgets horizontally from left to right (or right to left).

Stack: This widget arranges its child widgets in a layered manner, one on top of the other. The first child in the list is the bottom level and the last child is the top level (first in last out).

Wrap: This is similar to row or column, but it automatically breaks into a new line or column if there is no room for it.