Merge branch 'main' into pinkesh/supabase-streaming-queries

Author: PoojaB26

docs/resources/ui/components/intro-components.md

@@ -9,6 +9,8 @@ slug: /resources/ui/components
 Components in FlutterFlow are reusable widgets. You design the widget once and can use it throughout your app
 to save time, ensure consistency, and make it easier to maintain.
 
+When you add a component to a [**Page**](../pages/intro-pages.md), it becomes part of that page's **[Widget Tree](../widgets/intro-widgets.md#widget-tree)**. This allows the component to interact with other widgets, inherit properties, and respond to state changes as part of the page's structure.
+
 Components help in the following ways:
 
 - **Consistency:** Components provide a consistent look and behavior, reducing the likelihood of
@@ -20,7 +22,7 @@ Components help in the following ways:
   app automatically reflect those changes. This significantly reduces the effort required to
   maintain and update the app.
 
-  :::tip[CLasses vs Instances]
+  :::info[CLasses vs Instances]
   Learn more about **[Classes and their Instances](../overview.md)** and what they mean in
   FlutterFlow.
   :::

docs/resources/ui/imgs/page-properties-panel.png

@@ -6,29 +6,34 @@ sidebar_position: 1
 
 # Introduction to Pages
 
+In FlutterFlow, a **Page** represents a single screen in your app. Under-the-hood pages use a **Scaffold**, a [foundational widget from Flutter](https://api.flutter.dev/flutter/material/Scaffold-class.html) that provides a structured layout for a screen within your app. The Scaffold offers essential elements like the AppBar and Body, allowing you to easily build screens.
 
-In FlutterFlow, each **Page** you create is fundamentally structured using a **Scaffold**, a [foundational widget from Flutter](https://api.flutter.dev/flutter/material/Scaffold-class.html) that provides a structured layout for your app. The Scaffold offers essential elements like the AppBar, Floating Action Button (FAB), Drawer, and Body, allowing you to easily organize and design your pages.
+Pages are composed of various UI elements, or widgets. Widgets are added to a page when they are added to the page's **Widget Tree**. 
 
-:::info
-For more details on how to use Scaffold and the various Page Elements in FlutterFlow, see the dedicated **[Page Elements](page-elements.md)** guide.
+:::note[Widget Tree]
+The **Widget Tree** is a structural representation of how widgets are organized within a Page. To learn more, check out the [**Widget Overview**](../widgets/intro-widgets.md#widget-tree) documentation.
 :::
 
+In FlutterFlow, pages are automatically configured to handle [routing](https://docs.flutterflow.io/resources/ui/pages/properties#route-settings). Additionally, pages can have [input parameters](https://docs.flutterflow.io/resources/ui/pages/properties#page-parameters) and [state variables](https://docs.flutterflow.io/resources/ui/pages/page-lifecycle#page-state). 
 
+:::info
+For more details on how to use Scaffold and the various Page Elements in FlutterFlow, see the dedicated **[Page Elements](page-elements.md)** guide.
+:::
 
 
 ## Creating a Page
 
-In FlutterFlow, you can craft a page tailored to your expertise, design preferences, or specific
-use case needs. Whether you're starting from scratch, using a template, or leveraging AI tools,
+In FlutterFlow, you can seamlessly craft a page tailored to your needs and design preferences.
+Whether you're starting from scratch, using a template, or leveraging AI tools,
 there are several pathways to achieve the desired functionality and aesthetic of your desired Page.
 
-FlutterFlow allows you to easily create new pages using the "Add Page, Component, or Flow" button, which is available from the Pages view. This will help you
-quickly start and add new pages to your app.
-
 :::tip[Generated Code]
 When you create a page in FlutterFlow, a `Widget` class and a corresponding `Model` class are automatically generated. You can view these in the Code Viewer. To explore the details of the generated `Model` class, take a closer [**look at the code**](../../../generated-code/page-model.md).
 :::
 
+FlutterFlow allows you to easily create new pages using the **Add Page, Component, or Flow** button, 
+which is available from the **Page Selector** tab in the **Navgation Menu**. This will help you
+quickly start and add new pages to your app.
 
 <img src="/img/page-selector.png" width="50%" />
 

docs/resources/ui/pages/intro-pages.md

@@ -6,14 +6,12 @@ sidebar_position: 1
 
 # Properties Panel
 
+In FlutterFlow, the properties panel on the right helps you set up and manage your pages. It opens when you click on the root element in the [Widget Tree](../widgets/intro-widgets.md#widget-tree) (on the left).
 
-In FlutterFlow, the properties panel located on the right side of the interface
-plays a crucial role in configuring and managing the various aspects of your
-pages. This panel is divided into several sections, each dedicated to different
-settings and adjustments you can make to customize your pages.
+The panel is organized into sections, each focusing on different settings to customize your pages.
 
 Here’s a detailed look at what you can typically find and modify in this panel:
-![props-panel.png](../imgs/props-panel.png)
+![page-properties-panel.png](../imgs/page-properties-panel.png)
 
 ### Page Parameters
 

docs/resources/ui/pages/pages-properties.md

@@ -6,16 +6,9 @@ sidebar_position: 2
 
 # Properties Panel
 
-In FlutterFlow, the Properties Panel located on the right side of the interface plays a crucial role
-in configuring and managing the various aspects of your widgets. This panel is divided into several
-sections, each dedicated to different settings and adjustments you can make to customize your
-widgets.
+In FlutterFlow, the Properties Panel on the right helps you configure and manage your widgets. It opens when you click on a widget or [component](../components/intro-components.md) in the [**Widget Tree**](../widgets/intro-widgets.md#widget-tree).
 
-## Widget Properties
-
-When you click on a widget from the Widget Tree, the **Widget Properties Panel** opens up on the
-right side. There you can customize the properties for the selected widget, which may vary
-based on the type of widget and also add other advanced configurations to the widget.
+The panel is divided into sections, each focusing on settings specific to the selected widget. The available options may vary depending on the widget type, with additional advanced configurations available for further customization.
 
 ![advanced-configs-widgets.png](../imgs/advanced-configs-widgets.png)
 

docs/resources/ui/widgets/widget-properties.md

@@ -2292,6 +2292,11 @@
         "source": "/firebase-setup",
         "destination": "/integrations/firebase/connect-to-firebase",
         "type": 301
+      },
+      {
+        "source": "/building-your-ui/ui-builder/properties-panel",
+        "destination": "/resources/ui/widgets/properties",
+        "type": 301
       }
     ]
   }