VooDashboard #

A comprehensive, responsive dashboard UI kit for Flutter with sidebar/topbar navigation, stat cards, chart containers, and activity feeds.

Features #

• Responsive Layout - Automatically adapts to mobile, tablet, and desktop
• Flexible Navigation - Sidebar, topbar, or both
• Collapsible Sidebar - Expands/collapses with icon-only mode
• Stat Cards - Display KPIs with trends and icons
• Chart Containers - Styled wrappers for any chart library
• Activity Feed - Recent activities with timestamps
• Breadcrumbs - Navigation trail for deep hierarchies
• Theme Integration - Works with Material 3 and voo_tokens

Installation #

dependencies:
  voo_dashboard: ^0.0.1

Quick Start #

import 'package:voo_dashboard/voo_dashboard.dart';

class MyDashboard extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return VooDashboard(
      sidebar: VooDashboardSidebar(
        sections: [
          VooDashboardNavSection(
            id: 'main',
            items: [
              VooDashboardNavItem(
                id: 'home',
                label: 'Home',
                icon: Icons.home,
              ),
              VooDashboardNavItem(
                id: 'analytics',
                label: 'Analytics',
                icon: Icons.analytics,
              ),
            ],
          ),
        ],
        selectedItemId: 'home',
        onItemSelected: (item) => print('Selected: ${item.id}'),
      ),
      topBar: VooDashboardTopBar(
        title: Text('Dashboard'),
        userMenu: VooDashboardUserMenu(
          displayName: 'John Doe',
          avatarUrl: 'https://example.com/avatar.png',
        ),
      ),
      body: SingleChildScrollView(
        padding: EdgeInsets.all(24),
        child: Column(
          children: [
            VooStatGrid(
              children: [
                VooStatCard(
                  value: '\$45,231',
                  label: 'Revenue',
                  icon: Icons.attach_money,
                  trend: 12.5,
                ),
                VooStatCard(
                  value: '2,350',
                  label: 'Users',
                  icon: Icons.people,
                  trend: 5.2,
                ),
              ],
            ),
            SizedBox(height: 24),
            VooChartContainer(
              title: 'Sales Trend',
              chart: MyLineChart(), // Your chart widget
            ),
          ],
        ),
      ),
    );
  }
}

Components #

Layout #

Widgets #

Responsive Behavior #

Configuration #

VooDashboard(
  config: VooDashboardConfig(
    sidebar: VooDashboardSidebarConfig(
      expandedWidth: 280,
      collapsedWidth: 72,
      collapsible: true,
    ),
    topBar: VooDashboardTopBarConfig(
      height: 56,
      sticky: true,
    ),
  ),
  // ...
)

License #

MIT License - see LICENSE for details.