Rewrite and correct widget hierarchy

Author: PoojaB26

docs/resources/ui/components/built-in-components/_category_.json

@@ -1,4 +1,4 @@
 {
     "label": "Built-in Components",
-    "position": 3
+    "position": 4
 }

docs/resources/ui/components/built-in-components/badge.md

@@ -100,7 +100,7 @@ To change the badge text style:
 1. Select the **Badge** widget from the widget or the canvas area.
 2. Move to the properties panel (on the right side of your screen), and scroll down to the **Badge Properties** section.
 3. Find the **Theme Text Style** property and change the style as per instructions 
-[here](../../widgets/built-in-widgets/text.md).
+[here](../../widgets/basic-widgets/text.md).
 
 ### Show/hide badge
 

docs/resources/ui/components/built-in-components/chart/chart.md

@@ -113,7 +113,7 @@ You can change the appearance of the legend box by following the instructions be
 To customize the legend text and indicator:
 
 1. First, [enable the legend](#showing-legend).
-2. To style the legend text, scroll down to the **Legend Properties** > **Legend Text Properties** and change the style as per [here](../../../../../resources/ui/widgets/built-in-widgets/text.md#common-text-styling-properties).
+2. To style the legend text, scroll down to the **Legend Properties** > **Legend Text Properties** and change the style as per [here](../../../widgets/basic-widgets/text.md#common-text-styling-properties).
 3. To add space between the indicator and the text, adjust the **Text Padding** property.
 4. You can change the indicator size by entering a value inside the **Indicator Size** property.
 5. To create rounded corners around the indicator, you can use the **Indicator Border Radius** property.

docs/resources/ui/components/built-in-components/draggable.md

@@ -69,7 +69,7 @@ The DragTarget widget in this example allows users to drop items onto the shelf.
 Let's see how to add DragTarget widget:
 
 1. Open the [Widget Palette](../../../../intro/ff-ui/widget-palette.md) and locate the **DragTarget** widget under the **Base Elements** tab. You can drag it into your desired location or add it directly from the widget tree.
-2. Inside the **DragTarget** widget, add a [**Container**](../../widgets/built-in-widgets/container.md) widget, preferably of the same size as the image, and set its background color to transparent. This will serve as the drop zone for draggable items.
+2. Inside the **DragTarget** widget, add a [**Container**](../../widgets/basic-widgets/container.md) widget, preferably of the same size as the image, and set its background color to transparent. This will serve as the drop zone for draggable items.
 3. Now, you need to specify the type of data this target will receive. To do so select the **DragTarget widget > Properties Panel > Draggable Properties >** specify the **Type** of the data. This is crucial for ensuring that only the correct items can be dropped on the target.
 
 <div class="video-container"><iframe src="https://www.loom.

docs/resources/ui/components/built-in-components/media-display.md

@@ -8,7 +8,7 @@ description: Learn how to add MediaDisplay widget in your FlutterFlow app.
 # MediaDisplay
 The **MediaDisplay** widget in FlutterFlow automatically detects the type of media fetched from a URL and adjusts the widget accordingly. For instance, if the URL returns an image, the widget will behave as an Image widget.
 
-This versatility allows you to easily present various types of media within your app. For example, it can be integrated into scrollable widgets like [ListView](../../widgets/built-in-widgets/list-grid.md#listview-widget) for displaying activity feeds or [GridView](../../widgets/built-in-widgets/list-grid.md#gridview-widget) for presenting photos and videos together.
+This versatility allows you to easily present various types of media within your app. For example, it can be integrated into scrollable widgets like [ListView](../../widgets/composing-widgets/list-grid.md#listview-widget) for displaying activity feeds or [GridView](../../widgets/composing-widgets/list-grid.md#gridview-widget) for presenting photos and videos together.
 
 ## Adding MediaDisplay widget
 
@@ -106,7 +106,7 @@ You can customize the appearance and behavior of the widget using the various pr
 
 ### Customizing Image
 
-To customize the widget when image is displayed, refer [here](../../widgets/built-in-widgets/image.md#common-image-properties).
+To customize the widget when image is displayed, refer [here](../../widgets/basic-widgets/image.md#common-image-properties).
 
 ### Customizing Video
 

docs/resources/ui/components/custom-components/component-lifecycle.md renamed to docs/resources/ui/components/component-lifecycle.md

@@ -48,7 +48,7 @@ a Page or a Component.
 specific events or user interactions within an application. FlutterFlow provides
 developers with a way to define logic that responds to various events, such as
 button clicks, page loads, form submissions, or data changes.
-To learn more, head over to [**Action Flow Editor**](../../../../resources/control-flow/functions/action-flow-editor.md) section.
+To learn more, head over to [**Action Flow Editor**](../../control-flow/functions/action-flow-editor.md) section.
 :::
 
 As you open the Action Flow Editor for your Component, you can see the `On Initialization`
@@ -70,7 +70,7 @@ created.
 
 :::note[STATE VARIABLES]
 A state variable holds information or data about your UI at any given moment. To learn more
-about **states and state management, [refer here.](../../../../ff-concepts/state-management/state-variables.md)**
+about **states and state management, [refer here.](../../../ff-concepts/state-management/state-variables.md)**
 :::
 
 **Component state** refers to the information that a component tracks about its current condition or
@@ -149,7 +149,7 @@ Now, let's apply these concepts to the `isFavourite` variable in the context of
   (true or false) and never be null.
 
 :::note
-You can set the **Data Type** of your Component State variable to any primitive data types such as **String, Integer, Boolean, Double** or to any other complex built-in data types such as **Enum, Custom Data Type, Document,** etc. To learn more about the available data types, refer the [**Data Representation Section**](../../../data-representation/overview.md).
+You can set the **Data Type** of your Component State variable to any primitive data types such as **String, Integer, Boolean, Double** or to any other complex built-in data types such as **Enum, Custom Data Type, Document,** etc. To learn more about the available data types, refer the [**Data Representation Section**](../../data-representation/overview.md).
 :::
 
 ### Get Component State Value

docs/resources/ui/components/custom-components/getting-started.md renamed to docs/resources/ui/components/creating-components.md

@@ -6,7 +6,7 @@ keywords: [Custom Components]
 tags: [Components]
 ---
 
-# Custom Components
+# Components
 
 Custom Components or just user-defined Components in FlutterFlow are custom widgets you create to meet specific needs in your app. These components can be designed using FlutterFlow's drag-and-drop interface, allowing you to
 create reusable UI elements. This approach ensures consistency, saves
@@ -148,14 +148,14 @@ your components.
 
 Here’s a detailed look at what you can typically find and modify in this panel:
 
-![components-configurations.png](../../imgs/components-configurations.png)
+![components-configurations.png](../imgs/components-configurations.png)
 
 ### Component Parameters
 
 In FlutterFlow, component parameters are values passed down from a parent entity like a page or another component. These parameters make the component adaptable and dynamic, adjusting to the context in which it is used.
 
 :::info
-Learn [**how to add a component to an entity,**](using-components) such as a page or another
+Learn [**how to add a component to an entity,**](using-components.md) such as a page or another
 component, and how to pass parameters.
 :::
 
@@ -167,7 +167,7 @@ the page using the current component.
 
 Adding an action to a component element is exactly the same experience as adding actions to any page elements. Here's a quick overview:
 
-![component-actions.png](../../imgs/component-actions.png)
+![component-actions.png](../imgs/component-actions.png)
 
 For component actions, you can establish specific behaviors or functions that are triggered by
 certain events related to the component's lifecycle, such as **On Initialization**.

docs/resources/ui/components/custom-components/_category_.json

@@ -1,11 +1,12 @@
 ---
-title: Overview
+title: Introduction to Components
 sidebar_position: 0
+slug: /resources/ui/components
 ---
 
 # Components
 
-Components in FlutterFlow are reusable elements. You design once and utilize throughout your app
+Components in FlutterFlow are reusable widgets. You design the widget once and utilize throughout your app
 to save time, ensure consistency, and simplify maintenance.
 
 Components help in the following ways:
@@ -47,11 +48,8 @@ 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](custom-components/getting-started.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
+- **[Custom Components](creating-components)**: 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`.
 

docs/resources/ui/components/overview.md renamed to docs/resources/ui/components/intro-components.md

@@ -199,6 +199,6 @@ You can create a recursive component, meaning the component can include an insta
 
 For example, in social media applications or forums, comments can have replies, and each reply can have further replies. A recursive component can display this nested structure effectively.
 
-![recursive-comp.png](../../imgs/recursive-comp.png)
+![recursive-comp.png](../imgs/recursive-comp.png)