voo_navigation 1.2.4

A comprehensive, adaptive navigation package for Flutter that automatically adjusts to different screen sizes and platforms with Material 3 design.

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:voo_navigation/voo_navigation.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'VoO Navigation Example',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue), useMaterial3: true),
      home: const NavigationExample(),
    );
  }
}

class NavigationExample extends StatefulWidget {
  const NavigationExample({super.key});

  @override
  State<NavigationExample> createState() => _NavigationExampleState();
}

class _NavigationExampleState extends State<NavigationExample> {
  String _selectedId = 'dashboard';
  String _searchQuery = '';

  // Organization switcher state
  late VooOrganization _selectedOrganization;
  final List<VooOrganization> _organizations = [
    const VooOrganization(id: 'acme', name: 'ACME Corp', subtitle: '12 members', avatarColor: Colors.blue),
    const VooOrganization(id: 'startup', name: 'Startup Inc', subtitle: '5 members', avatarColor: Colors.green),
    const VooOrganization(id: 'enterprise', name: 'Enterprise Ltd', subtitle: '50 members', avatarColor: Colors.purple),
  ];

  @override
  void initState() {
    super.initState();
    _selectedOrganization = _organizations.first;
  }

  final List<VooNavigationItem> _items = [
    const VooNavigationItem(id: 'dashboard', label: 'Dashboard', icon: Icons.dashboard_outlined, selectedIcon: Icons.dashboard, mobilePriority: true, route: '/dashboard'),
    VooNavigationItem.section(
      label: 'Teams',
      id: 'teams',
      isExpanded: false,
      children: const [
        VooNavigationItem(id: 'team_overview', label: 'Overview', icon: Icons.groups_outlined, selectedIcon: Icons.groups, route: '/teams/overview'),
        VooNavigationItem(id: 'team_members', label: 'Members', icon: Icons.person_outline, selectedIcon: Icons.person, route: '/teams/members'),
      ],
    ),
    VooNavigationItem.section(
      label: 'Employee',
      id: 'employee',
      isExpanded: true,
      children: const [
        VooNavigationItem(id: 'attendance', label: 'Attendance', icon: Icons.access_time_outlined, selectedIcon: Icons.access_time, route: '/employee/attendance'),
        VooNavigationItem(id: 'checklist', label: 'Checklist', icon: Icons.checklist_outlined, selectedIcon: Icons.checklist, route: '/employee/checklist'),
        VooNavigationItem(id: 'time_off', label: 'Time off', icon: Icons.beach_access_outlined, selectedIcon: Icons.beach_access, route: '/employee/time-off'),
      ],
    ),
    const VooNavigationItem(
      id: 'notifications',
      label: 'Notifications',
      icon: Icons.notifications_outlined,
      selectedIcon: Icons.notifications,
      mobilePriority: true,
      badgeCount: 3,
      route: '/notifications',
    ),
  ];

  final List<VooNavigationItem> _footerItems = [
    const VooNavigationItem(id: 'settings', label: 'Settings', icon: Icons.settings_outlined, selectedIcon: Icons.settings, route: '/settings'),
  ];

  void _onNavigationItemSelected(String itemId) {
    setState(() {
      _selectedId = itemId;
    });
  }

  void _onSearch(String query) {
    setState(() {
      _searchQuery = query;
    });
  }

  void _onOrganizationChanged(VooOrganization org) {
    setState(() {
      _selectedOrganization = org;
    });
  }

  void _onCreateOrganization() {
    // Handle create organization
    debugPrint('Create organization tapped');
  }

  void _onProfileTap() {
    debugPrint('Profile tapped');
  }

  void _onSettingsTap() {
    setState(() {
      _selectedId = 'settings';
    });
  }

  void _onLogout() {
    debugPrint('Logout tapped');
  }

  @override
  Widget build(BuildContext context) {
    return VooAdaptiveScaffold(
      config: VooNavigationConfig(
        items: _items,
        footerItems: _footerItems,
        selectedId: _selectedId,
        onNavigationItemSelected: _onNavigationItemSelected,

        // Simple theme configuration
        navigationTheme: const VooNavigationTheme(borderRadius: 12, elevation: 0),

        // Header configuration with tagline
        headerConfig: const VooHeaderConfig(title: 'ACME', tagline: 'Corp', logoIcon: Icons.rocket_launch, showTitle: true),

        // Enable collapsible rail for desktop
        enableCollapsibleRail: true,

        // ========================================
        // SIMPLIFIED USER PROFILE API
        // ========================================
        // Just set showUserProfile and provide a config object.
        // The profile footer automatically adapts to compact/expanded mode.
        showUserProfile: true,
        userProfileConfig: VooUserProfileConfig(
          userName: 'John Doe',
          userEmail: '[e-mail]',
          initials: 'JD',
          status: VooUserStatus.online,
          onTap: _onProfileTap,
          onSettingsTap: _onSettingsTap,
          onLogout: _onLogout,
          showDropdownIndicator: true,
        ),

        // ========================================
        // SIMPLIFIED ORGANIZATION SWITCHER API
        // ========================================
        // Provide a config object with organizations list.
        // The switcher automatically adapts to compact/expanded mode,
        // shows search when there are many organizations,
        // and handles keyboard navigation.
        organizationSwitcher: VooOrganizationSwitcherConfig(
          organizations: _organizations,
          selectedOrganization: _selectedOrganization,
          onOrganizationChanged: _onOrganizationChanged,
          onCreateOrganization: _onCreateOrganization,
          showCreateButton: true,
          createButtonLabel: 'New Organization',
          tooltip: 'Switch organization',
        ),
        organizationSwitcherPosition: VooOrganizationSwitcherPosition.footer,

        // Search bar configuration
        searchBar: VooSearchBarConfig(hintText: 'Search...', onSearch: _onSearch, enableKeyboardShortcut: true, keyboardShortcutHint: '⌘K'),
        searchBarPosition: VooSearchBarPosition.header,
      ),
      body: _buildBody(),
    );
  }

  Widget _buildBody() {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Icon(_getIconForId(_selectedId), size: 64, color: Theme.of(context).colorScheme.primary),
          const SizedBox(height: 16),
          Text(_getLabelForId(_selectedId), style: Theme.of(context).textTheme.headlineMedium),
          const SizedBox(height: 8),
          Text('Selected: $_selectedId', style: Theme.of(context).textTheme.bodyMedium?.copyWith(color: Theme.of(context).colorScheme.onSurfaceVariant)),
          const SizedBox(height: 8),
          Text('Organization: ${_selectedOrganization.name}', style: Theme.of(context).textTheme.bodyMedium?.copyWith(color: Theme.of(context).colorScheme.primary)),
          if (_searchQuery.isNotEmpty) ...[
            const SizedBox(height: 16),
            Text('Search: $_searchQuery', style: Theme.of(context).textTheme.bodyMedium?.copyWith(color: Theme.of(context).colorScheme.tertiary)),
          ],
        ],
      ),
    );
  }

  VooNavigationItem? _findItemById(String id) {
    final allItems = [..._items, ..._footerItems];
    for (final item in allItems) {
      if (item.id == id) return item;
      if (item.children != null) {
        for (final child in item.children!) {
          if (child.id == id) return child;
        }
      }
    }
    return null;
  }

  IconData _getIconForId(String id) {
    final item = _findItemById(id) ?? _items.first;
    return item.selectedIcon ?? item.icon;
  }

  String _getLabelForId(String id) {
    final item = _findItemById(id) ?? _items.first;
    return item.label;
  }
}