Skip to content

Properties Panel V2 Updates #59

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
PoojaB26 merged 2 commits into from
Jan 23, 2026
Merged

Properties Panel V2 Updates #59

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
95dcea5
Update properties panel arcades
pinkeshmars Dec 24, 2025
7e8fec5
add more info about the new properties panel
PoojaB26 Jan 14, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added docs/workspace/imgs/properties-panel-ex.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
287 changes: 279 additions & 8 deletions docs/workspace/properties-panel.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ The Properties Panel allows you to edit widget properties in real-time, providin
height: 0,
width: '100%'}}>
<iframe
src="https://demo.arcade.software/6AJA10eoZEfsJPrjKyrp?embed&show_copy_link=true"
src="https://demo.arcade.software/ylwlUjH3jbhrogoB0riK?embed&show_copy_link=true"
title=""
style={{
position: 'absolute',
Expand All @@ -39,18 +39,289 @@ The Properties Panel allows you to edit widget properties in real-time, providin


:::tip[Quick Access from Widget Tree]
The Properties Panel can be quickly accessed by double clicking any widget in the Widget Tree. The panel will automatically update to show the properties of the selected widget.
The Properties Panel can be quickly accessed by double clicking any widget in the Widget Tree. The panel will automatically update to show the properties of the selected widget.
:::

:::note[Switching to Code]


The Properties Panel consists of several key surface elements that help you navigate and edit widget properties:


**Root Widget Name**: At the top of the Properties Panel, you'll see the root icon and name for the selected widget (e.g., a cube icon for Container, a map icon for GoogleMap). This visual identifier helps you quickly recognize which widget you're currently editing.

**Search**: The search bar at the top of the panel allows you to quickly find properties by name, type, or value.

**Widget Properties**: The main section displays all properties for the selected widget, organized by type. See [Property Types](#property-types) for details on different property types and their indicators.

**Modifiers**: At the bottom of the Properties Panel, you can add wrapper widgets to modify behavior, appearance, or layout. See [Modifiers](#modifiers) for detailed information.

![Properties Panel](imgs/properties-panel-ex.png)




## Property Types

The Properties Panel supports various property types, each with specialized editors and visual indicators. Properties are marked with icons that indicate their type and how you can interact with them.

### Common Property Types

The panel supports a wide range of property types including:
- **Text** - String values and text content
- **Numbers** - Numeric values for dimensions, spacing, etc.
- **Colors** - Color pickers for backgrounds, borders, text colors
- **Icons** - Icon selectors and custom icon properties
- **Images** - Image selectors and asset management
- **Widgets** - Child widgets and widget references
- **Booleans** - Toggle switches for true/false values
- **Lists/Arrays** - Collections of items (columns, rows, etc.)
- **Enums** - Dropdown selections for predefined options

Each property type has its own specialized editor optimized for that data type, making it easy to configure widgets without writing code.

**Example**

For example, here's how the Properties Panel appears when editing a Container widget:

<div style={{
Copy link
Collaborator

@pinkeshmars pinkeshmars Jan 21, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In this Arcade:

  1. The intro slide (first slide) is added by default, but we usually don’t include it. We prefer to start directly with selecting the relevant element.
  2. The Arcade currently ends abruptly on the shape dropdown. Could we add a couple of additional slides that show the newly selected shape and then return to the main container without any hotspots, so the Arcade doesn’t restart from the beginning?

Copy link
Collaborator Author

@PoojaB26 PoojaB26 Jan 23, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done! Thx!

position: 'relative',
paddingBottom: 'calc(50.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
height: 0,
width: '100%'}}>
<iframe
src="https://demo.arcade.software/CFMeS9Pvdklc5IiJAoPV?embed&show_copy_link=true"
title=""
style={{
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: '100%',
colorScheme: 'light'
}}
frameBorder="0"
loading="lazy"
webkitAllowFullScreen
mozAllowFullScreen
allowFullScreen
allow="clipboard-write">
</iframe>
</div>
<p></p>

#### 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.

<div style={{
position: 'relative',
paddingBottom: 'calc(50.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
height: 0,
width: '100%'}}>
<iframe
src="https://demo.arcade.software/teMRY5B8qPfkeYrHwYRd?embed&show_copy_link=true"
title=""
style={{
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: '100%',
colorScheme: 'light'
}}
frameBorder="0"
loading="lazy"
webkitAllowFullScreen
mozAllowFullScreen
allowFullScreen
allow="clipboard-write">
</iframe>
</div>
<p></p>

### 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.

<div style={{
position: 'relative',
paddingBottom: 'calc(50.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
height: 0,
width: '100%'}}>
<iframe
src="https://demo.arcade.software/2Vp9gL1oT72EL2o6kx8o?embed&show_copy_link=true"
title=""
style={{
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: '100%',
colorScheme: 'light'
}}
frameBorder="0"
loading="lazy"
webkitAllowFullScreen
mozAllowFullScreen
allowFullScreen
allow="clipboard-write">
</iframe>
</div>
<p></p>

### 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.


<div style={{
position: 'relative',
paddingBottom: 'calc(50.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
height: 0,
width: '100%'}}>
<iframe
src="https://demo.arcade.software/Z4dbFaIdPdz4g27FIUg5?embed&show_copy_link=true"
title=""
style={{
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: '100%',
colorScheme: 'light'
}}
frameBorder="0"
loading="lazy"
webkitAllowFullScreen
mozAllowFullScreen
allowFullScreen
allow="clipboard-write">
</iframe>
</div>
<p></p>

### 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.


<div style={{
position: 'relative',
paddingBottom: 'calc(50.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
height: 0,
width: '100%'}}>
<iframe
src="https://demo.arcade.software/kGqhA6rT9voqoi4Xrxl2?embed&show_copy_link=true"
title=""
style={{
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: '100%',
colorScheme: 'light'
}}
frameBorder="0"
loading="lazy"
webkitAllowFullScreen
mozAllowFullScreen
allowFullScreen
allow="clipboard-write">
</iframe>
</div>
<p></p>

#### 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.
:::

<div style={{
position: 'relative',
paddingBottom: 'calc(50.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
height: 0,
width: '100%'}}>
<iframe
src="https://demo.arcade.software/3VzSt8gjrJw5tGwlIZFX?embed&show_copy_link=true"
title=""
style={{
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: '100%',
colorScheme: 'light'
}}
frameBorder="0"
loading="lazy"
webkitAllowFullScreen
mozAllowFullScreen
allowFullScreen
allow="clipboard-write">
</iframe>
</div>
<p></p>



## 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

## 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.

<div style={{
position: 'relative',
paddingBottom: 'calc(50.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
height: 0,
width: '100%'}}>
<iframe
src="https://demo.arcade.software/nfpojRUhatIg69DuLsrM?embed&show_copy_link=true"
title=""
style={{
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: '100%',
colorScheme: 'light'
}}
frameBorder="0"
loading="lazy"
webkitAllowFullScreen
mozAllowFullScreen
allowFullScreen
allow="clipboard-write">
</iframe>
</div>
<p></p>


:::tip[Constructor-Specific Properties]
Some properties may only be available with certain constructors. If you don't see a property you need, try switching to a different constructor that supports it.
:::

## Modifiers

Expand Down Expand Up @@ -91,7 +362,7 @@ Modifier widgets are hidden from the "Simplified View" in the [**widget tree**](
height: 0,
width: '100%'}}>
<iframe
src="https://demo.arcade.software/JPPGJVEhgwSBhviyKmUs?embed&show_copy_link=true"
src="https://demo.arcade.software/NTeLIjTN1QAfLyyx4BVB?embed&show_copy_link=true"
title=""
style={{
position: 'absolute',
Expand Down