Flutter : Stateless Widget ve Stateful Widget

Bu yazımda Stateful Widget ve Stateless Widget nedir hangi durumlarda kullanılır ondan bahsedeceğim. Öncelikle widget nedir? Widget herşeydir. Yani kullandığımız Text, Button, Icon, Center vs. hepsi birer widgettır. Oluşturduğumuz projelerin birer parçasıdır.

Şimdi Stateful ve Stateless Widget’ı inceleyelim.

Stateless Widget

Stateless Widget arayüzde herhangi bir değerin anlık değişimine ihtiyaç duyulmadığı yerlerde kullanılır. Örneğin bir ürünün detay sayfası. Bu sayfada anlık değişecek bir yer olmadığı için sadece ürünün adı, fiyatı, resmi ve ürün açıklaması gibi alanlarda bir değişiklik olmayacağından bu sayfayı Stateless Widget kullanarak yapabiliriz.

Kullanıcılar etkileşime geçse bile Stateless Widget’lar değişmez. Yani başka bir deyişle uygulama çalışır vaziyetteyken widgetlar yeniden çizilmezler.

Aşağıda örnek bir Stateless Widget kullanımı vardır:

import 'package:flutter/material.dart';

void main() => runApp(MyHome());

class MyHome extends StatelessWidget {
  const MyHome({Key key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
      appBar: AppBar(title: Text("Stateless Widget",)),
      body: Center(
        child: Text("Hello World,"),
    ), ), );
  } 
}

Stateful Widget

Stateful Widget’lar Stateless Widget’ların tam tersidir. Yani kullanıcı etkileşimine göre bir değişiklik yapmak istiyorsanız Stateful Widget kullanabilirsiniz. Örneğin bir butonun arka plan rengini değiştirmek istiyorsanız bunun için Stateful Widget kullanmalısınız.

Bir butonun arkaplan rengini değiştirme örnek kodu

Stateful Widget Yaşam Döngüsü

Stateful Widget’ın yaşam döngüsü aşağıdaki gibidir:

1. createState()
2. mounted=true
3. initState()
4. didChangeDependencies()
5. build()
6. didUpdateWidget()
7. setState()
8. deactive()
9. dispose()
10. mounted=false

createState()
Stateful widget oluşturulduğunda ilk olarak createState() çağırılır.

class MyHomePage extends StatefulWidget {
 @override
 _MyHomePageState createState() => new _MyHomePageState();
}

mounted is true
createState durum sınıfı oluşturduğunda o duruma buildContext gönderilir. Bütün widgetler bool türündeki bu mounted özelliğine sahiptir. buildContext atandığı widget ı eşsiz yapar.

initState()
Bu, widget oluşturulduktan sonra çağırılan ilk metotdur.(Tabiki sınıf constructor ından sonra)

initstate sadece bir kere çağırılır. Aynı zamanda super.initstate() metodunu da çağırmalıdır.

Burada istenilen bazı nesneler oluşturulur, değerler atanır.

@override
initState() {
  super.initState();
  // Add listeners to this class
  cartItemStream.listen((data) {
    _updateWidget(data);
  });
}

didChangeDependencies()
didChangeDependencies metodu initstate metodundan hemen sonra widget ilk build edildiğinde çağırılır.

build metodu her zaman didChangeDependencies metodundan sonra çağırılır.

build()
@override olması ve bir Widget döndürmesi gereklidir.

didUpdateWidget
didUpdateWidget parent widget değiştiğinde çağırılır ve bu widget ı yeniden built etmek zorundadır(Çünkü farklı veriler geldiği için).

setState()
setState metodu geliştirici tarafından çağırılan bir metotdur. Verinin değiştiğini Framework’e bildirmek için kullanılır ve bu buildContext’teki widget ın yeniden build edilmesini sağlar.

setState() asenkron değildir. İhtiyaç olduğu zaman çağrılması bunun bir nedenidir.

void updateProfile(String name) {
 setState(() => this.name = name);
}

deactivate()
deactivate() State ağaçtan kaldırıldığında çağırılır. Fakat mevcut işlem tamamlanmadan tekrar yerleştirilebilir.

dispose()
dispose() metodu State nesnesi kalıcı olarak kaldırılğında çağırılır. Bu metot bütün animasyonları, streamleri vs. iptal eder.

mounted is false
Durum nesnesi asla yeniden bağlanamaz ve setState() çağrıldığında bir hata fırlatılır.

Stateless Widget:

1. Bir Stateless widget uygulama çalışırken duruu değiştiremez.
2. Statik bir widgettır.
3. Sadece ilk çalıştırmada güncellenir.
4. setState() metodu yoktur. Sadece bir kere render edilir ve bir daha kendini güncelleyemez.
5. Harici bir olay meydana gelmedikçe güncellenmez.

Stateful Widget:

1. Bir Stateful widget arayüz parçalarının dinamik olarak değişmesi gerektiğinde kullanılır.
2. Dinamik bir widgettır.
3. Dinamik olarak değişebilir ve güncellenebilir.
4. Çalışma zamanında kullanıcı aksiyonlarına göre veya veri değiştiği sürece güncellenebilir.
5. setState metoduna sahiptir ve giriş verisi değiştiğinde yeniden render edilir.

Stateless ve Stateful Widget’lar nelerdir? Nerede ve nasıl kullanılır? Aralarındaki farklar nelerdir? Bu yazımda bunlara cevap vermeye çalıştım. Okuduğunuz için teşekkürler.

Bir sonraki yazımda görüşmek üzere..