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
home Home
inbox Inbox
settings Settings
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')])],
),
],
);
}
}