Flutter: SliverAppBar ile Kategori Başlığı ve Arama Alanı

SliverAppBar sadece büyük görseller için değil, kategori başlıkları ve arama alanları için de çok güçlü bir çözümdür. Özellikle liste bazlı ekranlarda kullanıcıya sürekli ulaşılabilir bir üst alan sunar.

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.

Kategori Başlığı Neden İşe Yarar?

Uzun listelerde kullanıcıların hangi içerik grubunda olduğunu anlaması gerekir. Başlık, filtre ve arama birleşince gezinme çok daha kolay hale gelir.

Bu yazı, "flutter sliverappbar search", "category header flutter" ve "sticky search bar" gibi aramalara iyi cevap verir.

Basit Yapı

CustomScrollView(
  slivers: [
    SliverAppBar(
      pinned: true,
      title: const Text('Categories'),
      bottom: PreferredSize(
        preferredSize: const Size.fromHeight(48),
        child: Padding(
          padding: const EdgeInsets.all(8.0),
          child: TextField(
            decoration: InputDecoration(
              hintText: 'Search categories...',
              border: OutlineInputBorder(
                borderRadius: BorderRadius.circular(12),
              ),
            ),
          ),
        ),
      ),
    ),
    SliverList(
      delegate: SliverChildBuilderDelegate(
        (context, index) => ListTile(title: Text('Category $index')),
        childCount: 40,
      ),
    ),
  ],
)

pinned ve bottom Kullanımı

pinned üst alanın sabit kalmasını sağlar. bottom ise arama alanı, tab veya segment control eklemek için uygundur.

Kategori Filtreleri ile Birlikte Kullanım

SliverAppBar içine yatay kategori chip'leri ekleyebilirsiniz.

SliverAppBar(
  pinned: true,
  bottom: PreferredSize(
    preferredSize: const Size.fromHeight(56),
    child: SizedBox(
      height: 56,
      child: ListView(
        scrollDirection: Axis.horizontal,
        children: const [
          Chip(label: Text('All')),
          Chip(label: Text('Design')),
          Chip(label: Text('Flutter')),
        ],
      ),
    ),
  ),
)

Tasarım İpuçları

• Arama alanını çok yüksekte bırakmayın.
• Kategori chip'lerini yatay scroll ile verin.
• Başlık metnini kısa tutun.
• CustomScrollView içinde içerik akışını test edin.

Sık Sorulan Sorular

SliverAppBar içinde TextField kullanmak doğru mu?

Evet, özellikle arama odaklı ekranlarda çok kullanışlıdır.

bottom alanı ne için uygundur?

Arama kutusu, tab, filtre çubuğu veya kategori şeridi için uygundur.

Bu yapı mobilde iyi çalışır mı?

Evet, doğru yüksekliği ve padding'i seçtiğiniz sürece oldukça iyi çalışır.

Özet

SliverAppBar, kategori başlığı ve arama alanını birleştirmek için çok esnek bir yapıdır. Liste ekranlarında daha iyi gezinme, daha net bağlam ve daha güçlü bir kullanıcı deneyimi sunar.