AppBar — nedir, yapılandırma ve Flutter widget’ları

Flutter’da AppBar Nedir

AppBar, bir Scaffold’ın üst kısmında görünen standart bir Material üst panel bileşenidir. Ekran başlığını, bir gezinme düğmesini (genellikle bir “hamburger” simgesi veya “Geri” oku) ve eylemleri (arama, ayarlar veya diğer işlevleri açan simgeler) içerir. AppBar platforma otomatik olarak uyum sağlar: Android’de standart Material alt gölgesini kullanır, iOS’ta — şeffaflığa sahip daha düz bir tasarım.

AppBar, PreferredSizeWidget arabirimini uygular, yani yüksekliği sabittir ve oluşturmadan önce bilinir. Varsayılan olarak, dikey yönlendirmede Android’de AppBar yüksekliği 56dp, iOS’ta 44dp’dir ve üstte SafeArea dikkate alınır. Bu özellik, Scaffold’ın işleme sırasında yeniden oluşturmayı önleyerek body için kullanılabilir alanı önceden hesaplamasına olanak tanır.

Flutter Material Library Guide (2026)’ya göre AppBar, birkaç yinelemeden geçti: Flutter 1.x’te metin içeren basit bir kapsayıcıydı, Flutter 2.x’te Material 3 ve flexibleSpace desteği aldı ve Flutter 3.x’te System UI (durum çubuğu rengi, şeffaflık) ile entegrasyon sağladı. Modern AppBar, Android 12+ cihazlarda Material You’dan Dynamic Color’ı destekler.

AppBar Yapısı: Özellikler ve Parametreler

AppBar, üst panelin her bir bölümünü kontrol eden bir dizi parametre sağlar. Bu özellikleri anlamak, özel çözümler oluşturmadan paneli herhangi bir tasarım gereksinimine göre esnek bir şekilde özelleştirmeye olanak tanır.

Title ve leading: başlık ve gezinme yapılandırması

title özelliği herhangi bir widget’ı kabul eder, ancak en yaygın olanı TextStyle aracılığıyla stil yapılandırmasıyla Text kullanmaktır. Uzun başlıklar için, yer sınırlı olduğunda metnin doğru şekilde kesilmesi için title’ın Flexible ile sarılması önerilir. leading özelliği, açıkça ayarlanmamışsa, Navigator.push aracılığıyla iç içe bir ekrana giderken otomatik olarak BackButton ile değiştirilir.

Actions: eylem simgelerinin yerleştirilmesi

actions listesi, AppBar’ın sağ kenarına hizalanmış widget’lar içerir. Her öğe 48dp’den (Material Design standardı) daha geniş olmamalıdır. Eylemleri gruplamak için PopupMenuButton kullanın — bu, daha az önemli seçenekleri açılır bir menüde gizler ve arayüz yoğunluğuyla ilgili Material önerilerine uyar.

AppBar Özelleştirmesi: Stiller, Renkler ve Davranış

AppBar, renk, gölge ve dolgu özellikleri aracılığıyla derin özelleştirmeyi destekler. Temel stil, uygulama temasından devralınır, ancak her özellik ayrı ayrı geçersiz kılınabilir. Ana yapılandırma senaryolarına bakalım.

AppBar’ın arka plan rengi backgroundColor aracılığıyla ayarlanır. Belirtilmezse, ThemeData’dan appBarTheme kullanılır. Material 3’te AppBar rengi otomatik olarak ColorScheme.primary’den hesaplanır, ancak belirli bir ekran için geçersiz kılınabilir. Şeffaf bir AppBar için (genellikle profillerde kullanılır), elevation: 0 ile backgroundColor: Colors.transparent ayarlayın.

elevation özelliği AppBar’ın altındaki gölgeyi kontrol eder. 0 değeri gölgeyi kaldırarak Material 3 için geçerli olan “düz” bir panel etkisi yaratır. 4 değeri standart Material Design gölgesi sağlar. Özel gölge kontrolü için shadowColor kullanın — paneli içerikten görsel olarak ayıran gölge rengi.

AppBar’da metin rengini kontrol etmek için foregroundColor kullanın. Bu özellik, başlığın, simgelerin ve actions içindeki metnin rengini etkiler. backgroundColor değiştirildiğinde, zıt bir foregroundColor otomatik olarak seçilir, ancak standart olmayan tasarımlar için zorlanabilir.

SliverAppBar: AppBar’ın Animasyonlu Sürümü

SliverAppBar, CustomScrollView içinde kullanılmak üzere AppBar’ın bir uzantısıdır ve kaydırma animasyonunu destekler: daraltma, paralaks efekti ve sabitleme. Standart AppBar’dan farklı olarak SliverAppBar, bir sliver widget’ıdır ve kaydırma konumuna bağlı olarak boyutu dinamik olarak değiştirebilir.

SliverAppBar’ın ana modları, pinned, floating ve snap özelliklerinin bir kombinasyonuyla belirlenir. Pinned modunda panel her zaman ekranın üst kısmında görünür kalır. Floating modunda, geri kaydırma sırasında görünür. Floating + snap kombinasyonu, en ufak yukarı kaydırmada görünen “yapışkan” bir panel davranışı oluşturur ve genellikle haber akışlarında kullanılır.

Flutter API SliverAppBar (2026)’ya göre, SliverAppBar kullanmak için normal bir ListView veya Column’ı sliver widget’ları içeren CustomScrollView ile değiştirmek gerekir. Scaffold doğru şekilde çalışmaya devam eder, ancak Scaffold’ın appBar özelliği null olmalıdır — SliverAppBar, CustomScrollView içinde ilk sliver olarak yerleştirilir.

Bir Uygulamada AppBar Yapılandırma Örneği

Arama, açılır menü ve TabBar içeren bir AppBar örneğine bakalım. Bu kod, Flutter’da bir üretim uygulamasında tipik bir üst panel yapılandırmasını gösterir.

Scaffold(
  appBar: AppBar(
    title: const Text('Katalog'),
    centerTitle: true,
    leading: IconButton(
      icon: const Icon(Icons.menu),
      onPressed: () => Scaffold.of(context).openDrawer(),
    ),
    actions: [
      IconButton(
        icon: const Icon(Icons.search),
        onPressed: () => showSearch(context: context, delegate: ProductSearch()),
      ),
      PopupMenuButton<String>(
        onSelected: (String value) {},
        itemBuilder: (context) => [
          const PopupMenuItem(value: 'settings', child: Text('Ayarlar')),
          const PopupMenuItem(value: 'about', child: Text('Uygulama Hakkında')),
        ],
      ),
    ],
    bottom: const TabBar(
      tabs: [
        Tab(text: 'All'),
        Tab(text: 'New'),
        Tab(text: 'Popular'),
      ],
    ),
  ),
  body: const TabBarView(
    children: [
      AllProductsPage(),
      NewProductsPage(),
      PopularProductsPage(),
    ],
  ),
)

Örnekte AppBar, ortalanmış bir başlık, solda bir Drawer açma düğmesi, sağda bir arama simgesi ve bir açılır menü içerir. Alttaki TabBar, ürün kategorileri arasında geçiş yapmayı sağlar. Bu yapılandırma, mobil uygulama senaryolarının çoğunu kapsar: gezinme, arama, ek seçenekler ve bölüm değiştirme — hepsi tek bir üst panelde.