Flutter Stack Nedir ve Nasıl Kullanılır?

Flutter’da Stack widget’i, çocuk widget’ları örtüşen bir düzen oluşturmak için kullanılan bir widget’tır. Stack widget’i, çocuk widget’ları yatayda veya dikeyde üst üste yerleştirerek birbiri üzerine bindirebilir.

Stack widget’i, “children” parametresi aracılığıyla birden fazla çocuk widget’ı alır. Çocuk widget’lar, Stack içindeki sırasına göre üst üste bindirilir.

Stack(
children: [
// İlk çocuk widget
Positioned(
top: 50.0,
left: 50.0,
child: Container(
width: 100.0,
height: 100.0,
color: Colors.red,
),
),
// İkinci çocuk widget
Positioned(
top: 100.0,
left: 100.0,
child: Container(
width: 100.0,
height: 100.0,
color: Colors.blue,
),
),
// Üçüncü çocuk widget
Positioned(
top: 150.0,
left: 150.0,
child: Container(
width: 100.0,
height: 100.0,
color: Colors.green,
),
),
],
)

Yukarıdaki örnekte, Stack widget’i içinde üç adet Positioned widget’i kullanılmıştır. Positioned widget’i, çocuk widget’ı belirli bir pozisyonda konumlandırmak için kullanılır. “top” ve “left” gibi parametrelerle çocuk widget’ların pozisyonlarını belirtebilirsiniz.

Her bir Positioned widget’i, Container widget’ı ile bir renkli kutu oluşturur. Bu örnekte, üç kutu üst üste biner. İlk kutu kırmızı, ikinci kutu mavi ve üçüncü kutu yeşildir.

Stack widget’i, UI’da öğeleri üst üste bindirmek, çakışan görsel efektler oluşturmak veya parçalı bir düzen oluşturmak için kullanışlıdır. Çocuk widget’ları Stack içindeki sırasına göre düzenleyebilir ve konumlarını belirtebilirsiniz.