Skip to main content
Different from other Neo widgets: Side panel is managed through static methods on NeoSidePanel rather than a widget you place in your build tree. It works automatically with both NeoSidebarLayout and NeoTopbarLayout.

​
Examples

NeoSidePanel.show(
  ref,
  child: Padding(
    padding: .all(theme.spacings.large),
    child: Column(
      crossAxisAlignment: .start,
      children: [
        Text(
          "Panel Title",
          style: theme.textStyles.header2,
        ),
        Gap(theme.spacings.medium),
        Text(
          "Panel content goes here.",
          style: theme.textStyles.body2.copyWith(
            color: theme.colors.fgSecondary,
          ),
        ),
      ],
    ),
  ),
);

​
Methods

​
NeoSidePanel.show()

Opens the side panel with the given content. If a panel is already visible, it replaces the content.
​
ref
WidgetRef
required
The widget reference from a ConsumerWidget or HookConsumerWidget.
​
child
Widget
required
The content widget to display inside the side panel.
​
id
String?
An optional identifier for the panel. Useful with toggle to determine whether to show or hide.
​
width
double
default:"448"
The width of the side panel in logical pixels.

​
NeoSidePanel.hide()

Hides the currently visible side panel with a smooth close animation.
​
ref
WidgetRef
required
The widget reference to access the side panel provider.

​
NeoSidePanel.toggle()

Toggles the side panel visibility. If the panel is visible and has the same id (or no ID), it hides. Otherwise, it shows the panel with the new content.
​
ref
WidgetRef
required
The widget reference from a ConsumerWidget or HookConsumerWidget.
​
child
Widget
required
The content widget to display inside the side panel.
​
id
String?
An optional identifier for the panel.
​
width
double
default:"448"
The width of the side panel in logical pixels.

​
State Management

​
neoCurrentSidePanelStateProvider
Provider<NeoSidePanelState>
The Riverpod provider that holds the current side panel state. You can watch this to react to panel visibility changes.
final sidePanelState = ref.watch(neoCurrentSidePanelStateProvider);
final isVisible = sidePanelState.isVisible;
final panelId = sidePanelState.id;
final panelWidth = sidePanelState.width;

​
Best Practices

  • Use IDs for multi-panel UIs: When toggling between different panel contents (e.g., details vs. settings), assign unique id values so toggle can distinguish between them.
  • Desktop only: The side panel is only visible on desktop-sized screens (768px and above). On mobile, the panel is hidden automatically.
  • Keep content focused: Side panels work best for contextual details, editing forms, or supplementary information related to the main content.

​
Integration Notes

Last modified on March 18, 2026