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
makeRefreshable → Widget: Available on Widget?, provided by the WidgetExtension extension
Make your any widget refreshable with RefreshIndicator on top
no setter
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
center({double? heightFactor, double? widthFactor}) → Widget: Available on Widget?, provided by the WidgetExtension extension
set parent widget in center
colorFilter([ColorFilter? colorFilter]) → Widget: Available on Widget, provided by the GenericExtensions extension
set parent widget in center
cornerRadiusWithClipRRect(double radius) → ClipRRect: Available on Widget?, provided by the WidgetExtension extension
add corner radius
cornerRadiusWithClipRRectOnly({int bottomLeft = 0, int bottomRight = 0, int topLeft = 0, int topRight = 0}) → ClipRRect: Available on Widget?, provided by the WidgetExtension extension
add custom corner radius each side
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
expand({int flex = 1}) → Widget: Available on Widget?, provided by the WidgetExtension extension
add Expanded to parent widget
fit({BoxFit? fit, AlignmentGeometry? alignment}) → Widget: Available on Widget?, provided by the WidgetExtension extension
add FittedBox to parent widget
flexible({int flex = 1, FlexFit? fit}) → Widget: Available on Widget?, provided by the WidgetExtension extension
add Flexible to parent widget
launch<T>(BuildContext context, {bool isNewTask = false, PageRouteAnimation? pageRouteAnimation, Duration? duration, String? routeName, Object? routeArguments}) → Future<T?>: Available on Widget?, provided by the WidgetExtension extension
Launch a new screen
noSuchMethod(Invocation invocation) → dynamic: Invoked when a nonexistent method or property is accessed.
inherited
onTap(Function? function, {BorderRadius? borderRadius, Color? splashColor, Color? hoverColor, Color? highlightColor, Color? focusColor, WidgetStateProperty<Color?>? overlayColor}) → Widget: Available on Widget?, provided by the WidgetExtension extension
add tap to parent widget
opacity({required double opacity, int durationInSecond = 1, Duration? duration}) → Widget: Available on Widget?, provided by the WidgetExtension extension
add opacity to parent widget
paddingAll(double padding) → Padding: Available on Widget?, provided by the WidgetExtension extension
return padding all
paddingBottom(double bottom) → Padding: Available on Widget?, provided by the WidgetExtension extension
return padding bottom
paddingDirectional({double start = 0.0, double top = 0.0, double end = 0.0, double bottom = 0.0}) → Widget: Available on Widget?, provided by the WidgetExtension extension
paddingLeft(double left) → Padding: Available on Widget?, provided by the WidgetExtension extension
return padding left
paddingOnly({double top = 0.0, double left = 0.0, double bottom = 0.0, double right = 0.0}) → Padding: Available on Widget?, provided by the WidgetExtension extension
return custom padding from each side
paddingRight(double right) → Padding: Available on Widget?, provided by the WidgetExtension extension
return padding right
paddingSymmetric({double vertical = 0.0, double horizontal = 0.0}) → Padding: Available on Widget?, provided by the WidgetExtension extension
return padding symmetric
paddingTop(double top) → Padding: Available on Widget?, provided by the WidgetExtension extension
return padding top
rotate({required double angle, bool transformHitTests = true, Offset? origin}) → Widget: Available on Widget?, provided by the WidgetExtension extension
add rotation to parent widget
scale({required double scale, Offset? origin, AlignmentGeometry? alignment, bool transformHitTests = true}) → Widget: Available on Widget?, provided by the WidgetExtension extension
add scaling to parent widget
toDiagnosticsNode({String? name, DiagnosticsTreeStyle? style}) → DiagnosticsNode: Returns a debug representation of the object that is used by debugging tools and by DiagnosticsNode.toStringDeep.
inherited
tooltip({required String msg}) → Widget: Available on Widget?, provided by the WidgetExtension extension
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
translate({required Offset offset, bool transformHitTests = true, Key? key}) → Widget: Available on Widget?, provided by the WidgetExtension extension
add translate to parent widget
validate({Widget value = const SizedBox()}) → Widget: Available on Widget?, provided by the WidgetExtension extension
Validate given widget is not null and returns given value if null.
visible(bool visible, {Widget? defaultWidget}) → Widget: Available on Widget?, provided by the WidgetExtension extension
set visibility
withHeight(double height) → SizedBox: Available on Widget?, provided by the WidgetExtension extension
With custom height
withRoundedCorners({Color backgroundColor = whiteColor, BorderRadius borderRadius = const BorderRadius.all(Radius.circular(8.0)), LinearGradient? gradient, BoxBorder? border, List<BoxShadow>? boxShadow, DecorationImage? decorationImage, BoxShape boxShape = BoxShape.rectangle}) → Container: Available on Widget?, provided by the WidgetExtension extension
withScroll({ScrollPhysics? physics, EdgeInsetsGeometry? padding, Axis scrollDirection = Axis.vertical, ScrollController? controller, DragStartBehavior dragStartBehavior = DragStartBehavior.start, bool? primary, required bool reverse}) → Widget: Available on Widget?, provided by the WidgetExtension extension
withShaderMask(List<Color> colors, {BlendMode blendMode = BlendMode.srcATop}) → Widget: Available on Widget?, provided by the WidgetExtension extension
Wrap with ShaderMask widget
withShaderMaskGradient(Gradient gradient, {BlendMode blendMode = BlendMode.srcATop}) → Widget: Available on Widget?, provided by the WidgetExtension extension
Wrap with ShaderMask widget Gradient
withShadow({Color bgColor = whiteColor, Color shadowColor = Colors.black12, dynamic blurRadius = 10.0, dynamic spreadRadius = 0.0, Offset offset = const Offset(0.0, 0.0), LinearGradient? gradient, BoxBorder? border, DecorationImage? decorationImage, BoxShape boxShape = BoxShape.rectangle}) → Container: Available on Widget?, provided by the WidgetExtension extension
withSize({double width = 0.0, double height = 0.0}) → SizedBox: Available on Widget?, provided by the WidgetExtension extension
With custom height and width
withTooltip({required String msg}) → Widget: Available on Widget?, provided by the WidgetExtension extension
Validate given widget is not null and returns given value if null.
withVisibility(bool visible, {Widget? replacement, bool maintainAnimation = false, bool maintainState = false, bool maintainSize = false, bool maintainSemantics = false, bool maintainInteractivity = false}) → Visibility: Available on Widget?, provided by the WidgetExtension extension
set widget visibility
withWidth(double width) → SizedBox: Available on Widget?, provided by the WidgetExtension extension
With custom width

Operators

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