You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/workspace/properties-panel.md
+226-7Lines changed: 226 additions & 7 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -39,10 +39,211 @@ The Properties Panel allows you to edit widget properties in real-time, providin
39
39
40
40
41
41
:::tip[Quick Access from Widget Tree]
42
-
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.
42
+
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.
43
43
:::
44
44
45
-
:::note[Switching to Code]
45
+
46
+
47
+
The Properties Panel consists of several key surface elements that help you navigate and edit widget properties:
48
+
49
+
50
+
**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.
51
+
52
+
**Search**: The search bar at the top of the panel allows you to quickly find properties by name, type, or value.
53
+
54
+
**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.
55
+
56
+
**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.
57
+
58
+
59
+
60
+
61
+
62
+
63
+
## Property Types
64
+
65
+
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.
66
+
67
+
### Common Property Types
68
+
69
+
The panel supports a wide range of property types including:
70
+
-**Text** - String values and text content
71
+
-**Numbers** - Numeric values for dimensions, spacing, etc.
72
+
-**Colors** - Color pickers for backgrounds, borders, text colors
73
+
-**Icons** - Icon selectors and custom icon properties
74
+
-**Images** - Image selectors and asset management
75
+
-**Widgets** - Child widgets and widget references
76
+
-**Booleans** - Toggle switches for true/false values
77
+
-**Lists/Arrays** - Collections of items (columns, rows, etc.)
78
+
-**Enums** - Dropdown selections for predefined options
79
+
80
+
Each property type has its own specialized editor optimized for that data type, making it easy to configure widgets without writing code.
81
+
82
+
**Example**
83
+
84
+
For example, here's how the Properties Panel appears when editing a Container widget:
85
+
86
+
<div style={{
87
+
position: 'relative',
88
+
paddingBottom: 'calc(50.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
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.
115
+
116
+
<div style={{
117
+
position: 'relative',
118
+
paddingBottom: 'calc(50.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
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.
145
+
146
+
When working with conditional values, you can:
147
+
- Set up conditions using any valid Dart expression
148
+
- Define different values for the true and false branches
149
+
- Use any property type (widgets, colors, numbers, strings, etc.) in each branch
150
+
- Nest conditions for more complex logic
151
+
152
+
This feature is especially powerful for creating dynamic UIs that respond to state changes, user interactions, or other runtime conditions.
153
+
154
+
<div style={{
155
+
position: 'relative',
156
+
paddingBottom: 'calc(50.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
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.
183
+
184
+
You can click on these properties to open the code editor and define the function that will be called when the action is triggered.
185
+
186
+
187
+
<div style={{
188
+
position: 'relative',
189
+
paddingBottom: 'calc(50.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
Properties that represent variables or code expressions (rather than actions or functions) are indicated with a code block icon (`</>`).
216
+
217
+
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.
218
+
219
+
220
+
<div style={{
221
+
position: 'relative',
222
+
paddingBottom: 'calc(50.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
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.
47
248
48
249
<div style={{
@@ -71,20 +272,33 @@ To switch from the visual property editor to a code-based property editor, hover
71
272
</div>
72
273
<p></p>
73
274
74
-
:::
75
275
76
276
77
-
## Adding Hidden Properties
78
-
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.
79
-
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.
277
+
## Constructors
278
+
279
+
Many Flutter widgets support multiple constructors, each with different parameter sets. Constructors are different ways to initialize a widget:
280
+
-**Default constructor**: The standard way to create a widget with all properties available
281
+
-**Named constructors**: Often provide convenient shortcuts or specific configurations
282
+
- For example, `Container()` vs `Container.fromLTRB()` for setting left, top, right, bottom values
283
+
- Or `EdgeInsets.all()` vs `EdgeInsets.symmetric()` vs `EdgeInsets.only()` for padding
284
+
285
+
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.
286
+
287
+
### Switch Constructors
288
+
289
+
1. Select a widget in the Widget Tree or Canvas
290
+
2. In the Properties Panel, locate the **Constructor** section at the top
291
+
3. Click on the constructor dropdown (typically showing "Default" or the current constructor name)
292
+
4. Select a different constructor from the available options
293
+
80
294
81
295
<div style={{
82
296
position: 'relative',
83
297
paddingBottom: 'calc(50.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
@@ -104,6 +318,11 @@ If you are looking for a hidden property, you can search for it or add it using
104
318
</div>
105
319
<p></p>
106
320
321
+
322
+
:::tip[Constructor-Specific Properties]
323
+
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.
324
+
:::
325
+
107
326
## Modifiers
108
327
109
328
Modifiers refer to wrapper widgets that can be added around existing Flutter widgets to modify their behavior, appearance, or layout. Think of them as "decorators" that wrap around your base widgets. They are Flutter widgets that wrap around other widgets to modify their:
0 commit comments