diff --git a/docs/resources/ui/components/intro-components.md b/docs/resources/ui/components/intro-components.md index eddb18bf..17910758 100644 --- a/docs/resources/ui/components/intro-components.md +++ b/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. ::: diff --git a/docs/resources/ui/imgs/page-properties-panel.png b/docs/resources/ui/imgs/page-properties-panel.png new file mode 100644 index 00000000..04d0de9f Binary files /dev/null and b/docs/resources/ui/imgs/page-properties-panel.png differ diff --git a/docs/resources/ui/pages/intro-pages.md b/docs/resources/ui/pages/intro-pages.md index 8de97405..4b47a7bf 100644 --- a/docs/resources/ui/pages/intro-pages.md +++ b/docs/resources/ui/pages/intro-pages.md @@ -10,6 +10,10 @@ In FlutterFlow, a **Page** represents a single screen in your app. Under-the-hoo 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**. +:::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 diff --git a/docs/resources/ui/pages/pages-properties.md b/docs/resources/ui/pages/pages-properties.md index ddf47208..9a4b404d 100644 --- a/docs/resources/ui/pages/pages-properties.md +++ b/docs/resources/ui/pages/pages-properties.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 diff --git a/docs/resources/ui/widgets/widget-properties.md b/docs/resources/ui/widgets/widget-properties.md index e82cb4ed..032b1c47 100644 --- a/docs/resources/ui/widgets/widget-properties.md +++ b/docs/resources/ui/widgets/widget-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)