Layouts

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

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.

Packing widgets

By default, a row or column occupies as much space along its main axis as possible, but if you want to pack the children closely together, set its mainAxisSize to MainAxisSize.min. The following example uses this property to pack the star icons together.

Nesting rows and columns

The layout framework allows you to nest rows and columns inside of rows and columns as deeply as you need. Let’s look at the code for the outlined section of the following layout:.

The outlined section is implemented as two rows. The ratings row contains five stars and the number of reviews. The icons row contains three columns of icons and text.

Note:

To minimize the visual confusion that can result from heavily nested layout code, implement pieces of the UI in variables and functions.

Layouts — Structure map

Clickable & Draggable!

Layouts — Related pages: