# Building Layout

> This page is about FlutterFlow Studio (the visual builder), not FlutterFlow (the app builder you use by describing your app).

URL: https://docs.flutterflow.io/concepts/layouts

Learn how to build layout in your FlutterFlow Studio app.

In FlutterFlow Studio, you build a page layout using Widgets. **Widgets**, such as [Text](https://docs.flutterflow.io/resources/ui/widgets/text), [Buttons](https://docs.flutterflow.io/resources/ui/widgets/button), [Images](https://docs.flutterflow.io/resources/ui/widgets/image), and [Icons](https://docs.flutterflow.io/resources/ui/widgets/icons), are visible on the screen. Others, like [Containers](https://docs.flutterflow.io/resources/ui/widgets/container), Rows, Columns, and Stacks, are not directly visible but help arrange and position the visible elements on the page.

These widgets are categorized into four main types: Layout Elements, Base Elements, 
[Page Elements](https://docs.flutterflow.io/resources/ui/pages/scaffold), and Form Elements. To build a page, you combine different widgets from these categories to get the desired look and feel of your app.

## Understanding Layout Concept

One of the most common layout patterns is to arrange widgets either **vertically** or **horizontally**. To display widgets in a vertical layout, use the **Column** widget. For a horizontal layout, use the **Row** widget. If you need to place one widget on top of another, use the **Stack** widget.

:::note
**Composing widgets** is a fundamental aspect of creating layouts in FlutterFlow Studio. It involves combining different widgets to form a cohesive and functional user interface. Understanding how to effectively compose widgets allows you to design complex layouts and create intuitive, user-friendly apps. Learn more about composing widgets [**here**](https://docs.flutterflow.io/resources/ui/widgets/composing-widgets/rows-column-stack).

:::

## Building Layouts: Exercise

Let's walk through an exercise to build the following layout:

![build-layout-page.avif](https://docs.flutterflow.io/assets/images/build-layout-page-708a22947554f59924e51a2e876092f7.avif)

The steps to build the given layout are as follows:

1. [Sketch the layout](#1-sketch-the-layout)
2. [Add Image section](#2-add-image-section)
3. [Add info section](#3-add-info-section)
4. [Add reviews section](#4-add-reviews-section)

#### 1. Sketch the layout

When you are just starting out 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.

Breaking down the given layout into sections looks like this:

![breaking-main-layout-2.png](https://docs.flutterflow.io/assets/images/breaking-main-layout-2-cd4430869a74e015f6e0021330903d14.avif)

Next, identify the widgets that can replace those sections, such as Column, Row, and Stack. Once you have a clear idea of which widgets to use, you can begin adding them.

In the figure above, the main section is replaced with the Column widget and is divided into smaller sections. The next step is to look carefully at these 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:

![divide-smaller-section-2.png](https://docs.flutterflow.io/assets/images/divide-smaller-section-2-b2b0ea71f1867fc5686d49de5168e1d1.avif)

:::note

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

![The widget tree of a page whose body is a single Column that holds two Container widgets.](https://docs.flutterflow.io/assets/images/column-as-single-parent-light-9c9e0c38dfd11cedc8565f487463d3fc.png)

:::

#### 2. Add Image section

The top section includes the Image and IconButton widgets. To place the IconButton on top of the Image, wrap them inside a Stack widget. Here's how you do it:

<div style={{
    position: 'relative',
    paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
    height: 0,
    width: '100%'}}>
    <iframe 
        src="https://demo.arcade.software/a4smfd758Oe1RLVUp24V?embed&show_copy_link=true"
        title=""
        style={{
            position: 'absolute',
            top: 0,
            left: 0,
            width: '100%',
            height: '100%',
            colorScheme: 'light'
        }}
        frameborder="0"
        loading="lazy"
        webkitAllowFullScreen
        mozAllowFullScreen
        allowFullScreen
        allow="clipboard-write">
    </iframe>
</div>
<p></p>

#### 3. Add info section

The info section consists of a few Text widgets inside the Column.

<div style={{
    position: 'relative',
    paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
    height: 0,
    width: '100%'}}>
    <iframe 
        src="https://demo.arcade.software/G3Z0YSwwQbJgaeZ1qEGL?embed&show_copy_link=true"
        title=""
        style={{
            position: 'absolute',
            top: 0,
            left: 0,
            width: '100%',
            height: '100%',
            colorScheme: 'light'
        }}
        frameborder="0"
        loading="lazy"
        webkitAllowFullScreen
        mozAllowFullScreen
        allowFullScreen
        allow="clipboard-write">
    </iframe>
</div>
<p></p>

#### 4. Add reviews section

The review section consists of multiple different widgets. First, add a Column to separate the reviewer's information (image and name) from the actual review text. Next, display the reviewer's information inside a Row widget using the CircleImage and Text widgets. Here’s exactly how you do it:

<div style={{
    position: 'relative',
    paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
    height: 0,
    width: '100%'}}>
    <iframe 
        src="https://demo.arcade.software/q50gJ2Unh0gJ0CGigzDM?embed&show_copy_link=true"
        title=""
        style={{
            position: 'absolute',
            top: 0,
            left: 0,
            width: '100%',
            height: '100%',
            colorScheme: 'light'
        }}
        frameborder="0"
        loading="lazy"
        webkitAllowFullScreen
        mozAllowFullScreen
        allowFullScreen
        allow="clipboard-write">
    </iframe>
</div>
<p></p>

## Common Layout Widgets

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:

- [Container](https://docs.flutterflow.io/resources/ui/widgets/container)
- [Card](https://docs.flutterflow.io/resources/ui/widgets/built-in-widgets/card)
- [ListView](https://docs.flutterflow.io/resources/ui/widgets/composing-widgets/list-grid)
- [GridView](https://docs.flutterflow.io/resources/ui/widgets/composing-widgets/list-grid)
- [TabBar](https://docs.flutterflow.io/concepts/navigation/tabbar)
- [PageView](https://docs.flutterflow.io/concepts/navigation/pageview)
- [Form](https://docs.flutterflow.io/resources/forms)

## Video guides

To learn more about building layout, watch our videos:

<div style={{
    position: 'relative',
    paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
    height: 0,
    width: '100%'}}>
    <iframe 
        src="https://www.youtube.com/embed/vQ4dAa8swzU"
        title=""
        style={{
            position: 'absolute',
            top: 0,
            left: 0,
            width: '100%',
            height: '100%',
            colorScheme: 'light'
        }}
        frameborder="0"
        loading="lazy"
        webkitAllowFullScreen
        mozAllowFullScreen
        allowFullScreen
        allow="clipboard-write">
    </iframe>
</div>
<p></p>

<div style={{
    position: 'relative',
    paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
    height: 0,
    width: '100%'}}>
    <iframe 
        src="https://www.youtube.com/embed/glit6YCj0B0"
        title=""
        style={{
            position: 'absolute',
            top: 0,
            left: 0,
            width: '100%',
            height: '100%',
            colorScheme: 'light'
        }}
        frameborder="0"
        loading="lazy"
        webkitAllowFullScreen
        mozAllowFullScreen
        allowFullScreen
        allow="clipboard-write">
    </iframe>
</div>
<p></p>

<div style={{
    position: 'relative',
    paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
    height: 0,
    width: '100%'}}>
    <iframe 
        src="https://www.youtube.com/embed/8O4mQKxPn9c"
        title=""
        style={{
            position: 'absolute',
            top: 0,
            left: 0,
            width: '100%',
            height: '100%',
            colorScheme: 'light'
        }}
        frameborder="0"
        loading="lazy"
        webkitAllowFullScreen
        mozAllowFullScreen
        allowFullScreen
        allow="clipboard-write">
    </iframe>
</div>
<p></p>