From 95dcea581ed38772ff34a7cce2322cb55abfb057 Mon Sep 17 00:00:00 2001 From: Pinkesh Date: Wed, 24 Dec 2025 11:53:02 +0530 Subject: [PATCH 1/2] Update properties panel arcades --- docs/workspace/properties-panel.md | 56 ++++++++++++++++++++++++++++-- 1 file changed, 54 insertions(+), 2 deletions(-) diff --git a/docs/workspace/properties-panel.md b/docs/workspace/properties-panel.md index f7820db..3c0dfe7 100644 --- a/docs/workspace/properties-panel.md +++ b/docs/workspace/properties-panel.md @@ -17,7 +17,7 @@ The Properties Panel allows you to edit widget properties in real-time, providin height: 0, width: '100%'}}> + +

+ ::: @@ -51,6 +78,31 @@ To switch from the visual property editor to a code-based property editor, hover Some properties for widgets are hidden by default. However, any property that's accessible in the underlying widget can be set from the property panel. If you are looking for a hidden property, you can search for it or add it using the "+ Add Property" button at the top of the Property panel. +
+ +
+

## Modifiers @@ -91,7 +143,7 @@ Modifier widgets are hidden from the "Simplified View" in the [**widget tree**]( height: 0, width: '100%'}}> + +

+ +#### Adding Additional Properties + +Some properties for widgets are hidden by default. However, any property that's accessible in the underlying widget can be set from the property panel. If you are looking for a property that's not currently visible, you can search for it or add it using the **+ Add Property** button at the top of the Property panel. + +
+ +
+

+ +### Conditional Values + +Properties that use conditional values are indicated by a branching icon (resembling a "Y" with arrows). These allow you to set different property values based on runtime conditions. + +When working with conditional values, you can: +- Set up conditions using any valid Dart expression +- Define different values for the true and false branches +- Use any property type (widgets, colors, numbers, strings, etc.) in each branch +- Nest conditions for more complex logic + +This feature is especially powerful for creating dynamic UIs that respond to state changes, user interactions, or other runtime conditions. + +
+ +
+

+ +### Action Functions + +Properties that represent actions or callbacks (such as `onPressed`, `onTap`, `onMapCreated`) are marked with action icons like a lightning bolt (⚡) or parentheses `()`. These indicate interactive behaviors that can be configured with event handlers or function calls. + +You can click on these properties to open the code editor and define the function that will be called when the action is triggered. + + +
+ +
+

+ +### Code Blocks or Variables + +Properties that represent variables or code expressions (rather than actions or functions) are indicated with a code block icon (``). + +This icon highlights that the property's value is set via a variable or code rather than a simple constant or selection. Clicking this property will allow you to edit the associated code expression. + + +
+ +
+

+ +#### Switching to Quick Code Viewer To switch from the visual property editor to a code-based property editor, hover near the property and click the "Switch to Code View" button. You can also cmd+click this button to jump to the specific line in the code editor where the property is defined.

-::: -## Adding Hidden Properties -Some properties for widgets are hidden by default. However, any property that's accessible in the underlying widget can be set from the property panel. -If you are looking for a hidden property, you can search for it or add it using the "+ Add Property" button at the top of the Property panel. +## Constructors + +Many Flutter widgets support multiple constructors, each with different parameter sets. Constructors are different ways to initialize a widget: +- **Default constructor**: The standard way to create a widget with all properties available +- **Named constructors**: Often provide convenient shortcuts or specific configurations + - For example, `Container()` vs `Container.fromLTRB()` for setting left, top, right, bottom values + - Or `EdgeInsets.all()` vs `EdgeInsets.symmetric()` vs `EdgeInsets.only()` for padding + +When you switch constructors, the Properties Panel will update to show only the properties relevant to that specific constructor, making it easier to configure the widget for your specific use case. + +### Switch Constructors + +1. Select a widget in the Widget Tree or Canvas +2. In the Properties Panel, locate the **Constructor** section at the top +3. Click on the constructor dropdown (typically showing "Default" or the current constructor name) +4. Select a different constructor from the available options +