Quick Start

Build a complete Course Settings panel in 5 minutes using the Property System.

The Scenario

We will create a settings panel for a Learning Management System course that:

1. Has text, number, enum, and boolean properties
2. Shows/hides fields based on other values (conditions)
3. Renders as an editable form
4. Serializes to JSON

1. 1

   Define the Properties

   Use PropertyCollectionBuilder to declare properties with the fluent API.

   course_settings.dart
2. 2

   Render the Editor

   The PropertyCollectionEditor widget renders the entire collection as a grouped, editable form.

   course_settings_panel.dart
3. 3

   Add a Condition

   Notice how capacity is only visible when enrollmentType is limited. This is defined inline via visibleCondition.

   When the user selects a different enrollment type, the capacity field automatically hides. The condition is evaluated reactively whenever the dependent property changes.

4. 4

   Read Values and Serialize

   Access property values programmatically.

How It Fits Together

Key Concepts Introduced

Concept	Description
PropertyCollectionBuilder	Fluent builder for declaring properties and groups
PropertyCollection	Container for properties with validation, serialization, and reactivity
PropertyCollectionEditor	Widget that renders all properties as an editable form
PropertyGroup	Named group for organizing properties into sections
PropertyCondition	Reactive condition controlling visibility or enabled state
PropertyValidators	Factory for built-in validators (required, min, max, etc.)
EnumProperty<T>	Property type for selecting from a list of typed options
EnumOption<T>	An option in an enum property with value and display title

Next Steps

• Design Philosophy -- Understand the principles behind the system
• Architecture -- Deep dive into the pipeline design
• Property Types -- All built-in types in detail