Flutter: SingleChildScrollView, ListView ve NestedScrollView Karşılaştırması

Flutter'da scroll konusu çoğu zaman basit görünür ama yanlış widget seçimi performans sorunlarına, overflow hatalarına ve karmaşık nesting problemlerine yol açabilir. Bu yazıda SingleChildScrollView, ListView ve NestedScrollView arasındaki farkları netleştireceğiz.

Live Demo

Aşağıdaki interaktif örnekte scroll widget'larını deneyebilirsiniz:

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

Neden Bu Karşılaştırma Önemli?

Google'da kullanıcılar çoğu zaman doğrudan çözüm arar: "flutter scrollview", "flutter listview performance", "flutter nested scrollview". Bu yüzden doğru widget seçimi kadar, doğru karşılaştırma içeriği de önemlidir.

SingleChildScrollView Ne Zaman Kullanılır?

SingleChildScrollView, az sayıda widget içeren ekranlarda çok kullanışlıdır. Formlar, ayar sayfaları veya kısa içerik blokları için iyi bir seçimdir.

SingleChildScrollView(
  child: Column(
    children: const [
      SizedBox(height: 16),
      Text('Header'),
      SizedBox(height: 400),
      Text('Footer'),
    ],
  ),
)

ListView Ne Zaman Kullanılır?

Uzun liste, dinamik veri ve lazy loading gereken her durumda ListView daha doğru tercihtir. Çünkü ekranda görünmeyen öğeleri aynı anda çizmez.

ListView.builder(
  itemCount: 100,
  itemBuilder: (context, index) {
    return ListTile(
      title: Text('Item $index'),
    );
  },
)

NestedScrollView Ne İşe Yarar?

NestedScrollView, özellikle üstte sabit bir header veya SliverAppBar ile içeride kaydırılan bir listeyi birlikte kullanmak istediğinizde öne çıkar.

NestedScrollView(
  headerSliverBuilder: (context, innerBoxIsScrolled) => [
    SliverAppBar(
      title: const Text('Profile'),
      pinned: true,
      expandedHeight: 200,
    ),
  ],
  body: ListView.builder(
    itemCount: 30,
    itemBuilder: (context, index) => ListTile(title: Text('Row $index')),
  ),
)

Performans Farkı

En kritik fark render davranışıdır:

• SingleChildScrollView: Tüm child'ları birlikte taşır
• ListView: Görünen öğeleri önceliklendirir
• NestedScrollView: Birleşik scroll deneyimi sunar, ama yanlış kullanılırsa karmaşıklaşabilir

Uzun listelerde SingleChildScrollView yerine ListView kullanmak genellikle daha doğrudur.

En Sık Yapılan Hatalar

• Uzun listeyi SingleChildScrollView içine koymak
• ListView ile birlikte gereksiz shrinkWrap: true kullanmak
• Nested yapı kurarken scroll davranışını test etmemek
• Keyboard açıldığında form alanlarını erişilemez bırakmak

Klavye ve Form Ekranları

Form sayfalarında SingleChildScrollView çoğu zaman hayat kurtarır. Klavye açıldığında ekranın sıkışmasını azaltır ve kullanıcıya alanların üstüne kayma imkânı verir.

SingleChildScrollView(
  child: Padding(
    padding: const EdgeInsets.all(16),
    child: Column(
      children: const [
        TextField(),
        SizedBox(height: 16),
        TextField(),
      ],
    ),
  ),
)

Hangi Durumda Hangisini Seçmelisiniz?

• Kısa form ve ayar sayfası: SingleChildScrollView
• Uzun ve dinamik liste: ListView
• Sliver tabanlı birleşik header + body: NestedScrollView

Sık Sorulan Sorular

SingleChildScrollView neden uzun listelerde kötü performans verir?

Çünkü tüm çocukları aynı anda render etmeye çalışır. Bu da büyük veri setlerinde maliyeti artırır.

shrinkWrap neden dikkatli kullanılmalı?

Çünkü shrinkWrap: true bazı durumlarda layout maliyetini yükseltir. Sadece gerçekten gerekiyorsa kullanın.

NestedScrollView her zaman gerekli mi?

Hayır. Sadece birden fazla scroll alanını birlikte yönetmeniz gereken senaryolarda anlamlıdır.

Özet

Flutter'da doğru scroll widget'ını seçmek, performans kadar kullanıcı deneyimini de etkiler. SingleChildScrollView, ListView ve NestedScrollView arasındaki farkları bilmek, daha temiz ve daha SEO uyumlu Flutter içerikleri oluşturmanın da temelidir.