Flutter: BottomNavigationBar Kullanımı

BottomNavigationBar, tabs gibi çalışan ancak sayfanın altında konumlanan bir navigasyon yapısıdır. Tabs'tan farklı olarak parmak hareketi ile kaydırma işlemine duyarlı değildir, sadece tıklama ile çalışır.

Canlı Demo

Aşağıdaki interaktif örnekte bu widget'ı deneyebilirsiniz:

💡 Eğer yukarıdaki örnek açılmazsa, DartPad linkine tıklayarak yeni sekmede çalıştırabilirsiniz.

## Temel Kullanım

```dart
class MyHomePage extends StatefulWidget {
  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _selectedIndex = 0;

  final List<Widget> _pages = [
    HomePage(),
    SearchPage(),
    ProfilePage(),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _pages[_selectedIndex],
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _selectedIndex,
        onTap: (index) {
          setState(() {
            _selectedIndex = index;
          });
        },
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Ana Sayfa',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.search),
            label: 'Arama',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.person),
            label: 'Profil',
          ),
        ],
      ),
    );
  }
}


## Önemli Özellikler

| Özellik | Açıklama |
|---------|----------|
| `currentIndex` | Seçili öğe indexi |
| `onTap` | Tıklama callback'i |
| `items` | BottomNavigationBarItem listesi |
| `type` | `fixed` veya `shifting` |
| `selectedItemColor` | Seçili öğe rengi |
| `unselectedItemColor` | Seçili olmayan öğe rengi |
| `showUnselectedLabels` | Seçili olmayan etiketleri göster |
| `backgroundColor` | Arka plan rengi |

## Type Seçenekleri

```dart
// Fixed: Tüm öğeler eşit genişlikte
BottomNavigationBar(
  type: BottomNavigationBarType.fixed,
  ...
)

// Shifting: Seçili öğe büyür, animasyonlu
BottomNavigationBar(
  type: BottomNavigationBarType.shifting,
  ...
)

Aktif ve Pasif İkon

BottomNavigationBarItem(
  icon: Icon(Icons.home_outlined),      // Pasif ikon
  activeIcon: Icon(Icons.home_filled),  // Aktif ikon
  label: 'Ana Sayfa',
)

IndexedStack ile Sayfa Durumu Koruma

Sayfa değiştiğinde state'i korumak için:

body: IndexedStack(
  index: _selectedIndex,
  children: [
    HomePage(),
    SearchPage(),
    ProfilePage(),
  ],
)

Badge Ekleme

BottomNavigationBarItem(
  icon: Badge(
    label: Text('3'),
    child: Icon(Icons.notifications),
  ),
  label: 'Bildirimler',
)

NavigationBar (Material 3)

Material 3 için yeni navigasyon widget'ı:

NavigationBar(
  selectedIndex: _selectedIndex,
  onDestinationSelected: (index) {
    setState(() {
      _selectedIndex = index;
    });
  },
  destinations: [
    NavigationDestination(
      icon: Icon(Icons.home_outlined),
      selectedIcon: Icon(Icons.home),
      label: 'Ana Sayfa',
    ),
    NavigationDestination(
      icon: Icon(Icons.search),
      label: 'Arama',
    ),
  ],
)

Özet

• BottomNavigationBar: Alt navigasyon çubuğu
• currentIndex: Aktif sayfa indexi
• onTap: Sayfa değişikliği callback'i
• type: fixed veya shifting görünüm
• IndexedStack: Sayfa state'ini korur

BottomNavigationBar, mobil uygulamalarda ana navigasyon için standarttır.