Flutter: Layouts

 

Layouts in Flutter

The core of Flutter’s layout mechanism is widgets. In Flutter, almost everything is a widget—even layout models are widgets. The images, icons, and text that you see in a Flutter app are all widgets. But things you don’t see are also widgets, such as the rows, columns, and grids that arrange, constrain, and align the visible widgets.

You create a layout by composing widgets to build more complex widgets. For example, the first screenshot below shows 3 icons with a label under each one:

 

Lay out a widget

How do you layout a single widget in Flutter? This section shows you how to create and display a simple widget. It also shows the entire code for a simple Hello World app.

In Flutter, it takes only a few steps to put text, an icon, or an image on the screen.

1. Select a layout widget

Choose from a variety of layout widgets based on how you want to align or constrain the visible widget, as these characteristics are typically passed on to the contained widget.

This example uses Center which centers its content horizontally and vertically.

2. Create a visible widget

For example, create a Text widget:

Text('Hello World'),

Create an Image widget:

Image.asset(
  'images/lake.jpg',
  fit: BoxFit.cover,
),

Create an Icon widget:

Icon(
  Icons.star,
  color: Colors.red[500],
),

3. Add the visible widget to the layout widget

All layout widgets have either of the following:

• A child property if they take a single child—for example, Center or Container
• A children property if they take a list of widgets—for example, Row, Column, ListView, or Stack.

Add the Text widget to the Center widget:

Center(
  child: Text('Hello World'),
),

4. Add the layout widget to the page

A Flutter app is itself a widget, and most widgets have a build() method. Instantiating and returning a widget in the app’s build() method displays the widget.