Flutter – Stack ve Positioned kullanımı – Örnek 1

Stack ile (ki ingilizcede tabak anlamına gelir) öğelerimizi üst üste koyabiliriz. Şöyle ki en alta bir resim koyduk, sonra bu resmin üzerine bir nesne daha koyduk.  İşte bütün bunları üst üste koymaya yarayan nesnemizin adı stack dır.

bir diğer widget imiz ise Positioned dur. bu widget ise en alttaki tabağın üzerine koyduğumuz tabağı (ki bu da container widget’i) hangi pozisyonda göstereceğimizi söylüyor. Top ve left komutu ile konumunu ayarlayabilitoruz.

return Column(
      children: <Widget>[
        Stack(
          //bu widget içindeki nesneleri üst üste getirebiliyoruz...
          children: <Widget>[
            Container(
              //child: Text("hakan"),
              height: 75,
              width: 75,
              decoration: // bir decoration oluşturuyoruz çünkü yuvarlak bir yapı istiyoruz.
                  BoxDecoration(
                      borderRadius: BorderRadius.circular(
                          35), // bu komut ile yuvarlaklığı veriyoruz
                      image: DecorationImage(
                        image: AssetImage(imagePath),
                        fit: BoxFit.cover,
                        //yani resmimizi decoration içinde fitle... Böylelikle tam yuvarlak resim elde edilir.
                      )),
            ),
            Positioned( 
              //bu widget ile öğemizin pozisyonunu ayarlayabiliriz.
              top: 50,
              left: 50,
              child: Container(
                width: 25,
                height: 25,
                decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(12),
                    image: DecorationImage(
                      image: AssetImage(logoPath),
                      fit: BoxFit.cover,
                    )),
              ),
            )
          ],
        )
      ],
    );
  }

Bir cevap yazın

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