Flutter: SingleChildScrollView ve ScrollView Kullanımı

Mobil uygulamalarda ekran boyutları sınırlıdır ve içerik genellikle tek bir ekrana sığmaz. Bu durumlarda içeriğin kaydırılabilir (scrollable) olması gerekir. Flutter'da bunu sağlamanın en temel yolu SingleChildScrollView widget'ıdır.

Canlı Demo

Aşağıdaki interaktif örnekte bu widget'ı deneyebilirsiniz:

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

SingleChildScrollView Nedir?

Tek bir widget'ı (genellikle Column gibi) kaydırılabilir hale getiren bir kutudur.

Temel Kullanım

SingleChildScrollView(
  child: Column(
    children: [
      Container(height: 200, color: Colors.red),
      Container(height: 200, color: Colors.green),
      Container(height: 200, color: Colors.blue),
      Container(height: 200, color: Colors.yellow),
      // Ekran boyutunu aşan daha fazla içerik...
    ],
  ),
)

Eğer SingleChildScrollView kullanmazsanız ve içerik ekranı taşarsa sağ tarafta o meşhur "sarı-siyah şeritli" taşma hatasını (overflow error) alırsınız.

Yatay Kaydırma (Horizontal Scrolling)

Sadece dikey değil, yatay da kaydırma yapabilirsiniz.

SingleChildScrollView(
  scrollDirection: Axis.horizontal,
  child: Row(
    children: [
      Container(width: 150, color: Colors.red),
      Container(width: 150, color: Colors.green),
      Container(width: 150, color: Colors.blue),
    ],
  ),
)

SingleChildScrollView vs ListView

Çok sık yapılan bir hata, uzun listeler için SingleChildScrollView içinde Column kullanmaktır. Bu performanssızdır çünkü tüm elemanlar (ekranda görünmese bile) aynı anda render edilir.

• SingleChildScrollView: Az sayıda ve belirli elemanlar için (örn. bir form sayfası veya ayarlar ekranı).
• ListView: Çok sayıda veya dinamik/liste şeklinde veriler için. Sadece ekranda görünenleri render eder (lazy loading).

ListView Örneği:

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

Physics (Kaydırma Fiziği)

Kaydırma davranışını değiştirebilirsiniz.

• BouncingScrollPhysics: iOS tarzı yaylanma efekti.
• ClampingScrollPhysics: Android tarzı, sona gelince duran efekt (mavi hale).

SingleChildScrollView(
  physics: BouncingScrollPhysics(),
  child: Column(...)
)

Klavye Sorunu ve ScrollView

Form alanları (TextField) kullanırken klavye açıldığında ekranın sıkışmaması için SingleChildScrollView hayati önem taşır. Genellikle content'in tamamını sarmalar, böylece klavye açıldığında kullanıcı üstteki alanlara kaydırarak erişebilir.

Özet

• İçeriğiniz ekrana sığmıyorsa SingleChildScrollView kullanın.
• Kaydırmak istediğiniz yönü (scrollDirection) belirleyebilirsiniz.
• Eğer yüzlerce aynı türden öğe (liste) gösterecekseniz ListView kullanın.
• Form ekranları için SingleChildScrollView idealdir.