Pardus ETAP Rehberi: Flutter Stateful Widget Yapısı

Pardus ETAP (Etkileşimli Tahta Arayüzü Projesi) üzerinde Flutter geliştirme yapmak, yerli işletim sistemimiz üzerinde modern uygulamalar inşa etmek adına harika bir adım.

Stateful Widget, Flutter'ın kalbidir; uygulamanın "yaşayan", değişen ve kullanıcıyla etkileşime giren kısmını temsil eder. 

---

1. Stateful Widget Nedir?

Stateless Widget'ların aksine, Stateful Widget kendi iç durumunu (state) tutabilen ve bu durum değiştiğinde kendisini yeniden çizebilen (re-build) yapılardır.

• Stateless: Bir kez çizilir ve değişmez (Örn: Bir logo veya sabit metin).

• Stateful: Kullanıcı bir butona bastığında, veri geldiğinde veya zaman geçtiğinde ekranı günceller (Örn: Sayaç, form alanları, anahtarlar).

Stateful Widget, ekranda zamanla değişebilen bileşenler için kullanılır.

📌 Eğer ekrandaki veri:

• bir butona basınca değişiyorsa

• sayaç artıyorsa

• seçim yapılıyorsa

• giriş alanı güncelleniyorsa

➡️ Stateful Widget kullanılır.

---

2. Stateful Widget Yapısı

Pardus ETAP üzerinde VS Code veya Android Studio kullanırken, stful kısayolunu kullandığında Flutter sana iki farklı sınıf oluşturur:

1. Widget Sınıfı: Widget'ın kendisini tanımlar.

2. State Sınıfı: Değişkenlerin tutulduğu ve mantıksal işlemlerin yapıldığı asıl yerdir.

Kod Taslağı:

Dart:

class TahitahizWidget extends StatefulWidget {
  const TahitahizWidget({super.key});

  @override
  State<TahitahizWidget> createState() => _TahitahizWidgetState();
}

class _TahitahizWidgetState extends State<TahitahizWidget> {
  int _sayac = 0; // Değişkenimiz (State)

  void _artir() {
    setState(() {
      _sayac++; // Ekranın güncellenmesini sağlayan kritik fonksiyon
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text("Sayac: $_sayac"),
        ElevatedButton(onPressed: _artir, child: const Text("Artır")),
      ],
    );
  }
}

---

3. En Önemli Metot: setState()

Stateful Widget'ın sihirli değneği setState() fonksiyonudur. Bu fonksiyonu çağırdığında Flutter'a şunu demiş olursun: "Hey, bir şeyler değişti! Lütfen build metodunu tekrar çalıştır ve ekranı yeni veriye göre güncelle."

Not: setState() içinde olmayan bir değişken değişikliği bellekte gerçekleşir ancak kullanıcı bunu ekranda göremez.

---

4. Pardus ETAP İçin İpuçları

Pardus ETAP, dokunmatik ekran odaklı olduğu için geliştirdiğin Stateful yapılarında şunlara dikkat etmelisin:

• Büyük Dokunma Alanları: InkWell veya GestureDetector kullanarak dokunmatik etkileşimleri yönetirken geniş alanlar tanımlayın.

• Performans: ETAP donanımlarında akıcı bir deneyim için gereksiz setState() çağrılarından kaçının. Sadece değişen widget'ı sarmalayan küçük Stateful Widget'lar kullanmak performansı artırır.

• Linux Uyumluluğu: Pardus bir Linux dağıtımı olduğu için yazdığın kodları test ederken terminale flutter run -d linux yazarak doğrudan masaüstünde test edebilirsin.

---

5. Uygulama: Bir Akıllı Tahta Not Sayacı

Basit bir senaryo düşünelim: Öğretmen tahtada bir soru çözüyor ve doğru cevap veren her öğrenci için puanı artırıyor.

1. puan değişkeni oluşturulur.

2. ElevatedButton ile bir artırma fonksiyonu bağlanır.

3. setState() ile ekrandaki puan güncellenir.

---

🔍 Stateless vs Stateful (Kısa Karşılaştırma)

Özellik	Stateless Widget	Stateful Widget
Veri değişimi	❌ Yok	✅ Var
Ekran yenileme	❌	✅
Kullanım	Sabit ekranlar	Etkileşimli ekranlar

---

Stateful Widget Yapısı

Bir Stateful Widget iki sınıftan oluşur:

1️⃣ Widget sınıfı
2️⃣ State sınıfı (asıl mantık burada)

class Sayac extends StatefulWidget {
  @override
  _SayacState createState() => _SayacState();
}

class _SayacState extends State<Sayac> {
  int sayi = 0;

  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

📌 _SayacState sınıfı ekranın hafızasıdır (state).

---

🔄 setState() Mantığı

State değiştiğinde Flutter’a "ekranı yeniden çiz" dememiz gerekir.

Bunu setState() yapar.

setState(() {
  sayi++;
});

❗ setState olmadan değişiklik ekrana yansımaz.

---

Örnek: Sayaç Uygulaması

🎓 Senaryo

Öğrenci butona bastıkça sayı artsın.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: SayacEkrani(),
    );
  }
}

class SayacEkrani extends StatefulWidget {
  @override
  _SayacEkraniState createState() => _SayacEkraniState();
}

class _SayacEkraniState extends State<SayacEkrani> {
  int sayac = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("ETAP Flutter Sayaç")),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              "Sayaç: $sayac",
              style: TextStyle(fontSize: 32),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                setState(() {
                  sayac++;
                });
              },
              child: Text("Artır"),
            )
          ],
        ),
      ),
    );
  }
}

---

🖥️ ETAP ve Etkileşimli Tahta İçin İpuçları

✔ Büyük font kullan
✔ Butonları geniş yap
✔ Tek ekranda az bileşen kullan
✔ Dokunmatik alanları büyük tut

style: TextStyle(fontSize: 36)

---

🧠 Öğrenciler İçin Kavrama Özeti

🧠 State = Hafıza
🔁 setState = Ekranı Yenile
🎯 Stateful = Etkileşim

---

🧪 Sınıf İçi Mini Lab Çalışması

📌 Görevler:
1️⃣ Sayaç azaltma butonu ekle
2️⃣ Sıfırla butonu ekle
3️⃣ Sayı çiftse yeşil, tekse kırmızı göster

---