C.2. How is layout handled in Flutter? Is there a flexbox equivalent?

Yes! There is a flexbox equivalent. In fact, by default, you’ll almost certainly be using Flex in your Flutter app. Flutter ships with a ton of layout widgets, including Row and Column, which enforce Flex rules on their own. When using those widgets, you can tell their children how to lay out using the properties from justify-content and others that you’re already used to. The following listing shows an example.

Listing 3.1. The Column widget in the counter app

// Column widget example
body: new Center(
  child: new Column(                              1
    mainAxisAlignment: MainAxisAlignment.center,  2
    children: <Widget>[
      new Text(
        'You have pushed the button this many times:',
      ),
      new Text(
        '$_counter',
      ),
    ],
    // ...

• 1 Column is aptly named. It lays out all its children in a vertical fashion.
• 2 This alignment property is similar to flexbox in CSS. It tells Flutter how to lay out the Column children in relationship to each other.

The Row widget behaves like the Column widget, but on a horizontal axis. Finally, in addition to Center, you can use the following properties on MainAxisAlignment:

• Start
• End
• Center
• SpaceAround
• SpaceBetween
• SpaceEvenly

For an in-depth look at Row and Column, read chapter 2.