Taban olarak, Flutter’da Row widget’ı, Column widget’ına benzer bir şekilde çalışır, ancak yatay bir hizalamaya sahiptir. Bu widget, düzenlenmiş bir liste veya form gibi UI öğeleri oluşturmak için kullanılabilir.
Row Widget’ı Oluşturma
Bir Row widget’ı oluşturmak için, Row widget’ını kullanarak bir dizi çocuk widget oluşturun. Örneğin, aşağıdaki kodda, bir Row widget’ı içinde üç adet Container widget’ı bulunur:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
Row( children: <Widget>[ Container( width: 50.0, height: 50.0, color: Colors.blue, ), Container( width: 50.0, height: 50.0, color: Colors.green, ), Container( width: 50.0, height: 50.0, color: Colors.red, ), ], ) |
Bu kod, üç adet dikdörtgen kutu oluşturur. Her bir kutu, width ve height özellikleri kullanılarak boyutlandırılmıştır. Bu özellikler, Container widget’ı için isteğe bağlıdır ve boyutları otomatik olarak ayarlanabilir.
Row Widget’ında Boşlukları Ayarlama
Row widget’ında, çocuk widget’lar arasındaki boşluğu ayarlamak için mainAxisAlignment özelliğini kullanabilirsiniz. Bu özellik, MainAxisAlignment enum’u tarafından tanımlanan farklı hizalama seçeneklerini kullanır. Örneğin, aşağıdaki kodda, Row widget’ının çocuk widget’ları, dikey olarak ortalandırmak için mainAxisAlignment özelliği MainAxisAlignment.center olarak ayarlanır:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
Row( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Container( width: 50.0, height: 50.0, color: Colors.blue, ), Container( width: 50.0, height: 50.0, color: Colors.green, ), Container( width: 50.0, height: 50.0, color: Colors.red, ), ], ) |
Row Widget’ında Çocukların Hizalanması
Row widget’ı içindeki çocuk widget’ların hizalanması, mainAxisAlignment ve crossAxisAlignment özellikleri kullanılarak ayarlanabilir.
mainAxisAlignment: çocuk widget’ların ana eksen boyunca hizalanmasını kontrol eder.crossAxisAlignment: çocuk widget’ların çapraz eksen boyunca hizalanmasını kontrol eder.
Aşağıdaki kodda, mainAxisAlignment özelliği kullanılarak kutuların yatayda nasıl hizalandığı gösterilir:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: <Widget>[ Container( width: 50.0, height: 50.0, color: Colors.red, ), Container( width: 50.0, height: 50.0, color: Colors.green, ), Container( width: 50.0, height: 50.0, color: Colors.blue, ), ], ) |
Bu kod, üç adet kutu oluşturur ve bu kutular, MainAxisAlignment.spaceBetween özelliği kullanılarak yatay olarak hizalanır.
crossAxisAlignment özelliği, aynı şekilde, çocuk widget’ların dikey hizalanmasını kontrol eder. Aşağıdaki kodda, crossAxisAlignment özelliği kullanılarak kutuların dikeyde nasıl hizalandığı gösterilir:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
Row( crossAxisAlignment: CrossAxisAlignment.end, children: <Widget>[ Container( width: 50.0, height: 50.0, color: Colors.red, ), Container( width: 50.0, height: 100.0, color: Colors.green, ), Container( width: 50.0, height: 50.0, color: Colors.blue, ), ], ) |
Bu kod, üç adet kutu oluşturur ve orta kutunun yüksekliği, diğer iki kutudan farklıdır. Ancak, crossAxisAlignment özelliği kullanılarak, kutular dikey olarak hizalanır.
Row Widget’ı İçindeki Widget’ların Esnekliği
Bir Row widget’ı içindeki widget’ların esnekliği, Expanded widget’ı kullanılarak ayarlanabilir. Expanded widget’ı, mevcut boşluğu doldurmak için bir widget’ın boyutunu genişletir.
Aşağıdaki kodda, Row widget’ı içindeki her üç Container widget’ı Expanded widget’ı kullanılarak boyutlandırılır:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
Row( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Expanded( child: Container( height: 50.0, color: Colors.blue, ), ), Expanded( child: Container( height: 50.0, color: Colors.green, ), ), Expanded( child: Container( height: 50.0, color: Colors.red, ), ), ], ) |
Bu kod 3 adet kutu oluşturur ve bu kutular, Expanded widget’ı kullanılarak yatay boyutlandırılır. Row widget’ı, tüm kullanılabilir alanı kaplamak için kullanılabilir olduğundan, kutular eşit genişlikte olacak şekilde boyutlandırılır.
Expanded widget’ı ayrıca, belirli bir widget’ın boyutunu belirli bir oranda genişletmek için de kullanılabilir. Aşağıdaki kodda, ilk kutu %60, ikinci kutu %30 ve üçüncü kutu %10 genişlikte ayarlanır:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
Row( children: <Widget>[ Expanded( flex: 6, child: Container( height: 50.0, color: Colors.blue, ), ), Expanded( flex: 3, child: Container( height: 50.0, color: Colors.green, ), ), Expanded( flex: 1, child: Container( height: 50.0, color: Colors.red, ), ), ], ) |
Bu kod, üç adet kutu oluşturur ve her kutu, Expanded widget’ı ve flex özelliği kullanılarak boyutlandırılır.
Özet
Row widget’ı, yatayda birden fazla widget’ı hizalamak için kullanılır. mainAxisAlignment ve crossAxisAlignment özellikleri, çocuk widget’ların hizalanmasını kontrol etmek için kullanılabilir. Expanded widget’ı, bir widget’ın boyutunu mevcut boşluğu doldurmak için genişletmek veya belirli bir oranda genişletmek için kullanılabilir.
İlk Yorumu Siz Yapın