voo_navigation_drawer #

Navigation drawer components for Flutter - part of the voo_navigation package ecosystem. Provides full-featured navigation drawers for desktop layouts with Material 3 design.

Features #

• Expandable sections with smooth animations
• User profile footer integration
• Custom header and footer widgets
• Collapsible drawer-to-rail mode
• Theme preset support (glassmorphism, neomorphism, etc.)
• Material 3 compliant design

Installation #

dependencies:
  voo_navigation_drawer: ^0.1.0

Or use the main package which includes all navigation components:

dependencies:
  voo_navigation: ^1.2.0

Components #

Usage #

Basic Navigation Drawer #

import 'package:voo_navigation_drawer/voo_navigation_drawer.dart';
import 'package:voo_navigation_core/voo_navigation_core.dart';

VooAdaptiveNavigationDrawer(
  config: VooNavigationConfig(
    items: [
      VooNavigationItem(
        id: 'home',
        label: 'Home',
        icon: Icons.home_outlined,
        selectedIcon: Icons.home,
      ),
      VooNavigationItem(
        id: 'projects',
        label: 'Projects',
        icon: Icons.folder_outlined,
        selectedIcon: Icons.folder,
      ),
      VooNavigationItem(
        id: 'settings',
        label: 'Settings',
        icon: Icons.settings_outlined,
        selectedIcon: Icons.settings,
      ),
    ],
    selectedId: 'home',
    onNavigationItemSelected: (id) {
      // Handle navigation
    },
  ),
)

With Expandable Sections #

Group navigation items into expandable sections:

VooAdaptiveNavigationDrawer(
  config: VooNavigationConfig(
    items: [
      VooNavigationItem.section(
        label: 'Workspace',
        icon: Icons.workspaces,
        isExpanded: true,
        children: [
          VooNavigationItem(id: 'projects', label: 'Projects', icon: Icons.folder),
          VooNavigationItem(id: 'tasks', label: 'Tasks', icon: Icons.task),
          VooNavigationItem(id: 'calendar', label: 'Calendar', icon: Icons.calendar_today),
        ],
      ),
      VooNavigationItem.section(
        label: 'Communication',
        icon: Icons.chat,
        children: [
          VooNavigationItem(id: 'messages', label: 'Messages', icon: Icons.message, badgeCount: 3),
          VooNavigationItem(id: 'email', label: 'Email', icon: Icons.email),
        ],
      ),
    ],
    selectedId: 'projects',
    onNavigationItemSelected: (id) {},
  ),
)

With Custom Header and Footer #

VooAdaptiveNavigationDrawer(
  config: VooNavigationConfig(
    items: items,
    selectedId: selectedId,
    onNavigationItemSelected: (id) {},
    drawerHeader: Container(
      padding: EdgeInsets.all(16),
      child: Row(
        children: [
          Image.asset('assets/logo.png', height: 32),
          SizedBox(width: 12),
          Text('My App', style: TextStyle(fontWeight: FontWeight.bold)),
        ],
      ),
    ),
    drawerFooter: ListTile(
      leading: Icon(Icons.help_outline),
      title: Text('Help & Support'),
      onTap: () {},
    ),
  ),
)

With User Profile Footer #

VooAdaptiveNavigationDrawer(
  config: VooNavigationConfig(
    items: items,
    selectedId: selectedId,
    onNavigationItemSelected: (id) {},
    showUserProfile: true,
    userProfileWidget: VooUserProfileFooter(
      userName: 'John Doe',
      userEmail: 'john@example.com',
      avatarUrl: 'https://example.com/avatar.jpg',
      status: VooUserStatus.online,
      onTap: () => print('Profile tapped'),
      onSettingsTap: () => print('Settings'),
      onLogout: () => print('Logout'),
    ),
  ),
)

With Badges #

VooNavigationItem(
  id: 'inbox',
  label: 'Inbox',
  icon: Icons.inbox_outlined,
  selectedIcon: Icons.inbox,
  badgeCount: 12, // Shows "12"
)

VooNavigationItem(
  id: 'updates',
  label: 'Updates',
  icon: Icons.notifications_outlined,
  badgeText: 'NEW', // Shows custom text
  badgeColor: Colors.orange,
)

Collapsible Drawer #

Enable the drawer to collapse into a navigation rail:

VooNavigationConfig(
  items: items,
  selectedId: selectedId,
  enableCollapsibleRail: true,
  onCollapseChanged: (isCollapsed) {
    print('Drawer collapsed: $isCollapsed');
  },
)

Theme Presets #

Apply visual themes to the navigation drawer:

VooAdaptiveNavigationDrawer(
  config: VooNavigationConfig.glassmorphism(
    items: items,
    selectedId: selectedId,
    onNavigationItemSelected: (id) {},
  ),
)

Available presets:

• glassmorphism - Frosted glass effect
• liquidGlass - Deep blur with layers
• blurry - Clean frosted blur
• neomorphism - Soft embossed effect
• material3Enhanced - Polished Material 3
• minimalModern - Clean flat design

Responsive Usage #

The drawer is typically used on larger screens (> 1240px). For responsive layouts, use the main voo_navigation package which automatically switches between drawer, rail, and bottom navigation based on screen size.

Dependencies #

This package depends on:

• voo_navigation_core - Core entities and atoms
• voo_tokens - Design system tokens

Related Packages #

License #

MIT License - see LICENSE for details.

Contributing #

Contributions are welcome! Please read our contributing guidelines and follow the code style defined in the project.

Built by VooStack