Quick Start

Build an LMS analytics dashboard in 5 minutes. You will create a layout with stat cards and a chart, register components, wire up the engine, and render the dashboard.

The Scenario

We are building a Learning Management System dashboard that shows:

1. Stat cards -- Total Students, Active Courses, Completion Rate
2. A bar chart -- Enrollments per course level

1. 1

   Define Component Properties

   Each component stores its configuration in a PropertyCollection created by a factory function.

   stat_card_properties.dart
2. 2

   Create Component Descriptors

   Use ComponentDescriptor to define components declaratively — no subclassing needed.

   stat_card_descriptor.dart
3. 3

   Create a Registry

   Group components into a DashboardDescriptor and create a scoped registry.
4. 4

   Create a Dashboard Layout

   Build the layout with rows and columns. Each row uses 6 flex units total.

   dashboard_layout.dart
5. 5

   Start the Controller

   Create a DashboardEditorController with the layout and registry.
6. 6

   Mutate with Commands

   All changes go through the controller's command-backed API.
7. 7

   Render the Dashboard

   Use DashboardDesignerTab for the full editing experience, or DashboardView for read-only runtime rendering.

What You Built

In these 7 steps, you have:

• Defined component properties with PropertyCollectionBuilder
• Created a ComponentDescriptor with rendering and configuration
• Created a scoped DashboardEditorRegistry from DashboardDescriptor
• Assembled a DashboardLayout with rows, columns, and components
• Started the DashboardEditorController with built-in extensions
• Mutated the layout through commands with undo/redo
• Rendered the dashboard with DashboardDesignerTab or DashboardView

Next Steps

• Design Philosophy -- Understand the core principles
• Architecture -- Deep dive into the engine
• Building Dashboards -- Step-by-step LMS dashboard guide
• Custom Components -- Build stat cards, KPIs, and charts