Fixed links

pinkeshmars · pinkeshmars · commit ddb5d57cb36d · 2024-08-26T19:12:26.000+05:30
diff --git a/docs/ff-concepts/adding-customization/cloud-functions.md b/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/intro-pages#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.
 
diff --git a/docs/ff-concepts/alerts-notification/alert-dialog.md b/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/intro-components).
+- **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/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:
+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**.
diff --git a/docs/ff-concepts/layout/building-layout.md b/docs/ff-concepts/layout/building-layout.md
@@ -19,7 +19,7 @@ These widgets are categorized into four main types: [Layout Elements](/tags/layo
 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/rows-column-stack).
+**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).
 
 :::
 
diff --git a/docs/ff-concepts/navigation-routing/bottom-sheet.md b/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/intro-components).
+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/creating-components#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={{
diff --git a/docs/ff-integrations/authentication/supabase-auth/email-supabase.md b/docs/ff-integrations/authentication/supabase-auth/email-supabase.md
@@ -51,7 +51,7 @@ Here's how you disable email verification on the Supabase side:
 
 ### Building pages
 
-Let's add a page that allows users to create accounts and log in. To speed up, you can add a page from the [template](../../../resources/ui/pages/intro-pages#create-a-page-from-a-popular-template). Here is the page added from the templates, and after some modification, it looks the below:
+Let's add a page that allows users to create accounts and log in. To speed up, you can add a page from the [template](../../../resources/ui/pages/intro-pages.md#create-a-page-from-a-popular-template). Here is the page added from the templates, and after some modification, it looks the below:
 
 Also, see how to build a page layout in case you want to build a page from scratch.
 
diff --git a/docs/intro/ff-ui/canvas.md b/docs/intro/ff-ui/canvas.md
@@ -29,7 +29,7 @@ There's a zoom in ( + ) and a zoom out ( - ) button to control the zoom level of
 
 ## AI Generated Page
 
-From here, you can [create a page using AI](../../resources/ui/pages/intro-pages#create-an-ai-generated-page).
+From here, you can [create a page using AI](../../resources/ui/pages/intro-pages.md#create-an-ai-generated-page).
 
 ## Add App Bar
 
diff --git a/docs/intro/ff-ui/resource-hierarchy.md b/docs/intro/ff-ui/resource-hierarchy.md
@@ -18,10 +18,10 @@ 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/pages/intro-pages#creating-a-page).
+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.md#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/pages/intro-pages.md#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.
-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](../../resources/ui/components/intro-components).
+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](../../resources/ui/components/intro-components.md).
 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](../../ff-concepts/design-system/design-system.md).
 
 ## Flutter to FlutterFlow
@@ -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.md#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/pages/intro-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](../../resources/ui/components/intro-components).
+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/intro-pages.md#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.md#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](../../resources/ui/components/intro-components.md).
 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](../../ff-concepts/design-system/design-system.md).
diff --git a/docs/intro/ff-ui/widget-palette.md b/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/components/creating-components) 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/creating-components.md) or [custom widget](../../ff-concepts/adding-customization/custom-widgets.md), you can access it from here.
 
 ## 3. Templates
 
diff --git a/docs/marketplace/creators-hub/submission-criteria.md b/docs/marketplace/creators-hub/submission-criteria.md
@@ -368,7 +368,7 @@ Building a solid app template goes beyond surface-level design. It's about creat
 - **Why It Matters:** A clean and organized widget tree makes your project more understandable, maintainable, and less prone to errors. It also makes it easier for others to collaborate on your project.
 - **What To Do:**
     - **Use descriptive names for widgets and variables:** Make your code self-documenting by using clear and meaningful names for major nodes.
-    - **Avoid deeply nested widgets:** If your widget tree becomes too deeply nested (>10 levels), consider breaking it down into smaller, reusable [components](../../resources/ui/components/intro-components).
+    - **Avoid deeply nested widgets:** If your widget tree becomes too deeply nested (>10 levels), consider breaking it down into smaller, reusable [components](../../resources/ui/components/intro-components.md).
 
 
 
diff --git a/docs/resources/control-flow/backend-logic/backend-query/backend-query.md b/docs/resources/control-flow/backend-logic/backend-query/backend-query.md
@@ -77,7 +77,7 @@ To change the loading indicator:
 
 1. Ensure you have added a backend query.
 2. Open the **Backend Query** section (on the right side) and scroll down to the **Backend Query Loading Widget**. Open it by clicking on the arrow icon.
-3. Set the **Loading Widget Type** to **Image**. You can also choose a [**Component**](../../../ui/components/creating-components) if you have already designed a loading component.
+3. Set the **Loading Widget Type** to **Image**. You can also choose a [**Component**](../../../ui/components/creating-components.md) if you have already designed a loading component.
 4. Enable the **View in UI Builder**. This allows you to see your custom loading indicator on canvas (before you actually run the app).
 5. Choose the **Image Type**, [add the image](../../../ui/widgets/basic-widgets/image.md#image-type), and adjust its **Padding** and **Width**.
 6. To show the indicator in the center, turn on the **Center Image** toggle.
diff --git a/docs/resources/data-representation/variables.md b/docs/resources/data-representation/variables.md
@@ -78,7 +78,7 @@ For step-by-step guides on how to create App State, Page State, and Component St
 
 ## Set Variable
 
-The **Set from Variable** or **Set Variable** menu in FlutterFlow is a powerful feature that allows you to dynamically control the content or behavior of your widgets using **data** stored in [variables](#variable). When you select a variable from this menu, you're instructing FlutterFlow to use the value of that variable to populate or modify the widget's properties, such as text, visibility, or styling.
+The **Set from Variable** or **Set Variable** menu in FlutterFlow is a powerful feature that allows you to dynamically control the content or behavior of your widgets using **data** stored in variables. When you select a variable from this menu, you're instructing FlutterFlow to use the value of that variable to populate or modify the widget's properties, such as text, visibility, or styling.
 
 This menu provides a variety of variable **sources**, including data that's specific to the page or component, global properties that apply across the entire app, constants, and more. By choosing the appropriate variable, you can make your app more interactive and responsive to user input, data changes, or other conditions.
 
@@ -101,7 +101,7 @@ These manipulations enable you to create more dynamic and responsive user interf
 
 ### List Options
 
-While working with a list, you may need to extract specific data based on specific criteria. The List options provides a range of functionalities for efficient data extraction from these lists. Here's what it includes:
+While working with a list, you may need to extract specific data based on specific criteria. The List options provide a range of functionalities for efficient data extraction from these lists. Here's what it includes:
 
 #### Map List Items
 
@@ -158,7 +158,7 @@ com/embed/4d505788441745c490a69687628f4126?sid=cdca45e3-bd8f-40fc-bd1f-c9e6a7f6a
 
 This option helps you create a list with unique items, such as extracting distinct product categories or unique customer names from a larger dataset.
 
-Here's an example of displaying a list of unique cat breed:
+Here's an example of displaying a list of unique cat breeds:
 
 <div class="video-container"><iframe src="https://www.loom.
 com/embed/02bab8cf7a4c48228700b2493c155f7d?sid=a7fb6c23-31c4-4bed-a590-011aaca6d71f" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></div>
diff --git a/docs/resources/projects/settings/project-setup.md b/docs/resources/projects/settings/project-setup.md
@@ -286,7 +286,7 @@ To create a walkthrough:
 3. Now, we must add the steps for our walkthrough. Each step that we add here acts as a separate screen or popup that nicely animates to highlight the UI element. To add steps:
     1. Click on the **+ Add Step**.
     2. Choose the widget to highlight by clicking **Widget Unset**. In the right-side preview, select the desired widget and click **Confirm**.
-    3. When the widget is in focus, you may want to present information about it; this could be a simple text or a custom component (e.g., a text with an arrow). You have complete control over what you want to display via a [component](../../../resources/ui/components/intro-components). Click the diamond icon to create a new component and then set it to **Content**.
+    3. When the widget is in focus, you may want to present information about it; this could be a simple text or a custom component (e.g., a text with an arrow). You have complete control over what you want to display via a [component](../../../resources/ui/components/intro-components.md). Click the diamond icon to create a new component and then set it to **Content**.
     4. You can also choose where the Content will be displayed by setting the **Content Alignment**.
     5. Choose a **Focus Shape** for the widget—either **Circle** or **Rectangle**.
     6. Pick an **Overlay Color** that you want to display when the widget is highlighted.
diff --git a/docs/resources/ui/components/intro-components.md b/docs/resources/ui/components/intro-components.md
@@ -48,7 +48,7 @@ Leveraging components effectively helps you build a consistent, efficient, and m
   out-of-the-box solutions provided by FlutterFlow that can be directly integrated into any project
   to offer specific functionalities.
 
-- **[Custom Components](creating-components)**: You can also build your own 
+- **[Custom Components](creating-components.md)**: You can also build your own 
   components by assembling multiple widgets using FlutterFlow’s drag-and-drop interface. This method involves strategically positioning atomic widgets such as `TextField`, `Button`s, or `Image`s, etc within the molecular
   widgets like `Row`, `Column`, or `Stack` to create a combined widget that serve a specific
   function, like a `LoginComponent` or a `SearchBar`.
diff --git a/docs/resources/ui/pages/page-elements.md b/docs/resources/ui/pages/page-elements.md
@@ -282,7 +282,7 @@ enable Nav Bar.
 Initially, your NavBar will not have any pages in it. You'll see a message
 instructing you to add at least two pages. Before proceeding, make sure to
 create at least two pages. If you need help with adding a new page, you can find
-[**more information here**](intro-pages#creating-a-page).
+[**more information here**](intro-pages.md#creating-a-page).
 :::
 
 ![nav-bar.png](../imgs/nav-bar.png)
