> For the complete documentation index, see [llms.txt](https://asamarsal.gitbook.io/notes/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://asamarsal.gitbook.io/notes/personal-documentation/mobile/flutter/bottom-navigation-bar.md).

# Bottom Navigation Bar

Tanpa state management : 

```dart
int selectedIndex = 1;

bottomNavigationBar: BottomNavigationBar(
    type: BottomNavigationBarType.fixed,
    selectedItemColor: Colors.blue,
    showUnselectedLabels: false,
    onTap: (index) {
      setState(() {
        selectedIndex = index;
      });
    },
    currentIndex: selectedIndex,
    items: const [
      BottomNavigationBarItem(
        icon: Icon(Icons.home),
        label: 'Home',
      ),
      BottomNavigationBarItem(
        icon: Icon(Icons.settings),
        label: 'Settings',
      ),
      BottomNavigationBarItem(
        icon: Icon(Icons.add_call),
        label: 'Calls',
      ),
    ],
  ),
```

Dengan riverpod : 

{% embed url="<https://github.com/asamarsal/Flutter-Bottomnavbar-Riverpod>" %}