Navigation Bar

Navigation bars provide access to different destinations in the app.

Basic Usage

A simple navigation bar with icons and labels.

// Stateful wrapper to manage selection state
class NavigationBarExample extends StatefulWidget {
  @override
  State<NavigationBarExample> createState() => _NavigationBarExampleState();
}

class _NavigationBarExampleState extends State<NavigationBarExample> {
  int _selectedIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Expanded(
          child: Container(
            color: PrimeTheme.of(context).colorScheme.surfaceBase,
            alignment: Alignment.center,
            child: Text('Content for tab $_selectedIndex'),
          ),
        ),
        NavigationBar(
          selectedIndex: _selectedIndex,
          onDestinationSelected: (index) => setState(() => _selectedIndex = index),
          items: [
            NavigationBarItemData(
              icon: PrimeIcons.viamFlutter,
              label: Text('Home')
            ),
            NavigationBarItemData(
              icon: PrimeIcons.viamFlutter,
              label: Text('Devices')
            ),
            NavigationBarItemData(
              icon: PrimeIcons.viamFlutter,
              label: Text('Settings')
            ),
          ],
        ),
      ],
    );
  }
}