Merge pull request #123 from FlutterFlow/pooja/devr-598

Fix widget hierarchy & add more content to Variables

Author: pinkeshmars

docs/ff-concepts/adding-customization/cloud-functions.md

@@ -59,7 +59,7 @@ loading indicator during the logo creation process. Its value is set to *True* b
 
 ### 2. Build a page
 
-Let's add a page that allows users to enter the prompt. To speed up, you can add a page from the template or use [AI Page Gen](../../resources/ui/pages/pages.md#create-an-ai-generated-page). Here is the page added using AI Page Gen, and after some modification, it looks the below:
+Let's add a page that allows users to enter the prompt. To speed up, you can add a page from the template or use [AI Page Gen](../../resources/ui/pages/intro-pages.md#create-an-ai-generated-page). Here is the page added using AI Page Gen, and after some modification, it looks the below:
 
 Also, see how to [build a page layout](../../ff-concepts/layout/building-layout.md) if you want to build a page from scratch.
 

docs/ff-concepts/alerts-notification/alert-dialog.md

@@ -42,7 +42,7 @@ We allow you to define two types of Alert Dialog Actions:
 
 - **Informational Dialog:** To show some information the user should be aware of before interacting with the app. Contains only a single action button.
 - **Confirm Dialog:** This dialog can contain two action buttons. It can trigger the subsequent action based on whether a user confirms the action. It can also be used before performing any non-revertable user action, for example, before deleting a user account.
-- **Custom Dialog**: This is a fully customizable dialog that you can create using [components](../../resources/ui/components/overview.md).
+- **Custom Dialog**: This is a fully customizable dialog that you can create using [components](../../resources/ui/components/intro-components.md).
 
 ### Adding Informational Dialog [Action]
 
@@ -126,7 +126,7 @@ Follow the steps below to add this type of action to any widget:
 
 ### Adding Custom Dialog [Action]
 
-Before you add this action, ensure you [create a component](../../resources/ui/components/custom-components/getting-started.md) that you want to display as a custom dialog. Now follow the steps below to add this type of action to any widget:
+Before you add this action, ensure you [create a component](../../resources/ui/components/creating-components.md) that you want to display as a custom dialog. Now follow the steps below to add this type of action to any widget:
 
 1. Select the **Widget** (e.g., Button) on which you want to add the action.
 2. Select **Actions** from the Properties panel (the right menu), and click **+ Add Action**.

docs/ff-concepts/file-handling/audio/audio-player.md

@@ -182,7 +182,7 @@ To change the title text style:
 
 1. Select the **AudioPlayer** widget from the widget tree or the canvas area.
 2. Move to the properties panel (on the right side of your screen) and scroll down to the **Title Text Style** section.
-3. Find the **Theme Text Style** property and change the style as per instructions [here](../../../resources/ui/widgets/built-in-widgets/text.md#common-text-styling-properties).
+3. Find the **Theme Text Style** property and change the style as per instructions [here](../../../resources/ui/widgets/basic-widgets/text.md#common-text-styling-properties).
 
 
 ### Styling playback duration text
@@ -191,4 +191,4 @@ To change the playback duration text style:
 
 1. Select the **AudioPlayer** widget from the widget tree or the canvas area.
 2. Move to the properties panel (on the right side of your screen) and scroll down to the **Playback Duration Text Style** section.
-3. Find the **Theme Text Style** property and change the style as per instructions [here](../../../resources/ui/widgets/built-in-widgets/text.md#common-text-styling-properties).
+3. Find the **Theme Text Style** property and change the style as per instructions [here](../../../resources/ui/widgets/basic-widgets/text.md#common-text-styling-properties).

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

@@ -9,21 +9,21 @@ keywords: [FlutterFlow, Building Layout, Concepts]
 
 # Building Layout
 
-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.
+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.
 
 These widgets are categorized into four main types: [Layout Elements](/tags/layout-elements), [Base Elements](/tags/base-elements), 
 [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.
 
-## Understanding layout concept
+## 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.
 
 :::info
-**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).
+**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.md).
 
 :::
 
-## Putting layout concept into practice
+## Building Layouts: Exercise
 
 Let's walk through an exercise to build the following layout:
 
@@ -36,7 +36,7 @@ The steps to build the given layout are as follows:
 3. [Add info section](#3-add-info-section)
 4. [Add reviews section](#4-add-reviews-section)
 
-### 1. Sketch the layout
+#### 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.
 
@@ -61,7 +61,7 @@ A page can only have one parent widget. i.e., you can't have two containers (at
 
 :::
 
-### 2. Add Image section
+#### 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:
 
@@ -91,7 +91,7 @@ The top section includes the Image and IconButton widgets. To place the IconButt
 </div>
 <p></p>
 
-### 3. Add info section
+#### 3. Add info section
 
 The info section consists of a few Text widgets inside the Column.
 
@@ -121,7 +121,7 @@ The info section consists of a few Text widgets inside the Column.
 </div>
 <p></p>
 
-### 4. Add reviews section
+#### 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:
 
@@ -151,21 +151,21 @@ The review section consists of multiple different widgets. First, add a Column t
 </div>
 <p></p>
 
-## Common layout widget
+## 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](../../resources/ui/widgets/built-in-widgets/container.md)
+- [Container](../../resources/ui/widgets/basic-widgets/container.md)
 - [Card](../../resources/ui/widgets/built-in-widgets/card.md)
-- [ListView](../../resources/ui/widgets/built-in-widgets/list-grid.md)
-- [GridView](../../resources/ui/widgets/built-in-widgets/list-grid.md)
+- [ListView](../../resources/ui/widgets/composing-widgets/list-grid.md)
+- [GridView](../../resources/ui/widgets/composing-widgets/list-grid.md)
 - [TabBar](../../ff-concepts/navigation-routing/special-page-navigation/tabbar-widget.md)
 - [PageView](../../ff-concepts/navigation-routing/special-page-navigation/pageview-widget.md)
 - [Form](../../resources/control-flow/user-interactivity/forms/forms.md)
 
 ## Video guides
 
-To learn more about the layout, watch our videos:
+To learn more about building layout, watch our videos:
 
 <div style={{
     position: 'relative',

docs/ff-concepts/layout/responsive-widgets/wrap-widget.md

@@ -15,7 +15,7 @@ The Wrap widget is similar to Row and Column as it shows its children one after
 
 Here's an example of how you can use a Wrap widget in your project:
 
-1. First, drag the [**Container**](../../../resources/ui/widgets/built-in-widgets/container.md) widget from the **Layout Elements** tab (in the Widget Panel) or add it directly from the widget tree and set its **width** to **infinity** and **height** to **200**.
+1. First, drag the [**Container**](../../../resources/ui/widgets/basic-widgets/container.md) widget from the **Layout Elements** tab (in the Widget Panel) or add it directly from the widget tree and set its **width** to **infinity** and **height** to **200**.
 
 2. Add the **Wrap** widget from the **Layout Elements** tab inside the Container.
 3. Add the **Button** widget inside the Wrap widget.

docs/ff-concepts/localization-accessibility/add-multiple-languages.md

@@ -139,8 +139,8 @@ You can skip this step if you have already built your page.
 To build a page:
 
 1. Create a page and add the Column widget.
-3. Add a [**Text**](../../resources/ui/widgets/built-in-widgets/text.md) Widget that shows some texts.
-4. Add a [**Button**](../../resources/ui/widgets/built-in-widgets/button.md) to change the language and add some padding around it.
+3. Add a [**Text**](../../resources/ui/widgets/basic-widgets/text.md) Widget that shows some texts.
+4. Add a [**Button**](../../resources/ui/widgets/basic-widgets/button.md) to change the language and add some padding around it.
 
 <div style={{
     position: 'relative',
@@ -427,12 +427,12 @@ Let's build an example of showing the current language code in a Text widget.
 
 To retrieve the current language code:
 
-1. Add the **Column > [Text](../../resources/ui/widgets/built-in-widgets/text.md)** widget to your app.
+1. Add the **Column > [Text](../../resources/ui/widgets/basic-widgets/text.md)** widget to your app.
 2. Move to the property panel and click on the **Set from Variable** text.
 3. Select **Source** as **Internationalization** and **Available Options** as the **Current Language Code**.
 4. (Optional) Set the *Default Variable Value* if you wish to.
 5. Click **Confirm**.
-6. Add [**Button**](../../resources/ui/widgets/built-in-widgets/button.md) widgets with an action to change the language. To change the language manually, find the instructions [here](#changing-app-language-manually).
+6. Add [**Button**](../../resources/ui/widgets/basic-widgets/button.md) widgets with an action to change the language. To change the language manually, find the instructions [here](#changing-app-language-manually).
 
 <div style={{
     position: 'relative',
@@ -494,14 +494,14 @@ Let's build an example of showing the nation/country flag in a Text widget.
 
 To show the language-dependent text:
 
-1. Add the **Column > [Text](../../resources/ui/widgets/built-in-widgets/text.md)** widget to your app.
+1. Add the **Column > [Text](../../resources/ui/widgets/basic-widgets/text.md)** widget to your app.
 2. Move to the property panel and click on the **Set from Variable** text.
 3. Select **Source** as **Internationalization** and **Available Options** as the **Language Dependent Text**.
 4. Click on the language name to open the section and enter your text inside the **Value** input box.
 5. Similarly, enter a value for other languages as well.
 6. (Optional) Set the default value if you wish to.
 7. Click **Confirm**.
-8. Add [**Button**](../../resources/ui/widgets/built-in-widgets/button.md) widgets with an action to change the language. To change the language manually, find the instructions [here](#changing-app-language-manually).
+8. Add [**Button**](../../resources/ui/widgets/basic-widgets/button.md) widgets with an action to change the language. To change the language manually, find the instructions [here](#changing-app-language-manually).
 
 <div style={{
     position: 'relative',

docs/ff-concepts/localization-accessibility/language-selector.md

@@ -46,7 +46,7 @@ To add LanguageSelector to your project:
 1. Make sure you have added multi-language support to your app. If you haven't already done so, find the instructions here.
 2. First, drag the **Column** widget from the **Layout Elements** tab (in the Widget Panel).
 3. Now, add the **LanguageSelector** widget (inside Column) by dragging it from the **Base Elements** tab or adding it directly from the widget tree. Align it in the center.
-4. Add the [**Text**](../../widgets/built-in-widgets/text.md) widget to show the text.
+4. Add the [**Text**](../../resources/ui/widgets/basic-widgets/text.md) widget to show the text.
 5. Translate the text by navigating to Settings and Integration -> General -> Languages -> App Content Translations -> Page Name -> Your Text.
 6. Find the language dropdown above the canvas and try changing it to other languages and see the translated text appear on the canvas.
 
@@ -79,7 +79,7 @@ To add LanguageSelector to your project:
 
 ## Customization
 
-You can customize the behavior of this widget using the various properties available under the [properties panel](../../../../intro/ff-ui/builder.md#navigation-menu).
+You can customize the behavior of this widget using the various properties available under the [Properties Panel](../../resources/ui/widgets/widget-properties.md).
 
 ### Customizing Flag
 

docs/ff-concepts/navigation-routing/bottom-sheet.md

@@ -47,9 +47,9 @@ Below are the types of Bottom Sheet actions:
 
 Follow the steps below to add an action that opens the bottom sheet:
 
-1. First, create a bottom sheet [component](../../resources/ui/components/overview.md).
+1. First, create a bottom sheet [component](../../resources/ui/components/intro-components.md).
 :::tip
-You can also create one from the 'BottomSheet' [**templates**](../../resources/ui/components/custom-components/getting-started.md#creating-a-component-from-a-popular-template).
+You can also create one from the 'BottomSheet' [**templates**](../../resources/ui/components/creating-components.md#creating-a-component-from-a-popular-template).
 :::
 
 <div style={{
@@ -88,7 +88,7 @@ You can also create one from the 'BottomSheet' [**templates**](../../resources/u
 
     ![Set Background and Barrier color](imgs/bottom-sheet-background-color.png)
 
-9. You can also [pass parameters](../../resources/ui/components/custom-components/using-components.md#pass-down-values) to a bottom sheet component.
+9. You can also [pass parameters](../../resources/ui/components/using-components.md#pass-down-values) to a bottom sheet component.
 10. By default, this type of action blocks the following action (if any) from triggering while this action is in progress. (i.e., meaning the bottom sheet is present on the screen). However, in some cases, you might want to allow the next action (after this) to execute, for example, making an API call immediately after showing the bottom sheet. To do so, enable **Non Blocking** option.
 11. By default, **Non Dismissble** option closes the bottom sheet when you click outside of it. To disable this behavior, enable this option.
 12. With **Enable Drag** option, you can open and close the bottom sheet using a swipe gesture.

docs/ff-concepts/navigation-routing/special-page-navigation/pageview-widget.md

@@ -22,7 +22,7 @@ To add the PageView widget to your app:
 2. By default, it adds three pages and shows the first one in the canvas. In the widget tree, it is represented as **PageView Page**. To see another page in the canvas, move to the **Properties Panel >** set the **Active Page** to the page you want to see.
 3. To add a new page, move to the **Properties Panel > Active Page >** click **+ Add Page**.
 4. To delete any page, select the **PageView Page** (which you want to delete) from the widget tree or the canvas area and press the **Delete** key on the keyboard.
-5. By default, PageView Page contains an [Image](../../../resources/ui/widgets/built-in-widgets/image.md) widget; however, you can customize it as per your requirement. For example, if you want to use the PageView widget to create an onboarding experience, you could wrap (`⌘` + B) the default image widget inside the Stack widget and then add some more widgets.
+5. By default, PageView Page contains an [Image](../../../resources/ui/widgets/basic-widgets/image.md) widget; however, you can customize it as per your requirement. For example, if you want to use the PageView widget to create an onboarding experience, you could wrap (`⌘` + B) the default image widget inside the Stack widget and then add some more widgets.
 
 <div style={{
     position: 'relative',
@@ -55,7 +55,7 @@ The PageView widget is an incredibly versatile widget that can be utilized in a
 
 In such situations, you might consider adding an infinite scroll on this widget, which automatically loads the new pages as you swipe.
 
-We have already covered how to [add infinite scroll on ListView](../../../resources/ui/widgets/built-in-widgets/list-grid.md#adding-infinite-scroll) widget, which will give you an overall idea of how to add infinite scroll on the PageView widget as well.
+We have already covered how to [add infinite scroll on ListView](../../../resources/ui/widgets/composing-widgets/list-grid.md#adding-infinite-scroll) widget, which will give you an overall idea of how to add infinite scroll on the PageView widget as well.
 
 ## Customizing
 

docs/ff-concepts/navigation-routing/special-page-navigation/tabbar-widget.md

@@ -24,7 +24,7 @@ To add the TabBar widget to your app:
 3. To customize the Tab:
     1. Select the **Tab >** Move to **Properties Panel**.
     2. Use the **Text** property to change the label of the Tab.
-    3. You can also [add Icon](../../../resources/ui/widgets/built-in-widgets/icons.md), align it horizontally, and set its margin. **Tip**: To only display Icon, remove the Text value.
+    3. You can also [add Icon](../../../resources/ui/widgets/basic-widgets/icons.md), align it horizontally, and set its margin. **Tip**: To only display Icon, remove the Text value.
 4. Inside the **TabBar Page**, you can replace the existing **Text** widget with any widget of your choice.
 5. To add a new tab, move to the **Properties Panel > Active Page >** click **+ Add Page**.
 
@@ -73,7 +73,7 @@ To customize the tab label:
 1. Select the **TabBar** widget > move to the **Properties Panel > Label Properties**.
 2. To set different colors when the tab is selected and unselected, use the **Selected Color** and **Unselected Color** properties.
 3. To add some space around the label, use the **Label Padding** property.
-4. Use the **Label Style** property to change its [styling](../../../resources/ui/widgets/built-in-widgets/text.md#common-text-styling-properties). You can also set the label styling for the unselected tab text by enabling the **Custom Unselected Label Style**.
+4. Use the **Label Style** property to change its [styling](../../../resources/ui/widgets/basic-widgets/text.md#common-text-styling-properties). You can also set the label styling for the unselected tab text by enabling the **Custom Unselected Label Style**.
 
 <div style={{
     position: 'relative',