Flutter — Stateful vs Stateless Widgets

Widget nedir?

Widgetlar, kullanıcıya sunulan grafik öğelerin (butonlar, metin kutuları, resimler vb.) temel yapı taşlarıdır. Ancak, widgetların nasıl yönetildiği ve durumlarının nasıl takip edildiği, geliştirme sürecinde önemli bir fark yaratabilir.

İki yaygın widget tipi, Stateless(durumsuz) ve Stateful(durumlu) widgetlardır.

Stateless (Durumsuz) Widget

Stateless widgetlar bir kez oluşturduktan sonra içeriği ve durumu güncellenemeyen widgetlar olarak çalışır, yani değişkenlerde, simgelerde, düğmelerde yapılacak herhangi bir değişiklik veya veri alımı uygulamanın durumunu değiştiremez.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('StatelessWidget'),
        ),
        body: Center(
          child: Text(
            'Stateless (Durumsuz) Widget',
            style: TextStyle(fontSize: 30, fontWeight: FontWeight.bold),
          ),
        ),
      ),
    );
  }
}

Stateful (Durumsal) Widget

Stateful widgetlar Stateless widgetların tam tersidir. Eğer, kullanacağımız ekranda widgetlarda değişiklik olacaksa bunu Stateful widget kullanarak oluştururuz. Örnek olarak, bir butona tıkladığınızda uygulamanın arka plan rengini değiştirmek istiyorsanız, bu durumda Stateful widget’dan yararlanabilirsiniz.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  @override
  _MyState createState() => _MyState();
}

class _MyState extends State<MyApp> {
  Color _containerColor = Colors.red;

  void changeColor() {
    setState(() {
      if (_containerColor == Colors.red) {
        _containerColor = Colors.white;
        return;
      }
      _containerColor = Colors.red;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
      body: Container(decoration: BoxDecoration(color: _containerColor)),
      floatingActionButton: FloatingActionButton(
        onPressed: changeColor,
        child: Text('change'),
      ),
    ));
  }
}

Stateless Widget ve Stateful Widget Arasındaki Farklar

Bu yazımda, sizlere Stateless ve Stateful Widget kavramlarını açıklamaya çalıştım, umarım faydalı olmuştur.