Refactor links after widget hierarchy correction

Author: PoojaB26

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#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).
 
 ### 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) 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/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/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).
 :::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#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',

docs/ff-concepts/state-management/generated-code.md

@@ -30,7 +30,7 @@ Variables within a page are tracked through `StatefulWidget` and are encapsulate
 
 ## Component State
 
-Similar to page state, [**Component State variables**](../../resources/ui/components/custom-components/component-lifecycle.md) are accessible within the component where they are defined. Each component has a corresponding `Model` and `Widget` class. Variables may be passed in from their parent as parameters. Additionally, you can access component state values from its parent Page widget.
+Similar to page state, [**Component State variables**](../../resources/ui/components/component-lifecycle.md) are accessible within the component where they are defined. Each component has a corresponding `Model` and `Widget` class. Variables may be passed in from their parent as parameters. Additionally, you can access component state values from its parent Page widget.
 
 This accessibility is possible because the Model of a component is instantiated within the parent Page model. It utilizes the Provider method `context.read()`, which returns any existing model in the tree before instantiating a new one. Thus, any updates to the state in the component model will reflect in the parent’s instance of that component model.
 

docs/ff-concepts/state-management/state-variables.md

@@ -27,7 +27,7 @@ In FlutterFlow, there are a few types of state variables that you can create:
 ### Creating State Variables
 - To create an **App State variable**, refer to this **[guide](../../resources/data-representation/app-state.md#create-app-state-variable)**.
 - To create a **Page State variable**, refer to this [**guide**](../../resources/ui/pages/page-lifecycle.md#creating-a-page-state).
-- To create a **Component State variable**, refer to this [**guide**](../../resources/ui/components/custom-components/component-lifecycle.md#creating-a-component-state).
+- To create a **Component State variable**, refer to this [**guide**](../../resources/ui/components/component-lifecycle.md#creating-a-component-state).
 
 Note: Users cannot create **widget state variables**. These are automatically exposed by FlutterFlow when a Form widget is used.
 
@@ -36,7 +36,7 @@ Note: Users cannot create **widget state variables**. These are automatically ex
 ### Updating State Variables
 - To update an **App State variable**, refer to this **[guide](../../resources/data-representation/app-state.md#update-app-state-action)**.
 - Refer to the [**Page Lifecycle**](../../resources/ui/pages/page-lifecycle.md) guide to learn about updating **[Page State variables](../../resources/ui/pages/page-lifecycle.md#update-page-state-action)**.
-- Refer to the [**Component Lifecycle**](../../resources/ui/components/custom-components/component-lifecycle.md) guide to learn about updating **[Component State variables](../../resources/ui/components/custom-components/component-lifecycle.md#update-component-state-action)**.
+- Refer to the [**Component Lifecycle**](../../resources/ui/components/component-lifecycle.md) guide to learn about updating **[Component State variables](../../resources/ui/components/component-lifecycle.md#update-component-state-action)**.
 
 <p></p>