Flutter Stack Nedir örneklerle anlatalım

Flutter Stack, diğer widget’ların üzerine yerleştirilebilen widget’ların bir araya getirilmesi için kullanılan bir yapıdır. Bu widget, kullanıcılara ekran üzerinde katmanlar oluşturarak sayfada istedikleri şekilde yerleştirme özgürlüğü sağlar.

Stack widget’ı, ekran üzerinde bir veya daha fazla çocuk widget’ı oluşturmak için kullanılır. Bu widget’lar, yığın şeklinde diğer widget’ların üzerinde yerleştirilir. Yani, üstteki widget’lar alttaki widget’ları örter. Bu nedenle, en üstteki widget’lar alttaki widget’ların tamamını kapattığında, alttaki widget’lar ekranda görünmez hale gelir.

Flutter Stack, birden fazla widget’ı farklı konumlarda göstermek istediğinizde özellikle yararlıdır. Bu widget’ı kullanarak, örneğin bir metin kutusu ve bir resim görüntülemek için yığın şeklindeki widget’larınızı bir araya getirebilirsiniz. Stack widget’ı, özellikle bir arka plan resmi üzerine birden fazla resim veya metin eklemeniz gerektiğinde yararlıdır.

Stack widget’ı kullanırken, her çocuk widget’ı için bir konum ve boyut belirleyebilirsiniz. Bu, widget’ların farklı yerlerde ve farklı boyutlarda görüntülenmesini sağlar. Ayrıca, Stack widget’ı içindeki çocuk widget’ların özelliklerini ve şekillerini belirlemek için diğer widget’ları da kullanabilirsiniz.

Stack widget’ı, flutter uygulamalarında çok yönlü bir kullanım sağlar. Örneğin, Stack widget’ı kullanarak, animasyonlu sayfalar oluşturabilir veya kullanıcı etkileşimlerini yönetmek için dokunma alanlarını ve düğmeleri yerleştirebilirsiniz. Stack widget’ı, flutter uygulamalarınızda özgün tasarımlar oluşturmak için size birçok fırsat sunar.

Stack(
  children: <Widget>[
    Container(
      height: 300,
      width: 300,
      decoration: BoxDecoration(
        image: DecorationImage(
          image: NetworkImage('https://picsum.photos/300/300'),
          fit: BoxFit.cover,
        ),
      ),
    ),
    Positioned(
      bottom: 20,
      left: 20,
      child: Container(
        padding: EdgeInsets.all(10),
        decoration: BoxDecoration(
          color: Colors.white.withOpacity(0.7),
          borderRadius: BorderRadius.circular(10),
        ),
        child: Text(
          'Hasan Aylas',
          style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
        ),
      ),
    ),
  ],
)

Bu örnekte, Stack widget’ı kullanarak iki çocuk widget’ı ekledim. İlk çocuk widget, bir resimdir. Container widget’ı, resmin boyutlarını belirler ve BoxDecoration widget’ı, resim öğesinin şeklini belirler. Resim, DecorationImage widget’ı ile eklenir.

İkinci çocuk widget, bir metin kutusu ve “Hasan Aylas” yazısıdır. Positioned widget’ı kullanılarak, metin kutusunun konumu belirlenir. Container widget’ı, metin kutusunun şeklini belirler. Text widget’ı, metin kutusunun içeriğini belirler.

Bu örnekte, Stack widget’ı kullanarak farklı konumlarda ve boyutlarda iki widget’ı bir araya getirerek, özgün bir tasarım oluşturdum. Siz de benzer şekilde, Stack widget’ı kullanarak flutter uygulamalarınızda özgün tasarımlar oluşturabilirsiniz.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir