Uygulama: Pardus Logosunu Göster

Bu örnek, öğrencilere veya izleyicilere State Management (Durum Yönetimi) ve Asset Management (Dosya Yönetimi) konularını öğretmek için mükemmeldir.

İşte önceki projenin üzerine inşa edeceğimiz "Butona Basınca Logoyu Göster/Gizle" eğitimi:

---

Bu bölümde, projemize dışarıdan bir resim dosyası eklemeyi ve bir butona tıklayarak ekranın durumunu değiştirmeyi (setState) öğreneceğiz.

1. Hazırlık: Logoyu Projeye Ekleme

Flutter'da resim kullanmak için önce bir klasör oluşturmalı ve resmi oraya koymalıyız.

1. Proje klasörünüzün (ilk_pardus_uygulamam) içinde, lib klasörüyle aynı seviyede (ana dizinde) assets adında yeni bir klasör oluşturun.

2. İnternetten bir Pardus logosu indirin (veya herhangi bir resim) ve adını pardus_logo.png yaparak bu assets klasörünün içine atın.

Dosya yapısı şöyle görünmeli:

Plaintext:

ilk_pardus_uygulamam/
├── assets/
│   └── pardus_logo.png
├── lib/
│   └── main.dart
├── pubspec.yaml
...

2. Tanımlama: pubspec.yaml Ayarı

Flutter'a "Benim bir resim dosyam var, onu tanı" dememiz gerekiyor.

1. VS Code'da pubspec.yaml dosyasını açın.

2. Aşağılara inerek flutter: başlığını bulun.

3. assets: kısmını aşağıdaki gibi düzenleyin (Girintilere/boşluklara çok dikkat edin, YAML dosyaları bu konuda hassastır):

YAML:

flutter:
  uses-material-design: true

  # Assets kısmını yorum satırından çıkarın veya ekleyin:
  assets:
    - assets/pardus_logo.png

4. Kaydettikten sonra terminalde proje klasöründeyken şu komutu çalıştırarak değişikliği onaylayın (VS Code bunu otomatik de yapabilir):

   Bash:

   flutter pub get
   

3. Kodlama: main.dart Dosyası

Şimdi lib/main.dart dosyasını açalım. Mevcut kodların tamamını silip, temiz ve anlaşılır şu kodları yapıştırabilirsiniz.

Kodun içinde nelerin değiştiğini yorum satırlarıyla belirttim:

Dart:

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Pardus Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepOrange),
        useMaterial3: true,
      ),
      home: const AnaSayfa(),
    );
  }
}

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

  @override
  State<AnaSayfa> createState() => _AnaSayfaState();
}

class _AnaSayfaState extends State<AnaSayfa> {
  // 1. ADIM: Logonun görünüp görünmeyeceğini tutan bir değişken (state)
  bool _logoGorunurMu = false;

  // 2. ADIM: Butona basılınca bu fonksiyon çalışacak
  void _durumuDegistir() {
    setState(() {
      // Değeri tersine çevirir (True ise False, False ise True yapar)
      _logoGorunurMu = !_logoGorunurMu;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: const Text("Pardus Flutter Eğitimi"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            // 3. ADIM: Koşula bağlı resim gösterimi
            if (_logoGorunurMu)
              Container(
                margin: const EdgeInsets.only(bottom: 20),
                width: 200, // Resim genişliği
                child: Image.asset('assets/pardus_logo.png'),
              )
            else
              const Text(
                "Logoyu görmek için butona basın 👇",
                style: TextStyle(fontSize: 18),
              ),

            const SizedBox(height: 20), // Biraz boşluk
            
            // 4. ADIM: Tıklanabilir Buton
            ElevatedButton.icon(
              onPressed: _durumuDegistir, 
              icon: Icon(_logoGorunurMu ? Icons.visibility_off : Icons.visibility),
              label: Text(_logoGorunurMu ? "Logoyu Gizle" : "Logoyu Göster"),
              style: ElevatedButton.styleFrom(
                padding: const EdgeInsets.symmetric(horizontal: 30, vertical: 15),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

4. Çalıştırma ve Test

Terminalden veya VS Code üzerinden uygulamayı başlatın:

Bash:

flutter run -d linux

Sonuç:

• Uygulama açıldığında ekranda sadece bir yazı ve buton olacak.

• Butona bastığınızda Pardus Logosu belirecek ve butonun üzerindeki yazı "Logoyu Gizle" olarak değişecek.

• Tekrar bastığınızda logo kaybolacak.

---

Eğitimde Vurgulanacak Noktalar

1. setState(() { ... }): Bu sihirli fonksiyon, Flutter'a "Ekrandaki veriler değişti, görüntüyü tekrar çiz" emrini verir. Bu olmadan değişken değişse bile ekrandaki görüntü değişmez.

2. assets Klasörü: Linux'ta dosya yolları önemlidir. Resimlerin derlenmiş uygulamanın içine gömülmesi için pubspec.yaml kaydı şarttır.

3. Koşullu Render (if): Dart dilinde arayüz kodlarının içinde (UI) doğrudan if kullanarak widget'ları ekleyip çıkarabiliriz.

Kaynak Kod : https://github.com/nuritiras/ilk_pardus_uygulamam