Flutter Stack Kullanımı (Üst Üste Hizalama) #1

Flutter’da Stack Kullanımı

Clippath ile birlikte Flutter’da tasarıma en çok katkıyı sağlayan iki yapıdan birisi olan Stack yapısı hakkında bildiklerimi aktarmaya çalışacağım keyifli okumalar.

Stack kullanarak uygulamanın görünümünde seviye atlatmak mümkün. Oldukça da basit yöntemlerle bu tasarımlara sahip olmak mümkün. Örnek olması açısından boş bir stack.dart isimli dosya oluşturuyoruz.

Kodlar tamamlandığında böyle bir ekrana sahip olacağız.

Flutter Stack kullanımı

Önce kodların tamamını atayım sonrada açıklayayım.

import 'package:flutter/material.dart';

class StackEkrani extends StatefulWidget {
  @override
  _StackEkraniState createState() => _StackEkraniState();
}

class _StackEkraniState extends State<StackEkrani> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Stack Ekranı"),
      ),
      body: Container(
        width: MediaQuery.of(context).size.width,
        height: 250,
        color: Colors.red,
        child: Stack(
          overflow: Overflow.visible,
          children: <Widget>[
            Positioned(
              bottom: -40,
              left: 25,
              child: GestureDetector(
                onTap: (){
                  debugPrint("Butona tıklandı");
                },
                child: Container(
                  width: 80,
                  height: 80,
                  decoration: BoxDecoration(
                    color: Colors.yellow,
                    borderRadius: BorderRadius.all(
                      Radius.circular(50),
                    ),
                  ),
                  child: Icon(Icons.person, color: Colors.white, size: 40,),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

Bu örnek için işin mantığı şu: Bir Container çizeriz. Bu Container bizim sınır alanımız olacak. İçerisine ekleyeceğimiz ögeleri bu Container çerçevesi içerisinde yapacağız. Eklediğimiz buton neden çerçevenin dışarısında peki? Dediğim gibi Container’ın genişliği ve yüksekliği esas alınarak yerleşimler yapılıyor.

Container’ın aşağısından 40 piksel içeri gir veya dışarı çık, soldan 50 piksel içeri gir tarzında olacak. Umarım net anlatabilmişimdir. Stack’i Container içerisinde almamız işte bu yüzden.

overflow: Overflow.visible,

Kodlarda yer alan bu satır, Container sınırları dışarısında kalan Widget’ların görünmesini sağlıyor. Eğer bu kod satırı olmasaydı böyle görünecekti;

Flutter Stack Kullanımı

Positioned Widget’ı ise bu Container sınırları baz alınarak yerleşim yapmamızı sağlıyor. Ben sarı zemin üzerine bir ikon kullandım işte bunun burada olmasını Positioned sayesinde yaptık.

Positioned Widget’ı içerisinde top, bottom, right ve left yönlerini kullanarak yerleşim yapıyoruz.

bottom: 20 dediğimizde alttan 20 boşluk ver manasına geliyor tabi diğerleri için de öyle.

Peki bir de kullanıcı adı eklemek istersek ne yapacağız?

Flutter Stack Örnekleri

Yeni bir yerleşim yapmak için tekrar Positioned Widget’ını kullanıyoruz. Bu sefer boşluğu sağdan ve alttan veriyoruz ki görüntüde ki tasarıma ulaşalım.

Positioned(
  bottom: 20,
  right: 20,
  child: Text(
    "Kullanıcı adı: Mertcan",
    style: TextStyle(color: Colors.white, fontSize: 25),
  ),
),

İlk kısım için yazımız bu kadar. İkinci kısmında ise ekranın tümünde nasıl hizalama yapacağımıza değineceğim. Umarım ikisi de faydalı yazılar olur.

Flutter’ı öğrenirken aynı zamanda yazıyorum da. Medium ve kendi blog sitemde bu konulara değiniyorum. Dilerseniz sitemi ziyaret ederek pek çok konuda farklı örnek de bulabilirsiniz.

Sitem: Flutter Örnekleri