Vyuh Dashboard Editor

Visual Dashboard Builder

A powerful dashboard creation toolkit for Flutter. Design data-rich dashboards with drag-and-drop widgets, real-time data binding, and responsive layouts.

Why Dashboard Editor?

Grid Layouts

Flexible grid system with drag-and-drop positioning and resizing.

Rich Widgets

Charts, gauges, tables, KPIs, and more with customizable styling.

Real-time Data

Live data streaming with automatic refresh and WebSocket support.

Interactive Filters

Cross-filtering between widgets with drill-down capabilities.

Quick Example

// Define a dashboard
final salesDashboard = Dashboard(
  id: 'sales-overview',
  title: 'Sales Overview',
  layout: GridLayout(columns: 12, rowHeight: 100),
  widgets: [
    KpiWidget(
      position: GridPosition(x: 0, y: 0, w: 3, h: 1),
      title: 'Total Revenue',
      dataSource: 'sales.totalRevenue',
      format: currencyFormat,
    ),
    ChartWidget(
      position: GridPosition(x: 0, y: 1, w: 8, h: 3),
      title: 'Monthly Sales',
      type: ChartType.line,
      dataSource: 'sales.monthlyTrend',
      config: LineChartConfig(
        showArea: true,
        gradient: true,
      ),
    ),
    TableWidget(
      position: GridPosition(x: 8, y: 1, w: 4, h: 3),
      title: 'Top Products',
      dataSource: 'sales.topProducts',
      columns: ['Product', 'Units', 'Revenue'],
    ),
  ],
);

// Render with real-time updates
VyuhDashboard(
  dashboard: salesDashboard,
  dataProvider: RealtimeDataProvider(
    refreshInterval: Duration(seconds: 30),
  ),
);

Widget Library

Line Charts

Bar Charts

Pie Charts

Gauges

Data Tables

KPI Cards

Maps

Rich Text

Core Features

ResponsiveMobile-optimized layouts

ExportPDF, image, and data export

SharingDashboard templates and sharing

Coming Soon

Comprehensive documentation is being developed. Check back soon for:

• Installation and setup guide
• Widget development
• Data source integration
• Theming and branding
• Performance optimization