Skip to main content

Properties Panel

The Properties Panel allows you to edit widget properties in real-time, providing both easy-to-use visual editors and flexible code-based editing capabilities.

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.

Switching to Code

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.

Modifiers​

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:

  • Layout behavior (positioning, sizing, constraints)
  • Visual appearance (colors, borders, shadows, opacity)
  • Interactive behavior (gestures, focus, accessibility)
  • Animation properties (transitions, transformations)
Modifiers in the Widget Tree

Modifier widgets are hidden from the "Simplified View" in the widget tree.

Adding a Modifier​

  1. Select any widget in the Widget Tree Panel that you want to wrap with a Modifier widget.

  2. In the Properties Panel, scroll down to the Modifiers section at the bottom.

  3. Click the + button next to "Modifiers" tab to open the Modifier selection menu.

  4. Choose from available wrapper widgets such as:

    • Container - For padding, margin, decoration, and constraints
    • Padding - For adding space around content
    • Center - For centering content
    • Align - For positioning content
    • SizedBox - For setting specific dimensions
    • Transform - For rotations, scaling, and translations & other such modifier widgets.

  5. The Modifier widget will be added to your widget hierarchy and its properties will appear in the Modifiers tab section of the Properties panel, where you can edit them immediately.