flutter eğitimi

Flutter Widgetlar ve Stateless – Stateful Widget Farkı

Merhabalar,

Flutter’da en çok duyduğumuz yapılardan biri olan widget kavramını ele alacağız bu dersimizde. Aynı zamanda bizim sayfa yapımıza göre şekil değiştiren Stateless ve Stateful widgetlarına değineceğiz.

Nedir bu widget?

Flutter’da neredeyse her şey widget’tır ve widget dediğimiz kavram bize hazır olarak verilmiş bileşenlerdir. Her bir arayüz elemanı gibi birçok yapı birer widget olarak geçer. Flutter’ın widget özelliklerine ve örneklerine bakmak için widget kataloğunu inceleyebilirsiniz. Bu widgetları kullanarak kolay ve hızlı bir şekilde uygulamamızı geliştirebiliriz. Yeri geliyor, widget içinde widget kullanıyoruz. Bunun için widget yapısını kavramak önem taşıyor. Her bir yapının aslında birer widget olduğunu ve bu widgetların özelliklerini bilmeliyiz.

İç içe yazacağımız widgetlar demişken, örnek verebiliriz. Bazı widgetlar, içine sadece bir widget kabul ederken; bazı widgetlar içine birden çok widget kabul edebiliyor. Bunu da şöyle düşünebiliriz. Flutter’da, Column diye bir widget vardır ki ilerleyen derslerde sayfa yapıları olarak bunu da ayrıntılı işleyeceğiz, birden çok widget alabilir. Çünkü Column widgetını, alt alta hizalanan bir liste gibi düşünebiliriz. Böylece aslında birden fazla eleman alabileceğini anlayabiliriz kolaylıkla. Fakat Container widgetını ise kutu gibi düşünüyoruz ve buna ise sadece bir eleman ekleyebiliyoruz.

 

Temel widget yapıları
Temel widget yapıları

 

En çok kullanılan widgetlardan MaterialApp ve Scaffold ve AppBar widgetlarına da değinelim.

MaterialApp widgetı, en zengin widgetlardan biridir. Main sınıfımızda projemizi oluşturduktan sonra run app metodu içerisine genellikle bir material app veririz. Diğer widgetları kullanabilmek için özellikle yönlendirme işlemi için MaterialApp widgetına ihtiyaç duyarız. Uygulamamızı oluştururken, en dış kısmı olarak bu widgetı düşünebiliriz.

Ardından Scaffold widgetı, ekran demektir. Scaffold ile ekranımızı oluştururuz. Eğer scaffold oluşturmazsak, içerisine eklersek ekleyelim siyah bir ekran görürüz. Scaffold ile beyaz bir ekran oluşturduktan sonra bunu şekillendirmek tamamen bize kalıyor.

AppBar widgetı da, Scaffold ile oluşturduğumuz ekranın içinde, üst kısımda oluşturduğumuz bir yapıdır. Burada uygulamanın adını yazabilir, bu üstte çıkan çizgi gibi alanın rengini değiştirebiliriz.

State nedir?

State, oluşturduğumuz uygulamanın durumu olarak tanımlanabilir. Ekranın anlık görüntüsüdür. Bir ekranın görüntüsünü yani State’i etkileyen birçok widget vardır. Örnek vermek gerekirse: yazılar, resimler yine en basit örnekleridir. State değiştiğinde, ekrandaki görüntü de değişir. O yüzden, kullandığımız widgetlara göre state seçimini doğru kulanmak önemlidir.

Stateless ve Stateful Widget farkı
Stateless ve Stateful Widget farkı

Stateful ve Stateless Widget farkı nedir?

Uygulamamızı Stateful veya Stateless widget sınıflarıyla oluşturuyoruz. Bu sınıflar da birer widgettır. Fakat neye göre Stateless veya Stateful widget sınıfı oluşturuyoruz, bu biraz kafa karıştırabiliyor. Şimdi sırayla incelediğimizde aslında çok kolay olduğunu beraber görebiliriz.

Öncelikle anlamlarına bakarak ip ucu yakalayabiliriz.

Stateless = Durumsuz,   Stateful = Durumsal 

Eğer, kullanacağımız ekranda değişen herhangi bir yapımız yoksa bunu Stateless widget kullanarak oluştururuz. Sabit yapılarla, durumsuz bir haldir. Yani değişen bir şey yoktur. Örnek olarak, koyacağımız bir başlık yazısı gibi değişmeyen widgetlarla, stateless widget kullanırız.

Eğer, kullanacağımız ekranda widgetlarda değişiklik olacaksa bunu Stateful widget kullanarak oluştururuz. Değişken yapılarla, durumsal bir haldir yani belirli durumlara sahiptir. Örnek olarak, ekranda bir saat göstermek istersek veya sayaçlı bir sistem gibi sürekli değişen değerlerde, stateful widget kullanırız.

Sorularınız için Soru-Cevap bölümüne bakabilirsiniz!

Flutter Eğitim serisine ulaşmak için tıklayınız.

188

Kadriye Macit

Kırıkkale Üniversitesi - Bilgisayar Mühendisliği

2 Yorum

Haftalık Bülten

Mobilhanem'de yayınlanan dersleri haftalık mail almak ister misiniz?