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');
  },
)

Inheritance

Available extensions

Constructors

SSideBar({Key? key, Color sideBarColor = const Color(0xff1D1D1D), Color selectedIconBackgroundColor = const Color(0xff323232), Color unSelectedTextColor = const Color(0xffA0A5A9), Color selectedTextColor = Colors.white, Color selectedIconColor = Colors.white, Color unselectedIconColor = const Color(0xffA0A5A9), Color hoverColor = Colors.black38, Color splashColor = Colors.black87, Color highlightColor = Colors.black, Color? minimizeButtonColor, double borderRadius = 20, double sideBarWidth = 240, double? sideBarHeight, double sideBarSmallWidth = 84, bool settingsDivider = true, bool isMinimized = false, bool compactMode = false, bool showTooltipsWhenMinimized = true, Curve curve = Curves.easeOutExpo, Duration sideBarAnimationDuration = const Duration(milliseconds: 700), Duration floatingAnimationDuration = const Duration(milliseconds: 300), Color dividerColor = const Color(0xff929292), TextStyle textStyle = const TextStyle(fontFamily: "SFPro", fontSize: 16, color: Colors.white), double sideBarItemHeight = 48, double itemHorizontalPadding = 10, double itemIconTextSpacing = 12, double itemBorderRadius = 10, double? minimizeButtonIconSize, BoxBorder? sideBarBorder, required List<SSideBarItem> sidebarItems, required ValueChanged<int>? onTapForAllTabButtons, Widget? logo, int? preSelectedItemIndex, bool ignoreDifferenceOnFlutterWeb = false, dynamic minimizeButtonOnTap(bool isMinimized)?, List<bool> shouldTapItems = const []}): Creates a configurable sidebar widget.
const

Properties

borderRadius → double: Size and shape configuration for the sidebar container and items.
final
compactMode → bool: Whether to use compact spacing and smaller item heights.
final
curve → Curve: Curve used for width/position animations.
final
dividerColor → Color: Colors used to style the sidebar and its interactive states.
final
floatingAnimationDuration → Duration: Animation durations for the sidebar resize and floating effects.
final
hashCode → int: The hash code for this object.
no setterinherited
highlightColor → Color: Colors used to style the sidebar and its interactive states.
final
hoverColor → Color: Colors used to style the sidebar and its interactive states.
final
ignoreDifferenceOnFlutterWeb → bool: Whether to show a divider before the last items and start minimized.
final
isMinimized → bool: Whether to show a divider before the last items and start minimized.
final
itemBorderRadius → double: Corner radius for item highlight/selection background.
final
itemHorizontalPadding → double: Horizontal padding inside each sidebar item.
final
itemIconTextSpacing → double: Spacing between the icon and the label text.
final
key → Key?: Controls how one widget replaces another widget in the tree.
finalinherited
logo → Widget?: Optional logo widget displayed at the top of the sidebar.
final
minimizeButtonColor → Color?: Optional color for the minimize button; defaults to a semi-transparent blue if not provided.
final
minimizeButtonIconSize → double?: Optional size for the minimize button icon; defaults to 60.
final
minimizeButtonOnTap → dynamic Function(bool isMinimized)?: Callback invoked when the minimize button is tapped.
final
onTapForAllTabButtons → ValueChanged<int>?: Called when a sidebar item is tapped, providing its index.
final
preSelectedItemIndex → int?: Optional initial selection index.
final
runtimeType → Type: A representation of the runtime type of the object.
no setterinherited
selectedIconBackgroundColor → Color: Colors used to style the sidebar and its interactive states.
final
selectedIconColor → Color: Colors used to style the sidebar and its interactive states.
final
selectedTextColor → Color: Colors used to style the sidebar and its interactive states.
final
settingsDivider → bool: Whether to show a divider before the last items and start minimized.
final
shouldTapItems → List<bool>: Per-item enablement flags for tap handling.
final
showTooltipsWhenMinimized → bool: Whether to show tooltips while the sidebar is minimized.
final
sideBarAnimationDuration → Duration: Animation durations for the sidebar resize and floating effects.
final
sideBarBorder → BoxBorder?: Optional custom border for the sidebar container.
final
sideBarColor → Color: Colors used to style the sidebar and its interactive states.
final
sideBarHeight → double?: Optional fixed height for the sidebar; defaults to full available height.
final
sideBarItemHeight → double: Size and shape configuration for the sidebar container and items.
final
sidebarItems → List<SSideBarItem>: Items displayed in the sidebar menu.
final
sideBarSmallWidth → double: Size and shape configuration for the sidebar container and items.
final
sideBarWidth → double: Size and shape configuration for the sidebar container and items.
final
splashColor → Color: Colors used to style the sidebar and its interactive states.
final
textStyle → TextStyle: Text style for sidebar item labels.
final
unselectedIconColor → Color: Colors used to style the sidebar and its interactive states.
final
unSelectedTextColor → Color: Colors used to style the sidebar and its interactive states.
final

Methods

addMaterialWidget() → Material: Available on Widget, provided by the GenericExtensions extension
addTooltipWidget(String toolTip) → Tooltip: Available on Widget, provided by the GenericExtensions extension
animate({Key? key, List<Effect>? effects, AnimateCallback? onInit, AnimateCallback? onPlay, AnimateCallback? onComplete, bool? autoPlay, Duration? delay, AnimationController? controller, Adapter? adapter, double? target, double? value}) → Animate: Available on Widget, provided by the AnimateWidgetExtensions extension
Wraps the target Widget in an Animate instance, and returns the instance for chaining calls. Ex. myWidget.animate() is equivalent to Animate(child: myWidget).
borderRadius([BorderRadiusGeometry? borderRadius]) → Widget: Available on Widget, provided by the GenericExtensions extension
boxDecoration([BoxDecoration? boxDecoration]) → Widget: Available on Widget, provided by the GenericExtensions extension
colorFilter([ColorFilter? colorFilter]) → Widget: Available on Widget, provided by the GenericExtensions extension
set parent widget in center
createElement() → StatefulElement: Creates a StatefulElement to manage this widget's location in the tree.
inherited
createState() → State<SSideBar>: Creates the mutable state for this widget at a given location in the tree.
override
debugDescribeChildren() → List<DiagnosticsNode>: Returns a list of DiagnosticsNode objects describing this node's children.
inherited
debugFillProperties(DiagnosticPropertiesBuilder properties) → void: Add additional properties associated with the node.
inherited
noSuchMethod(Invocation invocation) → dynamic: Invoked when a nonexistent method or property is accessed.
inherited
toDiagnosticsNode({String? name, DiagnosticsTreeStyle? style}) → DiagnosticsNode: Returns a debug representation of the object that is used by debugging tools and by DiagnosticsNode.toStringDeep.
inherited
toString({DiagnosticLevel minLevel = DiagnosticLevel.info}) → String: A string representation of this object.
inherited
toStringDeep({String prefixLineOne = '', String? prefixOtherLines, DiagnosticLevel minLevel = DiagnosticLevel.debug, int wrapWidth = 65}) → String: Returns a string representation of this node and its descendants.
inherited
toStringShallow({String joiner = ', ', DiagnosticLevel minLevel = DiagnosticLevel.debug}) → String: Returns a one-line detailed description of the object.
inherited
toStringShort() → String: A short, textual description of this widget.
inherited

Operators

operator ==(Object other) → bool: The equality operator.
inherited