Flutter -Stateless Widget ve Stateful Widget

Flutter’da, herşey widget ile düzenleniyor ve flutter bizlere ihtiyacımız olan her widget’ı hazır olarak sunuyor. Ayrıca bu widget’ların kataloğu genişliyor ve güncelleniyor. Widget temel olarak ekranda gördüğümüz her şeyin oluşturulma biçimidir. Daha somut ifade etmek gerekirse resim, metin, şekil, şablon, liste veya düzen gibi herhangi bir görünür öğe veya yapıdır.

Stateless ve stateful widgetlar da widgetların iki ana kategorisidir. State, türkçe karşılığı durum anlamına gelen yani, kullanım ömrü boyunca widget içindeki verilerin değişip değişmeyeceğini ifade eder.

Stateless Widget

Durum bilgisi olmayan, durumu değişmeyen widget anlamına gelir. Örneğin, ekranın en tepesine uygulamamızın adını yazdık bu yazı ilerleyen süreçlerde değişmeyecektir, bu demek oluyor ki bu yazı stateless bir text widgetı olabilir. Stateless widget’lar, kullanıcı ile iletişime girse bile aynı kalır.

Stateless Widget örneği;

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

Durum bilgisi olan widget’lar durum bilgisi olmayan widget’ların tam tersidir. Ekran üzerinde görüntüsü, durumu değişecek widgetlar stateful widgetlardır. Flutter ile ilk çalışmaya başladığımızda karşımıza bir sayaç uygulaması çıkmaktadır. Buna örnek olarak verilebilir. Sayacı arttır butonuna bastığımızda ekrana anında yansımaktadır.

StatefulWidget kullanıldığında mecburen override edilmesi gereken createState metodu gelir. Burada bir State oluşturulur. Bu state içerisinde tasarımımızı yaparız ve bu sayede yine Stateful Widget’a özgü setState metodu ile oluşan State’in yenilenmesi sağlanır.

class MyWidget extends StatefulWidget {
  @override
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text('Sayac: $_counter'),
        RaisedButton(
          onPressed: _incrementCounter,
          child: Text('Artır'),
        ),
      ],
    );
  }
}

Yukarıdaki örnekte, MyWidget sınıfı StatefulWidget sınıfından türetilmiştir ve createState() yöntemi, _MyWidgetState sınıfını oluşturur. _MyWidgetState sınıfı, _counter adında bir değişken içerir ve _incrementCounter() yöntemi, setState() yöntemi ile içerideki tüm olayları dinleme yapılabilir.

Stateless Widget ve Stateful Widget Arasındaki Farklar

• Durum(state) : Stateless widget durum içermez ve sabittir. Statefull widget, içeriğini güncellemek için bir durum nesnesi kullanır.
• Yeniden oluşturma: Stateless widget bir kez oluşturulur ve tekrar oluşturulmasına gerek yoktur. Stateful widget yeniden oluşturulabilir.
• Kullanım alanları: Stateless widget statik veya değişmeyen UI elemanları içindir. Stateful widget ise dinamik veya değişen UI elemanları için uygundur.

Okuduğunuz için teşekkür ederim, umarım faydalı olmuştur.