CNSidebar class

A native macOS sidebar that Flutter lays out: sections of rows with symbols or images, badges, and one selected row.

On macOS it is AppKit's sidebar, SwiftUI's List in the sidebar style, in a platform view: Liquid Glass on macOS 26 and later, the vibrant sidebar material before. The rows follow the system's sidebar metrics and the accent colour (or tint); arrow keys move the selection once the list has the keyboard focus, and VoiceOver reads each row with its badge.

Put it where a sidebar belongs, at the leading edge beside the content, for example in a Row with a fixed width such as width. For a sidebar that is part of the window itself, beside the whole Flutter view, use CNTabBarNative, which on macOS turns its tabs into the window's own sidebar.

iOS has no standalone sidebar control: there the rows are drawn by a CNTabRail in its sidebar style (native Liquid Glass on iOS 26 and later, a Cupertino fallback before), without the section headers. Other platforms get the same fallback.

CNSidebar(
  sections: const [
    CNSidebarSection(items: [
      CNSidebarItem(title: 'Inbox', sfSymbol: CNSymbol('tray'), badge: '3'),
      CNSidebarItem(title: 'Sent', sfSymbol: CNSymbol('paperplane')),
    ]),
    CNSidebarSection(title: 'Smart Mailboxes', items: [
      CNSidebarItem(title: 'Today', sfSymbol: CNSymbol('calendar')),
    ]),
  ],
  selectedIndex: _selected,
  onSelected: (i) => setState(() => _selected = i),
)

Inheritance

Available extensions

LiquidGlassExtension

Constructors

CNSidebar({Key? key, required List<CNSidebarSection> sections, required int? selectedIndex, required ValueChanged<int> onSelected, Color? tint, bool iconsOnly = false, String? semanticLabel}): Creates a native sidebar.
const

Properties

hashCode → int: The hash code for this object.
no setterinherited
iconsOnly → bool: Shows only the icons, each row's title as its tooltip and VoiceOver label: the narrow rail of CNTabRail on macOS.
final
key → Key?: Controls how one widget replaces another widget in the tree.
finalinherited
onSelected → ValueChanged<int>: Called with the index of the row the user selects (counted as for selectedIndex). Not called for changes of selectedIndex.
final
runtimeType → Type: A representation of the runtime type of the object.
no setterinherited
sections → List<CNSidebarSection>: The sections, top to bottom.
final
selectedIndex → int?: The selected row, counted across all sections from the top: the first row of the second section is sections[0].items.length. Null or out of range selects none.
final
semanticLabel → String?: The VoiceOver label of the sidebar as a whole.
final
tint → Color?: Colour of the icons and of the selected row. Defaults to the system accent colour on macOS and to the theme's primary colour elsewhere.
final

Methods

createElement() → StatefulElement: Creates a StatefulElement to manage this widget's location in the tree.
inherited
createState() → State<CNSidebar>: 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
liquidGlass({CNGlassEffect effect = CNGlassEffect.regular, CNGlassEffectShape shape = CNGlassEffectShape.capsule, double? cornerRadius, Color? tint, bool interactive = false}) → Widget: Available on Widget, provided by the LiquidGlassExtension extension
Applies a Liquid Glass effect to this widget.
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

Constants

width → const double: A standard sidebar width on macOS.