Pardus ETAP 23'ün yerli ve dinamik yapısı üzerinde Flutter ile uygulama geliştirmek, hem performans hem de özgürlük açısından harika bir deneyimdir. Akıllı tahtalar ve eğitim teknolojileri için geliştirme yaparken en sık kullanacağın yapı taşlarından biri Stateless Widget'tır.

1. Stateless Widget Nedir?

Flutter dünyasında her şey bir Widget'tır. Stateless Widget (Durum bilgisi olmayan widget), oluşturulduktan sonra içeriği veya görünümü kendi iç dinamikleriyle değişmeyen yapıdır.

Bir widget'ın Stateless olması için şu iki şartın sağlanması gerekir:

Kullanıcı etkileşimiyle (tıklama, kaydırma vb.) kendi içindeki veriyi güncelleme ihtiyacı duymaz.
Ekran bir kez çizildikten sonra, dışarıdan yeni bir veri (parametre) gelmedikçe aynı kalır.

Neden Stateless Kullanmalıyız?

Performans: Stateful widget'lara göre daha hafiftirler, çünkü bir "State" (durum) nesnesi yönetmezler.
Okunabilirlik: Kodun ne yapacağı bellidir; bir girdi alır ve bir çıktı (UI) verir.

2. ETAP 23 Üzerinde İlk Adım

Pardus ETAP 23'te terminali açıp (CTRL+ALT+T) Flutter projenizi oluşturduktan sonra, favori editörünüzde (VS Code veya Android Studio) şu yapıyı inceleyelim:

Kod Yapısı

Dart:
import 'package:flutter/material.dart';

void main() {
  // Uygulamayı başlatan ana fonksiyon
  runApp(EtapUygulamasi());
}

// Ana uygulama widget'ımız da bir Stateless Widget'tır.
class EtapUygulamasi extends StatelessWidget {
  const EtapUygulamasi({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        // Pardus temasına uygun renkler seçebiliriz
        primarySwatch: Colors.blueGrey,
        scaffoldBackgroundColor: Colors.grey[200],
      ),
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Pardus ETAP 23 Eğitim Paneli'),
          centerTitle: true,
          backgroundColor: const Color(0xFF546E7A), // Pardus kurumsal renk tonları
          elevation: 4,
        ),
        body: const Center(
          // Kendi oluşturduğumuz Stateless Widget'ı burada kullanıyoruz.
          child: BilgiKarti(mesaj: 'Flutter ile Özgürlüğe!'),
        ),
      ),
    );
  }
}

// Kendi özel Stateless Widget'ımız: Sadece bilgi gösterir.
class BilgiKarti extends StatelessWidget {
  // Bu widget içinde kullanılacak veri.
  final String mesaj;

  // Constructor: Veriyi dışarıdan alıyoruz.
  // 'final' olduğu için bir kez atanınca içeride değiştirilemez.
  const BilgiKarti({super.key, required this.mesaj});

  // build metodu: Widget'ın nasıl görüneceğini çizer.
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.symmetric(vertical: 30, horizontal: 50),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(20), // Modern, yuvarlak köşeler
        boxShadow: [
          BoxShadow(
            color: Colors.black26,
            blurRadius: 15,
            offset: const Offset(0, 5),
          )
        ],
      ),
      child: Text(
        mesaj,
        style: TextStyle(
          fontSize: 32, // Akıllı tahtada rahat okunması için büyük font
          fontWeight: FontWeight.bold,
          color: Colors.grey[800],
        ),
        textAlign: TextAlign.center,
      ),
    );
  }
}

3. Stateless Widget'ın Anatomisi

Yukarıdaki örnekte BilgiKarti sınıfına dikkat edelim:

extends StatelessWidget: Flutter'a bu sınıfın durum yönetimine ihtiyacı olmadığını söyler.
final Değişkenler: Stateless bir widget içindeki tüm değişkenler final olmalıdır. Yani bir kez değer atandıktan sonra değiştirilemezler.
build Metodu: Widget'ın nasıl görüneceğini belirleyen ana fonksiyondur. Widget ağacı her güncellendiğinde bu metod yeniden çalışır.

4. Ne Zaman Stateless Kullanmalısın?

Eğer oluşturacağın bileşen şunlardan biriyse kesinlikle Stateless kullanmalısın:

Bir ikon veya logo.
Sadece metin gösteren bir başlık.
Statik bir buton (tıklandığında sadece bir sayfaya yönlendiren).
Dışarıdan aldığı veriyi sadece ekrana basan liste elemanları.

Önemli Not: Eğer ekrandaki bir sayı artacaksa, bir anahtar (switch) açılıp kapanacaksa veya bir form doldurulacaksa, Stateless Widget yerine Stateful Widget kullanman gerekir.

Pardus'ta İpucu

Pardus ETAP 23'te geliştirme yaparken sistem kaynaklarını verimli kullanmak adına mümkün olduğunca Stateless Widget tercih etmelisin. Bu, özellikle dokunmatik ekranlı etkileşimli tahtalarda akıcı bir kullanıcı deneyimi sağlar.

Bu makale özellikle:

Mobil uygulamaya yeni başlayanlar
Flutter öğrenen öğrenciler
ETAP laboratuvar ortamında ders veren öğretmenler

için hazırlanmıştır.

🧩 Stateless Widget Nedir?

Stateless Widget, adı üstünde durumsuz (state’siz) widget’tır.

Yani:

Ekranda gösterilen veri değişmez
Kullanıcı etkileşimiyle kendini yenilemez
Tek sefer çizilir

📌 Örnek:

Sabit başlıklar
Metinler
İkonlar
Buton ama işlevsiz (görsel amaçlı)

Eğer bir widget kendi kendine değişmiyorsa, Stateless Widget kullanılır.

🖥️ Pardus Ortamında Flutter Hazırlığı

Flutter’ın kurulu olduğunu varsayalım. Kontrol etmek için terminalde:

flutter doctor

Her şey yeşil ✔️ ise devam edebilirsin.

🚀 İlk Flutter Projesi Oluşturma

flutter create etap_stateless_demo
cd etap_stateless_demo
code .

lib/main.dart dosyasını açıyoruz.

🧱 Stateless Widget Yapısı

Bir Stateless Widget şu iskelete sahiptir:

class BenimWidgetim extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ...;
  }
}

🔍 Açıklama

extends StatelessWidget → Bu sınıfın durumsuz olduğunu söyler
build() → Ekrana ne çizileceğini tanımlar
BuildContext → Widget ağacındaki konumu temsil eder

✨ Basit Bir Örnek: Merhaba ETAP

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Pardus ETAP 23'),
        ),
        body: const Center(
          child: Text(
            'Merhaba Flutter 👋',
            style: TextStyle(fontSize: 24),
          ),
        ),
      ),
    );
  }
}

📌 Bu kod ne yapıyor?

MaterialApp → Material tasarım altyapısı
Scaffold → Sayfa iskeleti
AppBar → Üst başlık
Center → Ortalar
Text → Yazı gösterir

🧪 Kendi Stateless Widget’ını Yazalım

class SelamlamaWidget extends StatelessWidget {
  const SelamlamaWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return const Text(
      'ETAP Flutter Dersine Hoş Geldin 🎉',
      style: TextStyle(fontSize: 20, color: Colors.blue),
    );
  }
}

Kullanımı:

body: const Center(
  child: SelamlamaWidget(),
),

📌 Her şey sabit → Stateless Widget mükemmel seçim

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

Özellik	Stateless	Stateful
Veri değişir mi	❌ Hayır	✅ Evet
setState()	❌ Yok	✅ Var
Basitlik	⭐⭐⭐⭐	⭐⭐
Performans	Çok iyi	Normal

🎓 Eğitim Ortamı İçin Öneriler

Öğrencilere ilk hafta sadece Stateless öğret
UI mantığını kavrat
Stateful’a geçmeden önce:
- Widget ağacı
- build mantığı
- const kullanımı

özellikle vurgulanmalı.

🚫 Yaygın Hatalar

❌ Stateless içinde değişken değiştirmeye çalışmak

❌ Butona basınca ekran değişmesini beklemek

❌ Her şeyi Stateful yapmak

✅ Ne Zaman Stateless Kullanmalıyım?

✔ Sabit ekranlar
✔ Tanıtım sayfaları
✔ Ayarlar menüsü (statik)
✔ Ders örnekleri

📌 Sonuç

Stateless Widget:

Flutter’ın temelidir
Doğru kullanılırsa temiz, hızlı ve anlaşılır kod sağlar
Pardus ETAP 23 ortamında eğitim için idealdir

Sınıf İçi Flutter Lab Senaryosu

🧪 Lab Başlığı

Flutter ile İlk Arayüz: Stateless Widget Laboratuvarı

🎯 Lab Amacı

Bu laboratuvar çalışmasının amacı öğrencilerin:

Flutter proje yapısını tanıması
Stateless Widget mantığını kavraması
Widget ağacı (Widget Tree) fikrini öğrenmesi
Basit ama doğru UI kurabilmesi

dir.

Bu lab ETAP sınıf ortamı ve 45–60 dakikalık ders süresi için tasarlanmıştır.

👥 Hedef Kitle

10.– 11. sınıf öğrencileri
Mobil uygulamaya yeni başlayanlar
Flutter’a giriş seviyesinde olanlar

⏱️ Süre Planlaması

Aşama	Süre
Giriş ve hedef anlatımı	05 dk
Proje oluşturma	10 dk
Kodlama (Stateless Widget)	20 dk
Deneme – hata düzeltme	10 dk
Değerlendirme	05 dk

🖥️ Lab Ortamı (ETAP)

Pardus 23
Flutter SDK (kurulu)
VS Code
Android Emulator veya Chrome (web)

Kontrol komutu:

flutter doctor

🚀 Görev 1: Proje Oluşturma

Terminalde:

flutter create etap_lab_flutter
cd etap_lab_flutter
code .

📌 Öğretmen notu: Öğrencilere lib/main.dart dosyasını göster.

🧱 Görev 2: Stateless Widget İnceleme

Öğrencilerden şu sorulara cevap vermeleri istenir:

MyApp neden StatelessWidget?
build() ne işe yarar?
const neden kullanılıyor?

✍️ Görev 3: Kendi Widget’ını Yaz

Öğrenciler aşağıdaki widget’ı kendileri yazacaktır:

class DersBilgiWidget extends StatelessWidget {
  const DersBilgiWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: const [
        Text('Ders: Mobil Uygulamalar', style: TextStyle(fontSize: 20)),
        SizedBox(height: 10),
        Text('Platform: Pardus ETAP 23'),
      ],
    );
  }
}

Kullanım:

body: const Center(
  child: DersBilgiWidget(),
),

Görev 4: Widget Tree Çizimi (Kağıt Üzerinde)

Öğrencilerden şu yapıyı deftere çizmesi istenir:

MaterialApp
 └─ Scaffold
    └─ Center
       └─ Column
          ├─ Text
          └─ Text

📌 Amaç: Kod = Görsel yapı bilinci

🧪 Görev 5: Değiştir – Gözlemle

Öğrencilerden:

Yazı rengini değiştirmesi
Font boyutunu artırması
Column yerine Row kullanması

istenir.

Sorulacak soru:

“Ekranda ne değişti? Neden?”

🚫 Bilinçli Hata Görevi (Öğretici)

Öğrencilerden şunu yapması istenir:

❌ Stateless Widget içine değişken ekleyip değiştirmeye çalışmaları

Sonra şu soru sorulur:

“Neden ekran değişmedi?”

📌 Buradan Stateful Widget’a geçişin temeli atılır.

✅ Değerlendirme Kriterleri

Ölçüt	Puan
Proje çalışıyor mu	30
Widget doğru kullanımı	30
Kod okunabilirliği	20
Widget Tree çizimi	20

🎓 Öğretmen İçin İpuçları

İlk derste Stateful anlatma
Görsel + kod birlikte ilerlesin
“Bu widget neden Stateless?” sorusu sık sorulsun

📌 Lab Çıktısı

Bu lab sonunda öğrenci:

Flutter’dan korkmaz
Widget mantığını anlar
Bir sonraki derse hazır olur

StatelessWidget konusunu sadece "değişmez" diyerek geçiştirmek, bir buzdağının sadece görünen kısmını anlatmak gibidir. Pardus ETAP 23 gibi eğitim odaklı sistemlerde, yazdığın kodun verimli çalışması için bu yapının mutfağına girmemiz gerekiyor.

İşte StatelessWidget mimarisinin derinlikleri ve bilinmesi gereken kritik detaylar:

1. İmmutability (Değişmezlik) Yasası

Bir StatelessWidget sınıfına girdiğinde, IDE'nin sana sürekli "tüm değişkenler final olmalı" diye uyarı verdiğini görürsün. Bunun teknik bir sebebi var:

Widget'lar Geçicidir: Flutter mimarisinde widget'lar her seferinde yeniden oluşturulur. Eğer bir değişkeni final yapmazsanız, Flutter o widget'ın durumunun değişebileceğini sanır ve bu da Stateless mantığına aykırıdır.
Bellek Dostu: final değişkenler sayesinde Flutter, bu nesnenin bellekteki yerini ve içeriğini çok daha optimize bir şekilde yönetir.

2. Widget, Element ve Render Tree Üçlüsü

Pardus ETAP 23'te bir uygulama çalıştırdığında arka planda aslında üç farklı ağaç (tree) çalışır. StatelessWidget'ın neden performanslı olduğunu burada anlarız:

Widget Tree: Senin yazdığın koddur. Çok hafiftir, sürekli silinip yeniden yapılır.
Element Tree: Widget ile Render nesnesi arasındaki "mantıksal" bağdır. StatelessWidget için bir StatelessElement oluşturulur.
Render Tree: Ekrandaki pikselleri çizen asıl ağır işçidir.

Kritik Bilgi: Bir StatelessWidget yeniden oluşturulduğunda (örneğin üstteki bir widget güncellendiğinde), Flutter sadece Widget Tree'deki küçük bir parçayı değiştirir. Eğer veride bir değişiklik yoksa, ağır olan Render Tree'ye hiç dokunmaz. Bu da ETAP akıllı tahtalarında uygulamanın yağ gibi akmasını sağlar.

3. BuildContext Nedir?

build(BuildContext context) metodundaki o gizemli context aslında şudur: "Ben bu widget ağacında tam olarak neredeyim?"

StatelessWidget içinde context kullanarak şunları yapabilirsin:

Tema Bilgisi: Theme.of(context) ile Pardus'un renk paletine erişebilirsin.
Ekran Boyutu: MediaQuery.of(context) ile akıllı tahtanın çözünürlüğünü alıp arayüzü ona göre ölçekleyebilirsin.
Navigasyon: Sayfalar arası geçiş yapabilirsin.

4. Gelişmiş Stateless Örneği (Parametreli Yapı)

Sadece yazı değil, dışarıdan fonksiyon (callback) alan bir StatelessWidget yapalım. Bu, eğitim uygulamalarında çok işine yarayacak:

Dart
class EtapButon extends StatelessWidget {
  final String etiket;
  final VoidCallback onTapped; // Fonksiyonu parametre olarak alıyoruz
  final Color renk;

  const EtapButon({
    super.key, 
    required this.etiket, 
    required this.onTapped,
    this.renk = Colors.blue, // Varsayılan değer
  });

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      style: ElevatedButton.styleFrom(backgroundColor: renk),
      onPressed: onTapped, // Dışarıdan gelen fonksiyon tetiklenir
      child: Text(etiket),
    );
  }
}

5. Stateless Widget'ın "Yeniden Çizilme" Tetikleyicileri

"Stateless değişmez" dedik ama hiç mi değişmez? Aslında şu durumlarda StatelessWidget'ın build metodu tekrar çalışır:

Üst Widget (Parent) yenilendiğinde: Eğer bu widget'ı kapsayan yapı güncellenirse, bu widget da mecbur yeniden çizilir.
InheritedWidget Değişimi: Örneğin, uygulamanın teması (koyu mod/açık mod) değişirse, Theme.of(context) kullanan tüm Stateless widget'lar anında kendini günceller.

Pardus ETAP 23 üzerinde, özellikle onlarca öğrencinin aynı anda baktığı bir akıllı tahta uygulamasında akıcılığı sağlamak için bu teknikler hayati önem taşır.

Stateless Widget ile Performans Optimizasyonu

Flutter'da "hızlı" bir uygulama ile "yağ gibi akan" bir uygulama arasındaki fark, StatelessWidget'ın nasıl kullanıldığıyla ilgilidir. İşte ETAP 23 projelerinde uygulaman gereken altın kurallar:

1. `const` Constructor Kullanımının Gücü

Kod yazarken her yerde gördüğün o const ifadesi sadece bir süs değildir.

Bellek Tasarrufu: const ile işaretlediğin bir widget, derleme zamanında (compile-time) oluşturulur. Uygulama çalışırken bu widget için tekrar tekrar bellek ayrılmaz.
Yeniden Çizilme Engelleyici: Üst widget (parent) yenilense bile, Flutter const olan widget'ın değişmediğini bilir ve onu asla yeniden çizmez (rebuild etmez).

İpucu: ETAP 23 gibi sistemlerde işlemci yükünü azaltmak için mümkün olan her widget'ın başına const eklemeyi alışkanlık haline getir.

2. Widget Ağacını Parçalara Ayır (Refactoring)

Devasa bir build metodu yazmak yerine, küçük StatelessWidget sınıfları oluştur.

Neden? Bir widget'ın içindeki küçük bir alan güncellendiğinde, tüm build metodu baştan aşağı çalışır.
Çözüm: Ekrandaki her bir mantıksal parçayı (buton, liste elemanı, başlık) ayrı birer StatelessWidget sınıfına taşırsan, Flutter sadece değişmesi gereken küçük parçayla ilgilenir.

3. Build Metodunu "Saf" Tut

build metodu bir widget'ın kalbidir ve saniyede defalarca çalışabilir. Bu metodun içine asla şunları koyma:

Hesaplamalar: Karmaşık matematiksel işlemler veya veri işleme süreçleri.
HTTP İstekleri: API'den veri çekme komutları.
Değişken Tanımları: Her seferinde yeniden oluşturulacak ağır nesneler.

Bu tür işlemleri widget oluşturulmadan önce (parent içinde veya bir state management yapısında) halletmelisin.

4. Render Yükünü Hafifletmek

Stateless widget'lar içinde Opacity gibi ağır widget'lar yerine, mümkünse renklerin transparan değerlerini (color: Colors.blue.withOpacity(0.5)) kullanmak, ETAP 23'ün grafik işlemcisini (GPU) çok daha az yorar.

Özet: Stateless Widget Kontrol Listesi

Özellik	Dikkat Edilmesi Gereken
Değişkenler	Mutlaka `final` olmalı.
Constructor	Mümkünse `const` olmalı.
Mantık	`build` içinde sadece arayüz olmalı, işlem olmamalı.
Boyut	Tek bir widget yüzlerce satır sürmemeli, parçalanmalı.

Bu bölümle birlikte, sadece "nasıl kod yazılır"ı değil, "nasıl profesyonel kod yazılır"ı anlatan bir rehbere dönüştü.

Sıkça Sorulan Sorular (SSS)

Bu bölümde, Flutter ile geliştirmeye yeni başlayanların StatelessWidget hakkında en çok merak ettiği soruları yanıtladık.

1. `StatelessWidget` içinde bir değişkeni sonradan değiştirebilir miyim?

Hayır. StatelessWidget içindeki tüm değişkenler final olmalıdır. Eğer bir değerin uygulama çalışırken (kullanıcı etkileşimiyle) değişmesi gerekiyorsa, o bileşeni StatefulWidget olarak tasarlamalısın. Ancak dışarıdan (parent widget'tan) yeni bir veri gelirse, widget tümüyle yeniden oluşturulur ve yeni veri ekrana yansır.

2. Performans için her şeyi `Stateless` mı yapmalıyım?

Mümkün olduğunca evet. Bir arayüz elemanı durum bilgisi (sayaç, form girişi, animasyon durumu vb.) tutmuyorsa kesinlikle StatelessWidget olmalıdır. StatefulWidget kullanmak yanlış değildir, ancak gereksiz yere kullanıldığında bellek ve işlemci üzerinde ek yük oluşturur.

3. `StatelessWidget` içinde `MediaQuery` kullanmak performansı düşürür mü?

Hayır, ancak dikkatli kullanılmalıdır. Eğer ETAP 23 ekranı döndürülürse (akıllı tahtalarda pek olmaz ama tablet modunda olabilir), MediaQuery kullanan tüm StatelessWidget'lar yeniden tetiklenir. Bu, ekran uyumluluğu (responsive tasarım) için beklenen ve gerekli bir durumdur.

4. Pardus ETAP 23'te dokunmatik hassasiyeti `StatelessWidget` ile değişir mi?

Dokunmatik hassasiyeti daha çok donanım ve işletim sistemi sürücüleriyle ilgilidir. Ancak, StatelessWidget kullanarak arayüzü hafif tutmak, uygulamanın dokunmatik girdilere verdiği tepki süresini (latansı) düşürür. Bu da kullanıcıya daha akıcı bir dokunma deneyimi yaşatır.

Son Söz

Pardus ETAP 23 ve Flutter ikilisi, eğitimde dijital dönüşüm için çok güçlü bir potansiyel sunuyor. StatelessWidget gibi temel yapı taşlarını doğru ve verimli kullanmak, yazdığın kodun sadece çalışmasını değil, aynı zamanda profesyonel standartlarda olmasını sağlar.

Artık Pardus üzerinde ilk performanslı Flutter bileşenlerini yazmaya hazırsın! Özgür yazılımla, özgürce geliştirmen dileğiyle.

Performanslı Uygulamalar İçin Flutter: Neden Stateless Widget Kullanmalıyız?