Flutter: SliverAppBar ile Sticky Header ve Search Bar Tasarımı

SliverAppBar, klasik AppBar'ın ötesine geçmek isteyen Flutter uygulamaları için en güçlü çözümlerden biridir. Özellikle içerik kaydırılırken küçülen, sabit kalan ya da arama alanı taşıyan üst başlıklar oluşturmak için idealdir.

Live Demo

Aşağıdaki interaktif örnekte AppBar yapılarını deneyebilirsiniz:

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

Neden SliverAppBar?

Kullanıcılar içerik arasında dolaşırken başlığın görünür kalması navigasyon hissini güçlendirir. Arama barı, kategori seçici veya büyük görsel alanı içeren tasarımlarda SliverAppBar çok daha esnek bir yapı sunar.

Bu konu, "flutter sliverappbar", "sticky header flutter" ve "flutter appbar search bar" gibi aramalarda güçlü niyet taşır.

Temel Kullanım

CustomScrollView(
  slivers: [
    SliverAppBar(
      title: const Text('Explore'),
      pinned: true,
      floating: false,
      expandedHeight: 220,
      flexibleSpace: FlexibleSpaceBar(
        background: Image.network(
          'https://example.com/banner.jpg',
          fit: BoxFit.cover,
        ),
      ),
    ),
    SliverList(
      delegate: SliverChildBuilderDelegate(
        (context, index) => ListTile(title: Text('Item $index')),
        childCount: 30,
      ),
    ),
  ],
)

pinned, floating ve snap Ne Yapar?

• pinned: Başlık ekranın üstünde sabit kalır.
• floating: Kullanıcı geri kaydırınca başlık hızlıca tekrar görünür.
• snap: Floating ile birlikte daha hızlı açılıp kapanma hissi verir.

Bu üçlü kombinasyon özellikle haber, blog ve katalog uygulamalarında çok faydalıdır.

Search Bar Olarak Kullanma

SliverAppBar içine bir arama alanı eklemek mümkündür. Bu, özellikle katalog ve ürün listeleme ekranlarında iyi çalışır.

SliverAppBar(
  pinned: true,
  title: TextField(
    decoration: InputDecoration(
      hintText: 'Search...',
      border: InputBorder.none,
      prefixIcon: Icon(Icons.search),
    ),
  ),
)

FlexibleSpace ile Görsel Güçlendirme

flexibleSpace, başlığı yalnızca işlevsel değil aynı zamanda görsel olarak da güçlü hale getirir. Arka plana gradient, resim veya blur efekti ekleyebilirsiniz.

SliverAppBar(
  expandedHeight: 240,
  pinned: true,
  flexibleSpace: Container(
    decoration: const BoxDecoration(
      gradient: LinearGradient(
        colors: [Colors.indigo, Colors.blue],
      ),
    ),
    child: const FlexibleSpaceBar(
      title: Text('Featured'),
    ),
  ),
)

Ne Zaman Klasik AppBar Yeterlidir?

Küçük ekranlarda sabit bir üst çubuk gerekiyorsa klasik AppBar çoğu zaman yeterlidir. Ancak kaydırmalı içerikte başlığın dinamik davranması gerekiyorsa SliverAppBar daha profesyonel bir his verir.

Sık Yapılan Hatalar

• SliverAppBar kullanıp CustomScrollView yapısını yanlış kurmak
• Çok yüksek expandedHeight seçip içerik alanını boğmak
• Arama alanını yerleştirirken okunabilirliği unutmak
• Gereksiz efektlerle üst alanı ağırlaştırmak

Sık Sorulan Sorular

SliverAppBar ile AppBar arasındaki fark nedir?

AppBar sabittir, SliverAppBar ise scroll davranışına göre genişleyip daralabilir.

Search bar eklemek için SliverAppBar uygun mu?

Evet. Özellikle içerik listeleri, bloglar ve katalog ekranlarında çok uygundur.

pinned kullanmak şart mı?

Hayır, ama çoğu modern arayüzde sabit başlık daha iyi bir kullanıcı deneyimi sağlar.

Özet

SliverAppBar, Flutter'da sticky header, search bar ve görsel olarak zengin başlık alanları oluşturmanın en esnek yollarından biridir. Doğru kullanıldığında hem UI kalitesini hem de arama niyeti güçlü içerik üretimini destekler.