Side Panel

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

Show / Hide
Toggle with ID

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,
          ),
        ),
      ],
    ),
  ),
);

NeoSidePanel.hide(ref);

NeoSidePanel.toggle(
  ref,
  id: "details",
  width: 500,
  child: const DetailsPanel(),
);

Methods

NeoSidePanel.show()

Opens the side panel with the given content. If a panel is already visible, it replaces the content.

WidgetRef

required

The widget reference from a ConsumerWidget or HookConsumerWidget.

Widget

required

The content widget to display inside the side panel.

String?

An optional identifier for the panel. Useful with toggle to determine whether to show or hide.

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.

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.

WidgetRef

required

The widget reference from a ConsumerWidget or HookConsumerWidget.

Widget

required

The content widget to display inside the side panel.

String?

An optional identifier for the panel.

double

default:"448"

The width of the side panel in logical pixels.

State Management

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

Give each panel an id when toggle switches between different content.

Behavior

The panel is shown only at 768px and wider. Below that it stays hidden.
NeoSidebarLayout and NeoTopbarLayout already include it.

Getting Started

AI

Widgets

Layouts

Theming

Utilities

Side Panel

Examples

Methods

NeoSidePanel.show()

NeoSidePanel.hide()

NeoSidePanel.toggle()

State Management

Best Practices

Behavior

​Examples

​Methods

​NeoSidePanel.show()

​NeoSidePanel.hide()

​NeoSidePanel.toggle()

​State Management

​Best Practices

​Behavior

Examples

Methods

NeoSidePanel.show()

NeoSidePanel.hide()

NeoSidePanel.toggle()

State Management

Best Practices

Behavior