SSideBar class

A customizable and responsive sidebar widget for Flutter applications.

The SSideBar provides a beautiful, animated sidebar with extensive customization options including collapsible design, badge support, tooltips, and adaptive layouts.

Features

• Collapsible: Toggle between expanded and minimized states
• Adaptive Layout: Automatically adjusts button size based on available space
• Badge Support: Display notifications and counts on menu items
• Tooltips: Show helpful tooltips when minimized
• Smooth Animations: Configurable animation curves and durations
• Accessibility: Built-in semantics and keyboard navigation
• Customizable: Extensive styling options for colors, sizes, and spacing

Basic Usage

SSideBar(
  sidebarItems: [
    SSideBarItem(
      iconSelected: Icons.home,
      iconUnselected: Icons.home_outlined,
      title: 'Home',
    ),
    SSideBarItem(
      iconSelected: Icons.settings,
      iconUnselected: Icons.settings_outlined,
      title: 'Settings',
    ),
  ],
  onTapForAllTabButtons: (index) {
    print('Selected item: $index');
  },
)

Adaptive Layout

The sidebar intelligently adapts to available space:

• Plenty of space: Minimize button expands to fill remaining vertical space
• Constrained space: Minimize button takes minimal space at bottom
• Items scrolling: Sidebar items scroll when content exceeds height

Customization

SSideBar(
  // Colors
  sideBarColor: Color(0xff1D1D1D),
  selectedIconColor: Colors.white,
  unselectedIconColor: Color(0xffA0A5A9),
  selectedTextColor: Colors.white,
  unSelectedTextColor: Color(0xffA0A5A9),
  selectedIconBackgroundColor: Color(0xff323232),

  // Dimensions
  sideBarWidth: 240,
  sideBarSmallWidth: 84,
  sideBarHeight: 600, // null for full height
  borderRadius: 20,
  sideBarItemHeight: 48,

  // Behavior
  isMinimized: false,
  compactMode: false,
  settingsDivider: true,
  showTooltipsWhenMinimized: true,
  preSelectedItemIndex: 0,

  // Callbacks
  minimizeButtonOnTap: (isMinimized) {
    print('Sidebar minimized: $isMinimized');
  },
)