Refactor ui-building-blocks folder

Author: PoojaB26

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

@@ -48,7 +48,7 @@ Here are the step-by-step instructions to build such an example:
 ### 1. Add page state variables
 
 For this example, you'll need to set up two 
-[Page State variables](../../resources/ui-building-blocks/pages/page-lifecycle.md#creating-a-page-state):
+[Page State variables](../../resources/ui/pages/page-lifecycle.md#creating-a-page-state):
 
 1. **generatingImage (*****Type: Boolean*****)**: This is used to control the visibility of a 
 loading indicator during the logo creation process. Its value is set to *True* before initiating the API call and switched to *False* once the logo generation is complete.

docs/ff-concepts/animations/page_transitions.md

@@ -27,7 +27,7 @@ Here, the transitions are recorded with the duration set to 1000ms to make the a
 
 ## Animate single navigate transition
 
-To set a transition animation for a single navigate action, first, ensure that you have added a [**Navigate To**](../../resources/ui-building-blocks/pages/navigation#navigate-to-action) action and then select an animation from the **Transition Type** dropdown. By default, the animations use 300 milliseconds as the duration for which it plays but you can change it by specifying a value inside the **Duration** (ms) field.
+To set a transition animation for a single navigate action, first, ensure that you have added a [**Navigate To**](../../resources/ui/pages/navigation#navigate-to-action) action and then select an animation from the **Transition Type** dropdown. By default, the animations use 300 milliseconds as the duration for which it plays but you can change it by specifying a value inside the **Duration** (ms) field.
 
 ![single-navigate-transition-animation.avif](animation_gifs/single-navigate-transition-animation.avif)
 

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

@@ -9,7 +9,7 @@ keywords: [FlutterFlow, Building Layout, Concepts]
 
 # Building Layout
 
-In FlutterFlow, you build a page layout using Widgets. **Widgets**, such as [Text](../../resources/ui-building-blocks/widgets/built-in-widgets/text.md), [Buttons](#), [Images](#), and [Icons](#), are visible on the screen. Others, like [Containers](#), [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/built-in-widgets/text.md), [Buttons](#), [Images](#), and [Icons](#), are visible on the screen. Others, like [Containers](#), [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](#), and [Form Elements](#). To build a page, you combine different widgets from these categories to get the desired look and feel of your app.

docs/ff-concepts/layout/responsive-widgets/conditional-builder-widget.md

@@ -8,7 +8,7 @@ keywords: [FlutterFlow, ConditionalBuilder, Concepts]
 ---
 # ConditionalBuilder
 
-The `ConditionalBuilder` widget allows you to dynamically display different widgets based on certain conditions (either [single](/advanced-functionality/conditional-logic#single-condition) or [multiple](/advanced-functionality/conditional-logic#multiple-conditions-and-or)). Using this widget, you can define different conditions, each associated with a specific widget to be displayed when that condition is true. It's like having a switch that shows different things depending on what's happening in your app.
+The `ConditionalBuilder` widget allows you to dynamically display different widgets based on certain conditions (either [single](../../../resources/control-flow/functions/conditional-logic.md#single-condition) or [multiple](../../../resources/control-flow/functions/conditional-logic.md#multiple-conditions-andor)). Using this widget, you can define different conditions, each associated with a specific widget to be displayed when that condition is true. It's like having a switch that shows different things depending on what's happening in your app.
 
 For example, displaying different charts based on user roles. For team members, an individual progress chart can be shown. Team leads can view the overall progress of the entire team, while project managers can see over project progress chart. Just like the below:
 
@@ -20,11 +20,11 @@ To add the `ConditionalBuilder` widget to your app:
 
 1. Add the **ConditionalBuilder** widget (from the **Base Elements**) to where you want to display dynamic widgets.
 
-2. Move to the **Properties Panel** **>** **Conditional Builder Properties,** andUnder the **First Condition**, provide the **IF** [condition](/advanced-functionality/conditional-logic) by clicking on **UNSET**.
+2. Move to the **Properties Panel** **>** **Conditional Builder Properties,** andUnder the **First Condition**, provide the **IF** [condition](../../../resources/control-flow/functions/conditional-logic.md) by clicking on **UNSET**.
 3. Now, besides the **THEN**, click **Empty**. This will automatically select the **IF** widget in the widget tree. Inside that, add a widget that you want to display if this condition is true.
 4. To add one more condition-based widget, click on the "+" button, add a condition for the **ELSE IF** section, and add a widget inside the **Else If** widget in the widget tree.
 5. If none of the conditions are satisfied, add a default widget to display inside the **Else** widget.
-6. Use the **Show In UI Builder** option to see that particular widget in the [canvas area](/getting-started/ui-builder/canvas-area). You can see only one widget at a time.
+6. Use the **Show In UI Builder** option to see that particular widget in the [canvas area](../../../intro/ff-ui/canvas.md). You can see only one widget at a time.
 
 <div class="video-container"><iframe src="https://www.loom.
 com/embed/fe8edb48bdf744abab13f3ba7f925c5c?sid=85533669-195d-4f5e-aeae-029ceee40cb5" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></div>

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

@@ -24,13 +24,13 @@ Additionally, they provide space for action blocks, which are a set of actions t
 
 ## Page State
 
-Variables used exclusively within a page—such as a text field validator or the value of a checkbox—are stored in the Model of each page. These variables can be accessed by other component children on the same page. For instance, on a page with a form, tapping a button in one component may need to access the value of a text field in a different component.
+[Variables](../../resources/ui/pages/page-lifecycle.md) used exclusively within a page — such as a text field validator or the value of a checkbox — are stored in the `Model` of each page. These variables can be accessed by other component children on the same page. For instance, on a page with a form, tapping a button in one component may need to access the value of a text field in a different component.
 
-Variables within a page are tracked through StatefulWidgets and are encapsulated into that page’s Model.
+Variables within a page are tracked through `StatefulWidget` and are encapsulated into that page’s Model.
 
 ## Component State
 
-Similar to page state, component variables 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/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.
 
 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-management.md

@@ -24,17 +24,17 @@ 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-building-blocks/pages/page-lifecycle.md#creating-a-page-state).
-- To create a **Component State variable**, refer to this [**guide**](../../resources/ui-building-blocks/components/user-defined-components/component-lifecycle.md#creating-a-component-state).
+- 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).
 
 Note: Users cannot create **widget state variables**. These are automatically exposed by FlutterFlow when a Form widget is used.
 
 
 
 ### 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-building-blocks/pages/page-lifecycle.md) guide to learn about updating **[Page State variables](../../resources/ui-building-blocks/pages/page-lifecycle.md#update-page-state-action)**.
-- Refer to the [**Component Lifecycle**](../../resources/ui-building-blocks/components/user-defined-components/component-lifecycle.md) guide to learn about updating **[Component State variables](../../resources/ui-building-blocks/components/user-defined-components/component-lifecycle.md#update-component-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)**.
 
 <p></p>
 

docs/ff-integrations/database/cloud-firestore/firestore-actions.md

@@ -274,7 +274,7 @@ To do so:
 :::
 
 Here is an example showing the 
-[**Snackbar**](../../../resources/ui-building-blocks/pages/page-elements.md#show-snackbar-action)
+[**Snackbar**](../../../resources/ui/pages/page-elements.md#show-snackbar-action)
 message when the data 
 changes in a collection.
 

docs/ff-integrations/streaming/mux/integrate-mux.md

@@ -440,7 +440,7 @@ To customize a button that allows you to start a stream:
    under the **Start Button Style** section.
 
 3. To change the button's text, open the **Start Button Text** section and set the **Text**. You can
-   also [customize the text](../../../resources/ui-building-blocks/widgets/widget-commonalities.md#styling-text) if
+   also [customize the text](../../../resources/ui/widgets/widget-commonalities.md#styling-text) if
    needed.
 
 4. To change the button's icon, open the **Start Button Icon** section and select the new icon. You
@@ -504,7 +504,7 @@ screen).
 To customize the duration indicator:
 
 1. Open the **Duration Text Style** section
-   and [change its text style](../../../resources/ui-building-blocks/widgets/widget-commonalities.md#styling-text).
+   and [change its text style](../../../resources/ui/widgets/widget-commonalities.md#styling-text).
 2. To change the indicator appearance, open the **Duration Container** section and use the property
     such as **Background Color** and **Border Radius**.
 

docs/intro/ff-ui/resource-hierarchy.md

@@ -19,8 +19,8 @@ The diagram below illustrates how a FlutterFlow app is structured.
 ![FlutterFlow app part.avif](imgs/ff-app-part.avif)
 
 1. **Project**: Represents the overall application you are building in FlutterFlow. It encompasses all the other elements listed below and serves as the container for your entire app development effort within FlutterFlow. Learn more about creating a project [here](../../resources/projects/how-to-create-find-organize-projects#how-to-create-a-project).
-2. **Page**: Refers to individual screens within the FlutterFlow project. Each page represents a part of the user interface where users can interact with the app. Multiple pages collectively make up the complete user interface of your application. Learn more about pages in FlutterFlow [here](../../resources/ui-building-blocks/pages/pages#creating-a-page).
-3. **Built-in-widgets**: These are pre-designed widgets provided by FlutterFlow that you can use to build your app’s user interface. Built-in widgets simplify the development process by offering common UI elements such as buttons, text fields, sliders, etc. Learn more about widgets [here](../../resources/ui-building-blocks/overview#widgets).
+2. **Page**: Refers to individual screens within the FlutterFlow project. Each page represents a part of the user interface where users can interact with the app. Multiple pages collectively make up the complete user interface of your application. Learn more about pages in FlutterFlow [here](../../resources/ui/pages/pages#creating-a-page).
+3. **Built-in-widgets**: These are pre-designed widgets provided by FlutterFlow that you can use to build your app’s user interface. Built-in widgets simplify the development process by offering common UI elements such as buttons, text fields, sliders, etc. Learn more about widgets [here](../../resources/ui/overview#widgets).
 4. **Component**: A component in FlutterFlow is a reusable UI block that can be used across different pages within the project. Components are useful for maintaining consistency and reducing redundancy in the app design, as the same component (like a custom dialog box) can be inserted wherever needed. Learn more about creating a component [here](#).
 5. **Design System**: This refers to a set of standards for design within your FlutterFlow project. A design system in FlutterFlow includes predefined styles that ensure visual consistency throughout the app. Learn more about design system [here](#).
 
@@ -31,7 +31,7 @@ If you are coming from Flutter, it is beneficial for you to understand the Flutt
 ![Flutter to FlutterFlow app parts](imgs/flutter-to-flutterflow.avif)
 
 1. **MyApp to Project**: In Flutter, `MyApp` typically represents the root of your application, where you set up routes and other global configurations. In FlutterFlow, the equivalent is the "Project," which encompasses the entire application you are building, including its configurations and settings. Learn more about creating a project [here](../../resources/projects/how-to-create-find-organize-projects#how-to-create-a-project).
-2. **MyPage to Page**: `MyPage` in Flutter represents a specific screen in the app. Similarly, In FlutterFlow, each "Page" corresponds to a screen, where you build the layout and functionality specific to that page of the project. Learn more about pages in FlutterFlow [here](../../resources/ui-building-blocks/pages/pages#creating-a-page).
-3. **Column, Button, Text to Built-in widgets**: In FlutterFlow, widgets are categorized under "Built-in widgets," which users can drag and drop onto their canvas to build the UI. Learn more about widgets [here](../../resources/ui-building-blocks/overview#widgets).
+2. **MyPage to Page**: `MyPage` in Flutter represents a specific screen in the app. Similarly, In FlutterFlow, each "Page" corresponds to a screen, where you build the layout and functionality specific to that page of the project. Learn more about pages in FlutterFlow [here](../../resources/ui/pages/pages#creating-a-page).
+3. **Column, Button, Text to Built-in widgets**: In FlutterFlow, widgets are categorized under "Built-in widgets," which users can drag and drop onto their canvas to build the UI. Learn more about widgets [here](../../resources/ui/overview#widgets).
 4. **Custom widget to Component**: `CustomWidget` in Flutter indicates user-defined widgets that serve specific functions not covered by built-in widgets. FlutterFlow translates this into "Component" allowing you to create and use custom components within your projects. Learn more about creating a component [here](#).
 5. **Theme/style constants to Design System**: In Flutter, theme and style constants are used to ensure consistent styling across an app. FlutterFlow uses a "Design System" to manage and apply uniform styles and themes throughout the application. Learn more about design system [here](#).

docs/intro/ff-ui/widget-palette.md

@@ -19,7 +19,7 @@ From the Widgets tab, you can access all standard FlutterFlow widgets. They are
 
 ## 2. Components
 
-Components are widgets with certain functionalities that can be reused throughout your app. They are constructed from either standard or custom widgets. Once you have created a [component](../../resources/ui-building-blocks/components/user-defined-components/getting-started.md) or [custom widget](../../ff-concepts/adding-customization/custom-widgets.md), you can access it from here.
+Components are widgets with certain functionalities that can be reused throughout your app. They are constructed from either standard or custom widgets. Once you have created a [component](../../resources/ui/components/custom-components/getting-started.md) or [custom widget](../../ff-concepts/adding-customization/custom-widgets.md), you can access it from here.
 
 ## 3. Templates