Content Fixes

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/adding-customization/custom-functions.md

@@ -71,7 +71,7 @@ You can't have imports in a custom function. To be able to add imports, consider
 <details>
 <summary>Getting error: The function 'FFAppState' isn't defined.</summary>
 
-You can't use the app state variable (i.e., FFAppState().variablename) directly in your custom 
+You can't use the app state variable (i.e., `FFAppState().variablename`) directly in your custom 
 function code. Instead, you can pass the app state variable as a parameter and then use it in your code.
 
 </details>

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/navigation-routing/deep-dynamic-linking.md

@@ -110,7 +110,7 @@ To set the page URL:
 #### 3. Sharing deep link
 
 You can share the deep link of the current page by adding
-the [share action](/actions/actions/share/share).
+the [share action](share-action.md).
 
 To share the deep link of the current page:
 
@@ -320,7 +320,7 @@ To set the page URL:
 
 You can share the dynamic link of the current page by adding the [**Generate Current Page Link
 **](generate-current-page-link.md)
-action and then sharing it using the [**Share Action**](/actions/actions/share/share).
+action and then sharing it using the [**Share Action**](share-action.md).
 
 To share the dynamic link of the page:
 

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

@@ -2,10 +2,12 @@
 title: State Management
 description: An overview of state management in FlutterFlow
 ---
-
+# State Management 
 State management is a crucial concept focused on maintaining and controlling the **state** of an application. Simply put, it involves monitoring the changes within your app and updating the user interface to reflect these changes. 
 
-You can think of the UI as a function of your state variables, where changes in these variables directly influence what the UI displays.
+The UI (user interface) displays information based on state variables. When these state variables change, the UI updates to reflect the changes.
+
+## State Variables
 
 In FlutterFlow, there are a few types of state variables that you can create:
 
@@ -15,27 +17,35 @@ In FlutterFlow, there are a few types of state variables that you can create:
 </figure>
 
 
-- State variables are themselves **variables** - meaning they have a *name* and a *data type*. 
+- State variables are themselves [**variables**](../../resources/data-representation/overview.md#variable) - meaning they have a *name* and a *data type*. 
 - They also have an initial value that is set when you create the variable. 
 - Once you create a state variable, it's value can be used to change the configuration of widget properties - like any other variable. 
-- You can update the value of state variables using the *Update State Variable* action.
+- You can update the value of state variables using the **[Update State Variable](#updating-state-variables)** action.
+
+### 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).
+
+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/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>
+
+
+:::tip[Learn from video]
 You can learn more about state management from this video:
 <div class="video-container">
 <iframe src="https://www.youtube.com/embed/jD6L4xjYjJA?si=-RjniUB-K0ZsMoB1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
 </div>
-
-<p></p>
-
-:::tip
-To learn more about state management in FlutterFlow, read up on 
-[**Variables**](../../resources/data-representation/overview.md#variable) and how 
-[**Page 
-State**](../../resources/ui-building-blocks/pages/page-lifecycle.md#page-state), or 
-[**Component State**](#) or [**App State variables**](#) are modified in FlutterFlow. 
 :::
 
 
 
 
-

docs/ff-integrations/authentication/_category_.json

@@ -1,4 +1,3 @@
 {
-    "label": "Authentication",
-    "position": 1
+    "label": "Authentication"
 }

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/database/local-sql/sqlite/quickstart.md → docs/ff-integrations/database/local-sql/quickstart.md

@@ -1,5 +1,5 @@
 ---
-slug: /integrations/database/sqlite/quickstart
+slug: /integrations/database/sqlite
 title: SQLIte Quickstart
 description: Learn how to quickly get started with SQLite in your FlutterFlow app for local data storage.
 tags: [FlutterFlow, SQLite, Database, Quickstart, Local Storage]
@@ -38,7 +38,7 @@ Here are the steps to build such an example:
 
 To enable SQLite in FlutterFlow, navigate to Settings and Integrations > Integrations > SQLite > switch on the **Enable SQLite** toggle.
 
-![img.png](img.png)
+![img.png](imgs/img.png)
 
 ## 2. Database configuration
 
@@ -86,7 +86,7 @@ In general, to add any query, you need to provide a name, the query statement, a
 
 * To use variables, simply use the syntax `${variableName}`. For example: `SELECT \* FROM Notes WHERE id = ${noteId}`
 * When passing string or text data in queries, enclose variables in single quotes, like `${title}`, to signify them as strings.
-![img_1.png](img_1.png)
+![img_1.png](imgs/img_1.png)
 :::
 
 Below are the queries that we'll require for this example:
@@ -154,7 +154,7 @@ com/embed/aa0bb7bea67145c8b0b61ce57485a5c2?sid=9d950aba-c498-484c-8507-c795bee74
 
 To show a list of notes, you can use the **ListView** > **Container** widgets to design a page that looks like the following:
 
-![img_2.png](img_2.png)
+![img_2.png](imgs/img_2.png)
 
 Now, on the ListView widget, add a [SQLite backend query](/data-and-backend/backend-query/sqlite-query) and display data in UI elements.
 
@@ -204,7 +204,7 @@ com/embed/bb775d5da5614117ac6fbe6542b6c29f?sid=877e565c-be16-4c77-a92c-9a6a95408
 
 For updating note values, like marking a note as completed or modifying other fields, utilize 
 the SQLite Query Action and set the type to **Update Query**. Here, set the Query Name to 
-[UpdateNote](#3-updatenote).
+[Update Note](#3-updatenote).
 
 
 
@@ -215,19 +215,19 @@ com/embed/35564ad5e8be4f58aa72527bc6818183?sid=2740d823-df42-49c3-ae54-8e0e95a72
 
 :::info
 
-* In this example, we are updating the note on a bottom sheet component. To provide a better user experience, we initially display the current values of the note, ensuring that users have a clear idea of what they are going to edit. To display the note values in bottom sheet, we [pass](../../../../ff-concepts/navigation-routing/passing-data.md) the current note with **Type** set to **SQLite Row**.
+* In this example, we are updating the note on a bottom sheet component. To provide a better user experience, we initially display the current values of the note, ensuring that users have a clear idea of what they are going to edit. To display the note values in bottom sheet, we [pass](../../../ff-concepts/navigation-routing/passing-data.md) the current note with **Type** set to **SQLite Row**.
 
-![img_3.png](img_3.png)
+![img_3.png](imgs/img_3.png)
 
 * When updating a date value, we also verify if the date has been modified. If there's no change, we simply pass back the same value we received.
 :::
 
 ## 7. Delete note
 
-You can delete an existing note from the database using the [SQLite query action](../../../../resources/control-flow/backend-logic/backend-query/sqlite-query.md) with the type set to *Update Query* and Query Name to **Delete Note**.
+You can delete an existing note from the database using the [SQLite query action](../../../resources/control-flow/backend-logic/backend-query/sqlite-query.md) with the type set to *Update Query* and Query Name to **Delete Note**.
 
 :::tip[Pro Tip] 
-To refresh the page, simply add an [**Update App State Action**](../../../../resources/data-representation/app-state.md) Action with the Update Type set 
+To refresh the page, simply add an [**Update App State Action**](../../../resources/data-representation/app-state.md) Action with the Update Type set 
 to 'Rebuild Current Page'.
 :::
 Here's how you do it:

docs/ff-integrations/database/refresh-db-request.md

@@ -3,7 +3,7 @@ slug: /integrations/database/refresh-db-request
 title: Refresh DB Request Action
 description: Learn how to use the Refresh DB Request action in your FlutterFlow app to refresh your database content.
 tags: [FlutterFlow, Database, Refresh, Action]
-sidebar_position: 1
+sidebar_position: 4
 keywords: [FlutterFlow, Database, Refresh, Action]
 ---
 

docs/ff-integrations/database/supabase/_category_.json

@@ -1,3 +1,4 @@
 {
-    "label": "Supabase"
+    "label": "Supabase",
+    "position": 2
 }

docs/ff-integrations/gemini/_category_.json

@@ -1,3 +1,4 @@
 {
-  "label": "Gemini"
+  "label": "Gemini",
+  "position": 3
 }

docs/ff-integrations/notifications/one-signal/one-signal.md

@@ -109,7 +109,7 @@ You can find out if the user was successfuly added to the subscription by naviga
 ![img_2.png](img_2.png)
 
 :::info[OneSignal for Supabase Users]
-Currently, Our OneSignal integration supports Firebase authentication. If you want to use Supabase authentication, you may need to provide custom code to notify your users for now.
+Currently, our OneSignal integration supports only Firebase authentication. If you want to use [**Supabase authentication**](../../authentication/supabase-auth/initial-setup.md), you may need to use [**custom code**](../../../ff-concepts/adding-customization/custom-code.md) to notify your users.
 :::
 
 

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