Skip to content

Commit 32a52fd

Browse files
committed
Remove priority tags to exercise steps, it affects search.
1 parent 9fcdabf commit 32a52fd

File tree

1 file changed

+13
-13
lines changed

1 file changed

+13
-13
lines changed

docs/ff-concepts/layout/building-layout.md

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -9,21 +9,21 @@ keywords: [FlutterFlow, Building Layout, Concepts]
99

1010
# Building Layout
1111

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.
1313

1414
These widgets are categorized into four main types: [Layout Elements](/tags/layout-elements), [Base Elements](/tags/base-elements),
1515
[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.
1616

17-
## Understanding layout concept
17+
## Understanding Layout Concept
1818

1919
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.
2020

2121
:::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).
2323

2424
:::
2525

26-
## Putting layout concept into practice
26+
## Building Layouts: Exercise
2727

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

@@ -36,7 +36,7 @@ The steps to build the given layout are as follows:
3636
3. [Add info section](#3-add-info-section)
3737
4. [Add reviews section](#4-add-reviews-section)
3838

39-
### 1. Sketch the layout
39+
#### 1. Sketch the layout
4040

4141
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.
4242

@@ -61,7 +61,7 @@ A page can only have one parent widget. i.e., you can't have two containers (at
6161

6262
:::
6363

64-
### 2. Add Image section
64+
#### 2. Add Image section
6565

6666
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:
6767

@@ -91,7 +91,7 @@ The top section includes the Image and IconButton widgets. To place the IconButt
9191
</div>
9292
<p></p>
9393

94-
### 3. Add info section
94+
#### 3. Add info section
9595

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

@@ -121,7 +121,7 @@ The info section consists of a few Text widgets inside the Column.
121121
</div>
122122
<p></p>
123123

124-
### 4. Add reviews section
124+
#### 4. Add reviews section
125125

126126
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:
127127

@@ -151,21 +151,21 @@ The review section consists of multiple different widgets. First, add a Column t
151151
</div>
152152
<p></p>
153153

154-
## Common layout widget
154+
## Common Layout Widgets
155155

156156
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:
157157

158-
- [Container](../../resources/ui/widgets/built-in-widgets/container.md)
158+
- [Container](../../resources/ui/widgets/basic-widgets/container.md)
159159
- [Card](../../resources/ui/widgets/built-in-widgets/card.md)
160-
- [ListView](../../resources/ui/widgets/built-in-widgets/list-grid.md)
161-
- [GridView](../../resources/ui/widgets/built-in-widgets/list-grid.md)
160+
- [ListView](../../resources/ui/widgets/composing-widgets/list-grid.md)
161+
- [GridView](../../resources/ui/widgets/composing-widgets/list-grid.md)
162162
- [TabBar](../../ff-concepts/navigation-routing/special-page-navigation/tabbar-widget.md)
163163
- [PageView](../../ff-concepts/navigation-routing/special-page-navigation/pageview-widget.md)
164164
- [Form](../../resources/control-flow/user-interactivity/forms/forms.md)
165165

166166
## Video guides
167167

168-
To learn more about the layout, watch our videos:
168+
To learn more about building layout, watch our videos:
169169

170170
<div style={{
171171
position: 'relative',

0 commit comments

Comments
 (0)