As we’ve discussed, all elements on the screen in Flutter are a Widget. One interesting thing to note however, is there are two main categories of widgets, and that doesn’t mean stateless and stateful, rather those which only have a single child, and those which allow for children.
Single Child Widgets
These widgets will have special purposes and allow only a single child. Now that child may be a child with multiple children, but they have only one child.
An example of this might be the Center Widget which centers the child with respect to the parent.
Some examples of the Single Child Widgets include:
- Align – Aligns a child within itself. It takes a double value between -1 and 1, for both the vertical and horizontal alignment.
- Baseline
- AspectRatio − It attempts to size the child widget to the specified aspect ratio
- ConstrainedBox – Imposes size constraints on its child, offering control over the minimum or maximum size.
- Expanded – Allows a child of a
RoworColumnto shrink or grow to fill any available space. - FittedBox − It scales the child widget and then positions it according to the specified fit.
- Flexible – Allows a child of a
RoworColumnto shrink or grow to fill any available space. - LayoutBuilder – Builds a widget that can reflow itself based on its parents size.
- LimitedBox
- OffStage
- OverflowBox
- SizedBox
- SizedOverflowBox
- Transform
Widgets that Allow Multiple Children
On the other hand, you have widgets that allow for multiple children. Each one of these may provide a different style layout for their children compared to other options.
These widgets are:
- Column − Allows to arrange its children in a vertical manner.
- Expanded − Used to make the children of Row and Column widget to occupy the maximum possible area.
- Flow − Similar to
CustomMultiChildLayout, but more efficient because it’s performed during the paint phase rather than the layout phase.. - GridView − Allows to arrange its children as gallery style grid.
- ListView − Allows to arrange its children as list.
- Row − Allows to arrange its children in a horizontal manner.
- Stack − Layers and positions multiple children relative to the edges of the
Stack. Functions similarly to position-fixed in CSS. - Table − Uses a standard table based method for combining rows and columns of children in a tabular fashion.
Combining Widgets
Knowing how to combine the widgets to allow you to display what you want is really important, especially since you can create your own Widgets to use repeated options in your app.
For example, you might want a product page, where you have a “hero” image at the top, but then display the product name and description underneath. Under that, you might have buttons to save it to your favorites, or add it to your shopping cart. Because the buttons are small, you might place them side by side.
This means, using a row would be important, until you get to your last row, which will include a column for holding its children. The options to rearrange, position, and add new elements to display can be cause for needing to use even more of these layout options.
I always recommend staying as simple as you can, and only adding complexity as it is necessary to make it easier to develop and less intensive to build and layout.
The Children of Flutter Widgets was originally found on Access 2 Learn
