Dashboard Editor

Visual Dashboard Builder

A configurable dashboard editor for Flutter with row/column grid layouts, a rich chart library, API data sources, a command-based editing system with undo/redo, and a plugin architecture for custom components.

Key Capabilities

Row & Column Layout

Grid-based dashboard structure with rows, columns, and slots. Split, resize, and reorder columns with flex-based sizing.

Chart Renderers

Pie, donut, bar, stacked/grouped bar, line, multi-line, area, sparkline, and gauge chart renderers with field mapping.

Command System & Undo/Redo

All layout changes go through a command system (add/remove/split rows, add/remove/reorder columns) with full undo/redo history.

Plugin-Based Components

Register custom dashboard components via ComponentDescriptor. Components are placed in column slots through the component palette.

Core Components

Component	Description
DashboardLayout	Main structure with rows, columns, and sections
DashboardEngine	Execution engine processing events and commands
DashboardEditor	Full editor widget with canvas, palette, and properties panel
ComponentDescriptor	Defines a dashboard component type with its configuration and renderer
ChartRendererFactory	Creates chart renderers (pie, bar, line, gauge, etc.) from configuration
ApiDataSource	REST API data source with endpoint testing
CommandHistory	Undo/redo stack for all layout operations
DashboardEditorRegistry	Central registry for components, categories, and property editors

Packages

vyuh_dashboard_editorDashboard designer with row/column layout, charts, and data sources

Chart Library

Built-in chart renderers available through ChartRendererFactory:

Renderer	Description
`PieChartRenderer`	Standard pie chart
`DonutChartRenderer`	Donut/ring chart
`BarChartRenderer`	Vertical bar chart
`StackedBarChartRenderer`	Stacked bar chart
`GroupedBarChartRenderer`	Grouped/clustered bars
`LineChartRenderer`	Single line chart
`MultiLineChartRenderer`	Multiple lines chart
`AreaChartRenderer`	Filled area chart
`SparklineChartRenderer`	Compact inline chart
`GaugeChartRenderer`	Gauge/meter display

Extensions

The dashboard editor supports pluggable extensions:

DashboardHistoryExtension — Undo/redo support via command history
DashboardPersistenceExtension — Save and load dashboard layouts
DashboardSelectionExtension — Selection state management
DashboardAnalyticsExtension — Analytics tracking for editor actions

Quick Example

dart

// Define a dashboard layout
final layout = DashboardLayout(
  rows: [
    DashboardRow(
      id: 'row-kpi',
      title: 'KPI Overview',
      order: 0,
      columns: [
        DashboardColumn(id: 'col-1', flex: 1, section: revenueSection),
        DashboardColumn(id: 'col-2', flex: 1, section: ordersSection),
        DashboardColumn(id: 'col-3', flex: 1, section: usersSection),
      ],
    ),
    DashboardRow(
      id: 'row-charts',
      title: 'Charts',
      order: 1,
      columns: [
        DashboardColumn(id: 'col-4', flex: 2, section: trendSection),
        DashboardColumn(id: 'col-5', flex: 1, section: distributionSection),
      ],
    ),
  ],
);

// Each section references a registered component by key
final trendSection = DashboardSection(
  id: 'section-trend',
  componentKey: 'line-chart',
  title: 'Monthly Trend',
  properties: (PropertyCollectionBuilder()
    ..string('dataSource', 'API Endpoint', defaultValue: '/api/sales/monthly')
    ..boolean('showArea', 'Show Area Fill', defaultValue: true)
  ).buildCollection(),
);

Dashboard Editor ​