Flutter Layouts

Hello, Now that we understand how widgets works, it’s now time to start building awesome layouts! As everything is widget(s) in Flutter, the layout model is also a widget. Text, Image,… Everything you see in an app is widgets for Flutter. We are so going to build layouts with widgets into widgets into widgets….

Everything is widget

Here’s a diagram of the widget tree:

We can here find a widget we have already seen : Text. This is the leaf of this tree as it looks like the final touch of this layout. We can simply understand that we’ll mainly end our layouts with the text part.

Start from the top, the layout is defined within a Container. That is a widget class that allows you to customize its child widget. Use a Container when you want to add padding, margins, borders, or background color, to name some of its capabilities.

A row is set into the container to add padding to this one. The rest is a three columns structure where we have an Icon widget and a text just under (Set by the container).

Common Widgets

Flutter comes with a lot of predefined widgets. You can found them in the widget catalog. They are well split into different categories to let you find what you need the easy way. Pay attention that you can also retrieve what you want within the API. The widget pages in the API docs often make suggestions about similar widgets that might better suit your needs.

Let’s talk about two must have widgets:

Container

This widget can contain other widgets. They are defined as children in the tree structure. Those widgets allow to define several properties such as:

• alignment
• constraints (for size constraints)
• padding (for space padding)
• decoration
• transform (for geometrical transformation)

Here is the constructor: Container({Key key, AlignmentGeometry alignment, EdgeInsetsGeometry padding, Color color, Decoration decoration, Decoration foregroundDecoration, double width, double height, BoxConstraints constraints, EdgeInsetsGeometry margin, Matrix4 transform, Widget child, Clip clipBehavior: Clip.none})

Row & Column

I present here both Row and Column as they do quite the same job except for the orientation.

Row organizes its children horizontally and Column do the same but vertically. They both define a mainAxisAlignment and a crossAxisAlignment that define how the children must be displayed on the main axis and on the cross axis of the widget. For a row main axis is horizontal and vertical for the cross axis as previously said. And of course, it’s the opposite for the Column widget.

Here is the column constructor : Column({Key key, MainAxisAlignment mainAxisAlignment: MainAxisAlignment.start, MainAxisSize mainAxisSize: MainAxisSize.max, CrossAxisAlignment crossAxisAlignment: CrossAxisAlignment.center, TextDirection textDirection, VerticalDirection verticalDirection: VerticalDirection.down, TextBaseline textBaseline, List<Widget> children: const <Widget>[]})

and the row constructor: Row({Key key, MainAxisAlignment mainAxisAlignment: MainAxisAlignment.start, MainAxisSize mainAxisSize: MainAxisSize.max, CrossAxisAlignment crossAxisAlignment: CrossAxisAlignment.center, TextDirection textDirection, VerticalDirection verticalDirection: VerticalDirection.down, TextBaseline textBaseline: TextBaseline.alphabetic, List<Widget> children: const <Widget>[]})

Constraints

To fully understand Flutter’s layout system, you need to learn how Flutter positions and sizes the components in a layout. This is going to be our next article!