Deepyr Documentation

Dock

A stateful component is used to manage the active item. For iOS responsiveness, add `<meta name="viewport" content="viewport-fit=cover">` to your main HTML file.

Preview

Dart

// A stateful component manages the active dock item.
class MyDock extends StatefulComponent {
  @override
  State<MyDock> createState() => _MyDockState();
}

class _MyDockState extends State<MyDock> {
  int _activeIndex = 1; // e.g., 'Inbox' is initially active

  @override
  Component build(BuildContext context) {
    const iconStyle = Size('size-[1.2em]');

    return Dock(
      ariaLabel: 'Main navigation',
      [
        DockItem(
          isActive: _activeIndex == 0,
          onClick: (_) => setState(() => _activeIndex = 0),
          [Icon('home', style: [iconStyle]), DockLabel([text('Home')])],
        ),
        DockItem(
          isActive: _activeIndex == 1,
          onClick: (_) => setState(() => _activeIndex = 1),
          [Icon('inbox', style: [iconStyle]), DockLabel([text('Inbox')])],
        ),
        DockItem(
          isActive: _activeIndex == 2,
          onClick: (_) => setState(() => _activeIndex = 2),
          [Icon('settings', style: [iconStyle]), DockLabel([text('Settings')])],
        ),
      ],
    );
  }
}

Dock Extra Small size

Preview

Dart

Dock(
  // For 'xs' and 'sm', omit the DockLabel from the children list.
  style: [Dock.xs],
  [
    DockItem(
      isActive: _activeIndex == 0,
      onClick: (_) => setState(() => _activeIndex = 0),
      [Icon('home', style: [const Size('size-[1.2em]')])],
    ),
    DockItem(
      isActive: _activeIndex == 1,
      onClick: (_) => setState(() => _activeIndex = 1),
      style: component.itemStyle,
      [Icon('inbox', style: [const Size('size-[1.2em]')])],
    ),
    DockItem(
      isActive: _activeIndex == 2,
      onClick: (_) => setState(() => _activeIndex = 2),
      style: component.itemStyle,
      [Icon('settings', style: [const Size('size-[1.2em]')])],
    ),
  ],
)

Dock Small size

Preview

Dart

Dock(
  // For 'xs' and 'sm', omit the DockLabel from the children list.
  style: [Dock.sm],
  [
    DockItem(
      isActive: _activeIndex == 0,
      onClick: (_) => setState(() => _activeIndex = 0),
      [Icon('home', style: [const Size('size-[1.2em]')])],
    ),
    DockItem(
      isActive: _activeIndex == 1,
      onClick: (_) => setState(() => _activeIndex = 1),
      style: component.itemStyle,
      [Icon('inbox', style: [const Size('size-[1.2em]')])],
    ),
    DockItem(
      isActive: _activeIndex == 2,
      onClick: (_) => setState(() => _activeIndex = 2),
      style: component.itemStyle,
      [Icon('settings', style: [const Size('size-[1.2em]')])],
    ),
  ],
)

Dock Medium size

Preview

Dart

Dock(
  // For 'xs' and 'sm', omit the DockLabel from the children list.
  style: [Dock.md],
  [
    DockItem(
      isActive: _activeIndex == 0,
      onClick: (_) => setState(() => _activeIndex = 0),
      [Icon('home', style: [const Size('size-[1.2em]')]), DockLabel([text('Home')])],
    ),
    DockItem(
      isActive: _activeIndex == 1,
      onClick: (_) => setState(() => _activeIndex = 1),
      style: component.itemStyle,
      [Icon('inbox', style: [const Size('size-[1.2em]')]), DockLabel([text('Inbox')])],
    ),
    DockItem(
      isActive: _activeIndex == 2,
      onClick: (_) => setState(() => _activeIndex = 2),
      style: component.itemStyle,
      [Icon('settings', style: [const Size('size-[1.2em]')]), DockLabel([text('Settings')])],
    ),
  ],
)

Dock Large size

Preview

Dart

Dock(
  // For 'xs' and 'sm', omit the DockLabel from the children list.
  style: [Dock.lg],
  [
    DockItem(
      isActive: _activeIndex == 0,
      onClick: (_) => setState(() => _activeIndex = 0),
      [Icon('home', style: [const Size('size-[1.2em]')]), DockLabel([text('Home')])],
    ),
    DockItem(
      isActive: _activeIndex == 1,
      onClick: (_) => setState(() => _activeIndex = 1),
      style: component.itemStyle,
      [Icon('inbox', style: [const Size('size-[1.2em]')]), DockLabel([text('Inbox')])],
    ),
    DockItem(
      isActive: _activeIndex == 2,
      onClick: (_) => setState(() => _activeIndex = 2),
      style: component.itemStyle,
      [Icon('settings', style: [const Size('size-[1.2em]')]), DockLabel([text('Settings')])],
    ),
  ],
)

Dock Extra Large size

Preview

Dart

Dock(
  // For 'xs' and 'sm', omit the DockLabel from the children list.
  style: [Dock.xl],
  [
    DockItem(
      isActive: _activeIndex == 0,
      onClick: (_) => setState(() => _activeIndex = 0),
      [Icon('home', style: [const Size('size-[1.2em]')]), DockLabel([text('Home')])],
    ),
    DockItem(
      isActive: _activeIndex == 1,
      onClick: (_) => setState(() => _activeIndex = 1),
      style: component.itemStyle,
      [Icon('inbox', style: [const Size('size-[1.2em]')]), DockLabel([text('Inbox')])],
    ),
    DockItem(
      isActive: _activeIndex == 2,
      onClick: (_) => setState(() => _activeIndex = 2),
      style: component.itemStyle,
      [Icon('settings', style: [const Size('size-[1.2em]')]), DockLabel([text('Settings')])],
    ),
  ],
)

Dock with custom colors

Preview

Dart

Dock(
  // Apply general color utilities to style the dock.
  style: [BgUtil.neutral, TextUtil.neutralContent],
  [
    // ... DockItems
  ],
)