You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/ff-concepts/layout/building-layout.md
+13-13Lines changed: 13 additions & 13 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -9,21 +9,21 @@ keywords: [FlutterFlow, Building Layout, Concepts]
9
9
10
10
# Building Layout
11
11
12
-
In FlutterFlow, you build a page layout using Widgets. **Widgets**, such as [Text](../../resources/ui/widgets/built-in-widgets/text.md), [Buttons](../../resources/ui/widgets/built-in-widgets/button.md), [Images](../../resources/ui/widgets/built-in-widgets/image.md), and [Icons](../../resources/ui/widgets/built-in-widgets/icons.md), are visible on the screen. Others, like [Containers](../../resources/ui/widgets/built-in-widgets/container.md), Rows, Columns, and Stacks, are not directly visible but help arrange and position the visible elements on the page.
12
+
In FlutterFlow, you build a page layout using Widgets. **Widgets**, such as [Text](../../resources/ui/widgets/basic-widgets/text.md), [Buttons](../../resources/ui/widgets/basic-widgets/button.md), [Images](../../resources/ui/widgets/basic-widgets/image.md), and [Icons](../../resources/ui/widgets/basic-widgets/icons.md), are visible on the screen. Others, like [Containers](../../resources/ui/widgets/basic-widgets/container.md), Rows, Columns, and Stacks, are not directly visible but help arrange and position the visible elements on the page.
13
13
14
14
These widgets are categorized into four main types: [Layout Elements](/tags/layout-elements), [Base Elements](/tags/base-elements),
15
15
[Page Elements](/tags/page-elements), and [Form Elements](/tags/form-elements). To build a page, you combine different widgets from these categories to get the desired look and feel of your app.
16
16
17
-
## Understanding layout concept
17
+
## Understanding Layout Concept
18
18
19
19
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.
20
20
21
21
:::info
22
-
**Composing widgets** is a fundamental aspect of creating layouts in FlutterFlow. 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**](../../resources/ui/widgets/composing-widgets.md).
22
+
**Composing widgets** is a fundamental aspect of creating layouts in FlutterFlow. 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**](../../resources/ui/widgets/composing-widgets/rows-column-stack).
23
23
24
24
:::
25
25
26
-
## Putting layout concept into practice
26
+
## Building Layouts: Exercise
27
27
28
28
Let's walk through an exercise to build the following layout:
29
29
@@ -36,7 +36,7 @@ The steps to build the given layout are as follows:
36
36
3.[Add info section](#3-add-info-section)
37
37
4.[Add reviews section](#4-add-reviews-section)
38
38
39
-
### 1. Sketch the layout
39
+
####1. Sketch the layout
40
40
41
41
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.
42
42
@@ -61,7 +61,7 @@ A page can only have one parent widget. i.e., you can't have two containers (at
61
61
62
62
:::
63
63
64
-
### 2. Add Image section
64
+
####2. Add Image section
65
65
66
66
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:
67
67
@@ -91,7 +91,7 @@ The top section includes the Image and IconButton widgets. To place the IconButt
91
91
</div>
92
92
<p></p>
93
93
94
-
### 3. Add info section
94
+
####3. Add info section
95
95
96
96
The info section consists of a few Text widgets inside the Column.
97
97
@@ -121,7 +121,7 @@ The info section consists of a few Text widgets inside the Column.
121
121
</div>
122
122
<p></p>
123
123
124
-
### 4. Add reviews section
124
+
####4. Add reviews section
125
125
126
126
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:
127
127
@@ -151,21 +151,21 @@ The review section consists of multiple different widgets. First, add a Column t
151
151
</div>
152
152
<p></p>
153
153
154
-
## Common layout widget
154
+
## Common Layout Widgets
155
155
156
156
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:
0 commit comments