Pardus Üzerinde İlk Flutter Uygulaması

Kurulumları tamamladık, şimdi en zevkli kısma, yani kodlamaya geçiyoruz. Pardus'un kendi masaüstü ortamında (Linux Desktop) çalışacak ilk uygulamamızı yapalım.

"Pardus Üzerinde İlk Flutter Uygulaması: Merhaba Pardus" başlığıyla kullanabileceğin bir taslaktır.

Bu bölümde terminal komutlarıyla proje oluşturmayı ve VS Code kullanarak bu projeyi nasıl yöneteceğimizi öğreneceğiz.

1. Adım: Projeyi Oluşturma

Pardus terminalini açalım. Projelerimizi düzenli tutmak için Development klasörünü kullanıyorduk.

Bash:
cd ~/Development
flutter create ilk_uygulamam

  • Not: flutter create komutu, bizim için gerekli tüm dosya yapısını (Android, Linux, Web vb.) otomatik hazırlar.

2. Adım: Projeyi VS Code ile Açma

Oluşturduğumuz klasörün içine girip, tek bir komutla VS Code'u başlatabiliriz:

Bash:
cd ilk_uygulamam
code .

(Buradaki . işareti "içinde bulunduğum klasörü aç" demektir.)

VS Code açıldığında, güvenlik uyarısı gelirse "Yes, I trust the authors" diyerek onaylayın.

3. Adım: Dosya Yapısını Tanıyalım

Sol taraftaki dosya gezgininde (Explorer) şu yapıyı göreceksiniz. Öğrencilerine veya izleyicilerine şunları vurgulayabilirsin:

  • lib/main.dart: Bizim çalışma alanımız burası. Bütün kodlarımızı buraya yazacağız.

  • linux/: Pardus masaüstü için gerekli ayar dosyaları burada.

  • android/: Android özel ayarları burada.

  • pubspec.yaml: Projenin kimliği ve kütüphane yönetim dosyası.

4. Adım: Uygulamayı Pardus Masaüstünde Çalıştırma

Emülatör açıp bilgisayarı yormadan önce, Pardus'un gücünü kullanalım.

  1. VS Code penceresinin sağ alt köşesinde "Linux (linux-x64)" yazdığından emin olun. (Eğer Android yazıyorsa üzerine tıklayıp Linux'u seçin).

  2. Üst menüden Run > Start Debugging diyebilir veya F5 tuşuna basabilirsiniz.

Sonuç: Birkaç saniye içinde Pardus masaüstünde mavi temalı, sayaç (counter) içeren bir pencere açılacak. Bu, Flutter'ın varsayılan "Merhaba Dünya"sıdır.

5. Adım: Kod Müdahalesi ve "Hot Reload" (Sıcak Yenileme)

Flutter'ın en sevilen özelliğini deneyelim: Uygulamayı kapatmadan kodu değiştirip anında sonucu görmek!

  1. VS Code'da lib/main.dart dosyasını açın.

  2. Aşağılara inin (yaklaşık 95-100. satırlar) ve şu kod parçasını bulun:

    Dart:
    const Text(
  'You have pushed the button this many times:',
),

  3. Bu İngilizce metni şöyle değiştirelim:

    Dart:
    const Text(
  'Pardus üzerinde butona şu kadar bastın:',
  style: TextStyle(fontSize: 18, color: Colors.red), // Biraz da stil ekleyelim
),

  4. Dosyayı kaydedin (CTRL + S).

  5. Sihre Bakın: Açık olan uygulama penceresine bakın. Uygulamayı kapatıp açmadığınız halde yazının ve rengin anında değiştiğini göreceksiniz. Buna Hot Reload denir.

6. Adım: Temayı Değiştirelim (Bonus)

Öğrencilerin ilgisini çekmek için uygulamanın ana rengini değiştirelim.

  1. main.dart dosyasının en üst kısımlarında theme: bölümünü bulun.

  2. colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple), satırını bulun.

  3. Colors.deepPurple yerine Colors.teal veya Colors.orange yazın.

  4. Kaydedin (CTRL + S) ve penceredeki renklerin anında değiştiğini gözlemleyin.

  • Vurgu: Pardus üzerinde "Linux Desktop" olarak çalışmanın ne kadar hızlı olduğunu vurgulayın. Emülatör (sanal telefon) açmak bilgisayarı yavaşlatabilir ama Linux çıktısı çok hafiftir.

  • Hata Ayıklama: Eğer uygulama çalışmazsa terminale (VS Code içindeki terminal sekmesine) bakmayı öğretin. Hatalar orada kırmızı renkle yazar.

  • Kısayollar: CTRL + S (Kaydet/Hot Reload) ve F5 (Başlat) kısayollarını sık sık hatırlatın.

    Proje Kaynak Kodları: https://github.com/nuritiras/ilk_uygulamam

Yorumlar

Yorum Gönder

Bu blogdaki popüler yayınlar

Pardus ETAP 23 İçin Flutter ile Dijital "Öğrenci Seçici" Uygulaması

Resim
Eğitim teknolojilerinin merkezinde yer alan Pardus ETAP (Etkileşimli Tahta Projesi), sınıflarda verimliliği artırmak için güçlü araçlar sunar. Bu yazıda, öğretmenlerin ders içi etkileşimi artırmak, sözlüye kalkacak öğrenciyi adil bir şekilde seçmek veya sunum sırasını belirlemek için kullanabileceği "Dijital Öğrenci Seçici" uygulamasını Flutter ile nasıl geliştireceğinizi adım adım anlatacağız. Bu uygulama şunları yapabilecek: Excel'den Liste Yükleme: e-Okul listelerini saniyeler içinde içeri aktarma. Görsel Seçim: Heyecan verici bir çark arayüzü ile seçim yapma. Ses Efektleri: Dönme ve alkış sesleri ile sınıf atmosferini canlandırma. Sonuç Ekranı: Seçilen öğrenciyi büyük bir pencerede ilan etme. Bölüm 1: Geliştirme Ortamının Hazırlanması Pardus üzerinde Flutter ile masaüstü uygulama geliştirebilmek için temel derleme araçlarına ihtiyacımız vardır. Terminali açın ve aşağıdaki komutları sırasıyla uygulayın. 1. Sistem Gereksinimleri Bash: sudo apt update sudo apt insta...
Devamı

Uygulama: Pardus Logosunu Göster

Resim
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. 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. İ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 re...
Devamı

Pardus ETAP 23 İçin Flutter ile Sanal Laboratuvar

Resim
Pardus ETAP (Etkileşimli Tahta Arayüzü Projesi), okullardaki akıllı tahtalar için tasarlanmış, Linux tabanlı (Debian) bir işletim sistemidir. Flutter'ın Linux Desktop desteği sayesinde, tek bir kod tabanıyla hem yüksek performanslı hem de dokunmatik ekranlara (akıllı tahtalara) tam uyumlu uygulamalar geliştirebilirsiniz. Eğitim teknolojilerinde etkileşim, öğrenmeyi kalıcı hale getiren en önemli unsurdur. Bu makalede, Pardus ETAP 23 yüklü etkileşimli tahtalarda çalışacak, öğrencilerin güvenle deney yapabileceği bir Sanal Laboratuvar uygulamasının Flutter ile nasıl geliştirileceğini adım adım inceleyeceğiz. 1. Neden Pardus ETAP ve Flutter? Pardus ETAP: Okullarda yaygın olarak kullanılan, güvenli ve açık kaynaklı bir işletim sistemidir. Flutter: Google'ın UI kiti, Linux masaüstü uygulamaları için "birinci sınıf" (first-class) destek sunar. Akıllı tahtaların donanımını (GPU) verimli kullanarak 60 FPS akıcı animasyonlar sağlar. 2. Geliştirme Ortamının Hazırlanması Pard...
Devamı