UI & Layout 101

In FlutterFlow, you create the design of a page using things called Widgets. These Widgets are divided into four main types: Layout Elements, Base Elements, Page Elements, and Form Elements.

Some Widgets like Text, Buttons, Images, and Icons can be seen on the screen. Others, like Containers, Rows, Columns, and Stacks, are not visible, but they help in putting everything in the right place on the page.

To build a page, you pick and combine different widgets from these groups. It's like putting together building blocks to create the look and feel of your app. By using these widgets in the right way, you can make the app look just the way you want it to.

In this guide, we'll cover the following:

Understanding layout concept

One of the widely used layout patterns is to display widgets in a vertical or a horizontal direction. To display widgets vertically, you can use the Column widget. Whereas to show widgets horizontally, you can use the Row widget. In case you need to display one widget on top of the other, use the Stack widget.

You use the Column, Row, and Stack widgets to arrange items on the screen. Each of these widgets can have a list of children, which are other widgets. The fun part is that a child can also be another Column, Row, or Stack, allowing you to mix and match them. This means you can put a Row inside a Column, a Stack inside a Row, and so on.

It's like building blocks, letting you create complex layouts by fitting them together. See in the picture below.

You can specify how a Column, Row, and Stack aligns its children, both vertically and horizontally.

See how to change the vertical and horizontal alignment for the Column widget.
See how to change the horizontal and vertical alignment for the Row widget.
See how to change the alignment for the Stack widget.

For the Column and Row widget, you can also specify how child widgets use the available space.

The following figure shows how you can combine or nest several widgets to build a layout:

Putting layout concept into practice

Now that you know the basics of building the layout, it's time to put the learnings into practice. In this exercise, you'll build the following layout:

The steps to build the layout are as follows:

1. Create a new project and prepare a page

The very first step is to create a new project. After the project creation, you will have the default 'HomePage' created with a basic appbar added to the page. To get started with building the layout, you can delete the default AppBar widget and only keep the Column widget.

2. Sketch the layout

When you are getting started with building apps, this step is very crucial. Before you actually start adding widgets to the page, sketch a picture of how the main layout will be broken into smaller parts.

After that, identify the widgets that can replace those sections, such as Column, Row, and Stack. Once you have enough idea of what widgets to use, you can start adding widgets. This exercise helps you better understand the layout and makes the overall process faster.

Splitting the given layout into sections looks like this:

In the figure above, the main section is replaced with the Column widget and is divided into smaller sections. These smaller sections are then formed into widgets such as Image, Text, Row, and Stack. All the smaller sections are added as the child of the Column (main) widget.

A page can only have one parent widget. i.e., you can't have two containers (at the same level) inside the HomePage. For that, you can wrap the two containers inside the Column widget, which makes the Column widget a single parent.

The next step is to carefully look at the smaller sections and, if required, divide them into further small sections and replace them with the appropriate widget. You can repeat this process until you achieve the desired level of granularity.

Splitting the smaller section further looks like this:

3. Add top section

The top section comprises the Image and Text widgets. You can place these widgets as a child of the Column widget.

Here's how you build the top section:

Select the page.
Inside the Column widget, drag the Image widget from the Base Elements tab, head over to the properties panel, and set its Width to inf (infinity) and Height to 450 PX.
1. Find the Path property and enter the URL for the image.
Inside the Column, add one more widget, i.e., the Text widget, and set its text and Theme Text Style to Headline Large.
Now, set its Left padding to 12 and Top padding to 20. Also, set its Alignment to center-left, i.e., (Horizontal:-1, Vertical:0).

4. Show overlapping images

Now, you'll build the layout for displaying the overlapping images. As a rule of thumb, whenever you need to build an overlapping UI (i.e., one widget on top of another), you should use the Stack widget.

Here's how you use the Stack widget to build the overlapping image UI:

Below the title, add the Stack widget from the Layout Elements tab and set its Left and Right padding to 12 and Top padding to 16.
Add a few CircleImage widgets inside the Stack and set the Radius to 58.
Select the CircleImages one by one and drag to change the alignment.

5. Display Stats

To display the statistics, you can use a combination of the Text and Image widget. The steps to build the Stats UI are as follows:

Below the overlapping images UI, add the Row widget from the Layout Elements tab and set its Main Axis Alignment to Space Evenly.
Inside the Row widget, add a Column widget.
Inside Column, add the Text widget and set its Theme Text Style to Title Large.
Add another Text widget and set its Theme Text Style to Body Medium.
Now add the Image widget and set its image either from Network or Asset. Also, set its Height and Width to 20.
Copy the Column widget (Inside of the Row) and paste it twice inside the Row and then change the text and image values.

6. Show description

To show the description details, you can simply use the Text widget with some padding around it and provide the text.

7. Final touch

You may have a long description text that won't fit on the screen and in that case, you might see an overflow error that looks like this.

This is because all the inner widgets are placed under the Column, and the Column widget does not support scrolling. So the final step here is to replace the Column widget with the ListView widget because the ListView can scroll the content.

Here's what the widget tree should look like:

Congratulations on building your first layout! When you run the app, it should look like the image shown at the start of this section.

Apart from Row, Column, and Stack widgets, there are some other widgets that are widely used for building the page layout. Here are some of them: