Dashboard Editor

Visual Dashboard Builder

A configurable dashboard editor for Flutter with row/column grid layouts, declarative component descriptors, a command-based editing system with undo/redo, pluggable extensions, and an integrated chart library with data source binding.

Key Capabilities

Row & Column Layout

Grid-based dashboard structure with rows, columns, and slots. Split, resize, and reorder columns with flex-based sizing (6 flex units per row).

Component Descriptor Pattern

Declarative, composition-based components via ComponentDescriptor. Define properties, rendering, config panels, and thumbnails as constructor parameters.

Command-Driven Mutations

All layout changes go through reversible commands with full undo/redo history. 20 built-in commands covering every layout operation.

Integrated Chart System

10 chart renderers (pie, donut, bar, stacked/grouped bar, line, multi-line, area, sparkline, gauge) with field mapping and pluggable data sources.

Getting Started

InstallationAdd to your Flutter project

Quick StartBuild an LMS dashboard in 5 minutes

ArchitectureUnderstand the engine and extension system

Core Concepts

Key Components

Component	Description
DashboardLayout	Top-level container: rows, version, metadata. Max 25 rows.
DashboardEngine	MobX-based state kernel: reactive layout, command execution, event emission
ComponentDescriptor	Declarative component definition with properties factory, render callback, and config panel
DashboardEditorRegistry	Scoped registry for dashboard descriptors and their components
DashboardEditorController	Editor facade composing engine with history, persistence, selection, and analytics extensions
ChartRendererFactory	Singleton factory routing ChartData to the correct renderer by chart type
DashboardCommand	Reversible command interface: execute() returns new layout, undo() restores previous
DashboardDataStore	MobX store for API/static data fetching with polling and validation

Learn More

Design PhilosophyPrinciples behind the dashboard editor Building DashboardsStep-by-step LMS analytics dashboard Custom ComponentsBuild stat cards, KPIs, and chart components LMS Dashboard ExampleComplete working LMS analytics dashboard

Quick Example

Define an LMS analytics dashboard with stat cards and a chart:

dart

import 'package:vyuh_dashboard_editor/vyuh_dashboard_editor.dart';
import 'package:vyuh_property_system/vyuh_property_system.dart';

// 1. Define a stat card component using ComponentDescriptor
final enrollmentStatCard = ComponentDescriptor(
  schemaType: 'lms.stat_card',
  componentKey: 'lms_stat_card',
  displayName: 'Enrollment Stat',
  description: 'Shows a single enrollment metric',
  icon: Icons.people,
  category: lmsCategory,
  properties: () => (PropertyCollectionBuilder()
    ..string('title', 'Title', defaultValue: 'Total Students')
    ..integer('value', 'Value', defaultValue: 0)
    ..string('trend', 'Trend', defaultValue: '+12%')
  ).buildCollection(),
  render: (context, props) => StatCardView(properties: props),
);

// 2. Create a scoped registry from DashboardDescriptor groups
final registry = DashboardEditorRegistry([
  DashboardDescriptor(
    name: 'LMS',
    description: 'Learning Management System dashboards',
    components: [enrollmentStatCard, courseChart],
  ),
);

// 3. Create a layout with rows and columns
final layout = DashboardLayout(
  rows: [
    DashboardRow(
      id: 'row-stats',
      order: 0,
      title: 'Enrollment Overview',
      height: 120,
      columns: [
        DashboardColumn.withComponent('col-1', statComponent1, flex: 2),
        DashboardColumn.withComponent('col-2', statComponent2, flex: 2),
        DashboardColumn.withComponent('col-3', statComponent3, flex: 2),
      ],
    ),
  ],
);

// 4. Start the engine/controller with the same registry
final controller = DashboardEditorController(
  initialLayout: layout,
  registry: registry,
);

Dashboard Editor ​