SingleChildScrollView nedir?

SingleChildScrollView, Flutter üzerinde sayfaların, widgetların kaydırılabilir olmasını sağlayan basit bir widgettır. Genellikle Column ve Row gibi birden çok child widgeta sahip widgetların sayfaya sığmaması durumunda sayfayı kaydırılabilir yaparak widgetların sıkışmamasını sağlar.

SingleChildScrollView widgetı hem vertical (yukarıdan aşağıya) hem de horizontal (sağdan sola) şekilde çalışabilir. Default olarak Axis.vertical olarak gelir.

Bir kaydırılabilir Scaffold örneğini inceleyelim:

    return Scaffold(
      body: Container(
        height: MediaQuery.of(context).size.height,
        width: MediaQuery.of(context).size.width,
      ),
    );

Öncelikle SingleChildScrollView widgetının sayfa üzerinde yerleşebilmesi için bir Size’a ihtiyacı vardır. Tüm sayfanın kaydırılabilir olması için Scaffold içerisindeki Container’ımı tam sayfa yaptım.

 return Scaffold(
      body: Container(
        height: MediaQuery.of(context).size.height,
        width: MediaQuery.of(context).size.width,
        child: SingleChildScrollView(
          child: Column(
            children: [],
          ),
        ),
      ),
    );

Daha sonrasında Container içerisine SingleChildScrollView ekleyerek daha sonrasında Column içerisine ekleyeceğim Container’ların boyutları ne olursa olsun render error vermemesini sağlıyorum.

return Scaffold(
      body: Container(
        height: MediaQuery.of(context).size.height,
        width: MediaQuery.of(context).size.width,
        child: SingleChildScrollView(
          child: Column(
            children: [
              Container(
                height: MediaQuery.of(context).size.height / 2,
                width: MediaQuery.of(context).size.width,
                color: Colors.red,
              ),
              Container(
                height: MediaQuery.of(context).size.height / 2,
                width: MediaQuery.of(context).size.width,
                color: Colors.blue,
              ),
              Container(
                height: MediaQuery.of(context).size.height / 2,
                width: MediaQuery.of(context).size.width,
                color: Colors.yellow,
              ),
              Container(
                height: MediaQuery.of(context).size.height / 2,
                width: MediaQuery.of(context).size.width,
                color: Colors.black,
              ),
            ],
          ),
        ),
      ),
    );

Yukarıdan aşağıya kaydırılabilir bir sayfa yapmak bu kadar kolay! Peki ya horizontal, yani sağdan sola kaydırılabilir widgetları yapmak?

              SingleChildScrollView(
                scrollDirection: Axis.horizontal,
                child: Row(
                  children: [
                    FeaturedTag(),
                    SizedBox(width: 16.0),
                    FeaturedTag(),
                    SizedBox(width: 16.0),
                    FeaturedTag(),
                  ],
                ),
              ),

SingleChildScrollView içerisinde Row ekliyorum ve kaydırma yönünü Axis.horizontal olarak güncelliyorum. Ve bu kadar! Horizontal kaydırılabilir bir widgetınız oldu.

---

---

---

Okuyucuya Not

Merhaba okuyucu! Blogum son zamanlarda yüksek trafik almaya başladı ve bu durumdan memnunum fakat aynı zamanda siz ziyaretçileri tatmin edememekten endişeliyim. 🙂 Eğer yazılarım ile ilgili bir tavsiyeniz olursa mail adresimden bana ulaşabilir veya Twitter üzerinden direct message gönderebilirsiniz. Github’ta örnek olarak yaptığım projelere göz atmak isterseniz de bu linki kullanabilirsiniz. Umarım bu ziyaretinizle size bir şeyler katabilmişimdir.

Sağlıcakla kalın!