Flutter: BottomNavigationBar ve NavigationBar Karşılaştırması

Flutter'da alt navigasyon için iki güçlü seçenek vardır: klasik BottomNavigationBar ve Material 3 tabanlı NavigationBar. İkisi benzer görünse de kullanım biçimi ve tasarım yaklaşımı farklıdır.

Live Demo

Aşağıdaki interaktif örnekte alt navigasyonu deneyebilirsiniz:

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

Hangi Durumda Hangisi?

BottomNavigationBar: Klasik mobil uygulamalar için iyi bir seçimdir.
NavigationBar: Material 3 tasarım diliyle daha modern bir görünüm sunar.

Bu yazı, "flutter bottomnavigationbar vs navigationbar" ve "material 3 navigation flutter" gibi aramalara uygundur.

BottomNavigationBar Neden Hala Kullanılıyor?

Birçok eski ve mevcut proje klasik yapı üzerine kuruludur. Ayrıca fixed ve shifting türleri sayesinde esnek bir kullanım sunar.

BottomNavigationBar(
  currentIndex: index,
  onTap: (value) => setState(() => index = value),
  items: const [
    BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),
    BottomNavigationBarItem(icon: Icon(Icons.search), label: 'Search'),
  ],
)

NavigationBar Neyi Farklı Yapıyor?

Material 3 ile birlikte alt navigasyon daha yumuşak, daha geniş ve daha modern bir yapı kazandı. Seçili öğe vurgusu ve ikon hareketi daha güncel bir tasarım hissi verir.

NavigationBar(
  selectedIndex: index,
  onDestinationSelected: (value) => setState(() => index = value),
  destinations: const [
    NavigationDestination(icon: Icon(Icons.home_outlined), selectedIcon: Icon(Icons.home), label: 'Home'),
    NavigationDestination(icon: Icon(Icons.search), label: 'Search'),
  ],
)

Tasarım Farkı

BottomNavigationBar daha yoğun ve kompakt görünebilir. NavigationBar ise daha ferah ve Material 3 odaklıdır.

State Koruma

Hangi widget'ı seçerseniz seçin, sayfa durumunu korumak için IndexedStack kullanmak çoğu zaman en doğru çözümdür.

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

Geçiş Mimarisi

Alt navigasyon için en önemli karar sadece widget seçimi değildir. Sayfalar arasında state kaybetmeden geçiş yapmanız da gerekir.

Sık Sorulan Sorular

Material 3 kullanıyorsam NavigationBar zorunlu mu?

Zorunlu değil, ama tasarım dili açısından daha uyumludur.

BottomNavigationBar eski mi?

Hayır, hala geçerli. Sadece daha klasik bir görünümü vardır.

IndexedStack neden önemli?

Sayfa değişince state'in sıfırlanmasını önler.

Özet

BottomNavigationBar ve NavigationBar, aynı probleme farklı tasarım dilleriyle yaklaşır. Projenizin görsel dili ve Material sürümü hangi widget'ın daha uygun olduğunu belirler.