README.md

NavigationBar

Navigation bars offer a persistent and convenient way to switch between primary destinations in an app.

This widget does not adjust its size with the ThemeData.visualDensity.

The MediaQueryData.textScaleFactor does not adjust the size of this widget but rather the size of the Tooltips displayed on long presses of the destinations.

The style for the icons and text are not affected by parent DefaultTextStyles or IconThemes but rather controlled by parameters or the NavigationBarThemeData.

This widget holds a collection of destinations (usually NavigationDestinations).

Example

class ExNavigationBar extends StatefulWidget {
  const ExNavigationBar({super.key});

  @override
  State<ExNavigationBar> createState() => _ExNavigationBarState();
}

class _ExNavigationBarState extends State<ExNavigationBar> {
  int currentPageIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: NavigationBar(
        onDestinationSelected: (int index) {
          setState(() {
            currentPageIndex = index;
          });
        },
        selectedIndex: currentPageIndex,
        destinations: const [
          NavigationDestination(
            selectedIcon: Stack(children: [
              Icon(Icons.home),
              Positioned(
                // draw a red marble
                top: 0.0,
                right: 0.0,
                child: Icon(
                  Icons.brightness_1,
                  size: 8.0,
                  color: Colors.redAccent,
                ),
              )
            ]),
            icon: Stack(children: [
              Icon(Icons.home),
              Positioned(
                // draw a red marble
                top: 0.0,
                right: 0.0,
                child: Icon(
                  Icons.brightness_1,
                  size: 8.0,
                  color: Colors.redAccent,
                ),
              )
            ]),
            label: 'Home',
          ),
          NavigationDestination(
            icon: Icon(Icons.business),
            label: 'Business',
          ),
          NavigationDestination(
            selectedIcon: Icon(Icons.school),
            icon: Icon(Icons.school_outlined),
            label: 'School',
          ),
        ],
      ),
      body: [
        Container(
          color: Colors.red,
          alignment: Alignment.center,
          child: const Text('Page 1'),
        ),
        Container(
          color: Colors.green,
          alignment: Alignment.center,
          child: const Text('Page 2'),
        ),
        Container(
          color: Colors.blue,
          alignment: Alignment.center,
          child: const Text('Page 3'),
        ),
      ][currentPageIndex],
    );
  }
}