Flutter’da Row ve Column Kullanımı

Herkese merhabalar. Bu yazım da Row ve Column widget’larının temel özelliğini kısaca anlattım.

Row widget’ı diğer widget’ları yan yana kullanmamıza olanak tanırken, Column widget’ı ise widget’ları alt alta sıralayarak kullanabilmemizi sağlar. Aşağıdaki görselde basit bir kullanım görebilirsiniz.

Scaffold(
        appBar: AppBar(
          backgroundColor: Theme.of(context).colorScheme.inversePrimary,
          title: const Text("Row ve Column Temel Özellikler"),
        ),
        body: Column(
          children: [
            const SizedBox(
              height: 10,
            ),
            const Text("Column Widget'ı"),
            const SizedBox(
              height: 10,
            ),
            const Text("Alt alta widget kullanmamızı sağlar"),
            const SizedBox(
              height: 10,
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Container(
                  height: 150,
                  width: 120,
                  alignment: Alignment.center,
                  decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(15),
                      color: Colors.yellow),
                  child: const Text(
                    "1",
                    style: TextStyle(fontSize: 16, color: Colors.white),
                  ),
                ),
                Container(
                  height: 150,
                  width: 120,
                  alignment: Alignment.center,
                  decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(15),
                      color: Colors.blue),
                  child: const Text(
                    "2",
                    style: TextStyle(fontSize: 16, color: Colors.white),
                  ),
                ),
                Container(
                  height: 150,
                  width: 120,
                  alignment: Alignment.center,
                  decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(15),
                      color: Colors.red),
                  child: const Text(
                    "3",
                    style: TextStyle(fontSize: 16, color: Colors.white),
                  ),
                )
              ],
            ),
          ],
        ),
      ),

Row ve Column’ı diğer widget’lardan ayıran en önemli unsur birden fazla children yani birden fazla widget almasıdır. Örneğin Container widget’ı tek bir widget temelini esas alır. Yukarıdaki örnekte Container içerisini Row ya da Column widget’ı ile sarmalarsak birden fazla widget almasını sağlamış oluruz. Row ile sarmalayıp iki farklı icon tanımladığınızda görüntü sonuç aşağıdaki gibi olacaktır.