Ders İçeriği
1. Giriş ve Kurulum
1.1. Flutter ve Dart Nedir? Neden Flutter?
Günümüz mobil uygulama geliştirme dünyasında, farklı platformlar için (iOS ve Android gibi) ayrı ayrı kod yazma ihtiyacı, geliştiriciler için zaman ve maliyet açısından önemli bir yük oluşturmaktadır. İşte tam da bu noktada, Google tarafından geliştirilen açık kaynaklı bir UI (Kullanıcı Arayüzü) yazılım geliştirme kiti olan Flutter devreye girer. Flutter, tek bir kod tabanı kullanarak hem iOS hem de Android platformları için yüksek performanslı, görsel olarak çekici ve hızlı mobil uygulamalar geliştirmenizi sağlar.
Flutter'ın temelinde Dart programlama dili bulunur. Dart, Google tarafından geliştirilen, istemci tarafı geliştirme için optimize edilmiş, nesne yönelimli bir dildir. Hem JIT (Just-in-Time) hem de AOT (Ahead-of-Time) derleme yeteneklerine sahip olması, Dart'ı hem hızlı geliştirme süreçleri hem de yüksek performanslı uygulamalar için ideal kılar. Flutter, Dart'ın bu güçlü özelliklerini kullanarak, uygulamaların doğrudan makine koduna derlenmesini sağlar, bu da uygulamaların yerel (native) performansına yakın bir deneyim sunmasına olanak tanır.
Neden Flutter tercih edilmeli?
•Tek Kod Tabanı: iOS ve Android için ayrı ayrı kod yazma ihtiyacını ortadan kaldırır. Bu, geliştirme süresini kısaltır ve bakım maliyetlerini düşürür.
•Hızlı Geliştirme: Hot Reload (Anında Yenileme) ve Hot Restart (Anında Yeniden Başlatma) özellikleri sayesinde, kodda yapılan değişiklikler anında uygulamaya yansır. Bu, geliştirme sürecini son derece hızlandırır ve deneme-yanılma döngüsünü kısaltır.
•Çarpıcı UI: Flutter, kendi render motoruna sahiptir ve Material Design (Android) ile Cupertino (iOS) widget'larını kutudan çıkar çıkmaz sunar. Bu, platforma özgü tasarımları kolayca uygulamanızı ve özelleştirmenizi sağlar. Ayrıca, her piksel üzerinde tam kontrol sağlayarak karmaşık ve özgün kullanıcı arayüzleri oluşturmanıza olanak tanır.
•Yerel Performans: Dart'ın AOT derleme yeteneği sayesinde, Flutter uygulamaları doğrudan makine koduna derlenir. Bu, JavaScript köprüleri veya yorumlayıcılar gerektiren diğer hibrit çerçevelere kıyasla daha yüksek performans ve daha akıcı kullanıcı deneyimi sunar.
•Geniş Topluluk ve Dokümantasyon: Google'ın desteğiyle hızla büyüyen bir topluluğa ve kapsamlı, iyi düzenlenmiş bir dokümantasyona sahiptir. Bu, sorun yaşadığınızda veya yeni şeyler öğrenmek istediğinizde kolayca yardım bulabileceğiniz anlamına gelir.
•Web ve Masaüstü Desteği: Flutter sadece mobil uygulamalarla sınırlı değildir. Tek kod tabanıyla web, masaüstü (Windows, macOS, Linux) ve hatta gömülü cihazlar için de uygulama geliştirmek mümkündür. Bu, uygulamanızın erişim alanını genişletir.
Özetle, Flutter modern, verimli ve güçlü bir mobil uygulama geliştirme çerçevesidir. Hızlı geliştirme, güzel kullanıcı arayüzleri ve yerel performansa yakın deneyim sunmasıyla, günümüz geliştiricileri için cazip bir seçenektir.
1.2. Geliştirme Ortamı Kurulumu (VS Code/Android Studio, Flutter SDK, Dart SDK)
Flutter ile uygulama geliştirmeye başlamadan önce, gerekli geliştirme ortamını kurmanız gerekmektedir. Bu bölümde, Visual Studio Code (VS Code) ve Android Studio gibi popüler IDE'ler (Entegre Geliştirme Ortamı) için Flutter SDK ve Dart SDK kurulum adımlarını detaylı bir şekilde ele alacağız.
Öncelikle Sistem Gereksinimleri:
•İşletim Sistemi: Windows 7 SP1 veya sonrası (64-bit), macOS (64-bit), Linux (64-bit)
•Disk Alanı: En az 2 GB (IDE ve diğer araçlar hariç)
•Araçlar: Git (versiyon kontrol sistemi)
Kurulum Adımları:
Adım 1: Flutter SDK İndirme
Flutter SDK'yı resmi Flutter web sitesinden indirmeniz gerekmektedir. İşletim sisteminize uygun olan sürümü seçin:
İndirdiğiniz ZIP dosyasını, C: lutter (Windows) veya /Users/your_username/flutter (macOS/Linux) gibi kolayca erişebileceğiniz bir konuma çıkarın. SDK'yı Program Files gibi özel izinler gerektiren bir dizine çıkarmaktan kaçının.
Adım 2: Flutter Yolu (Path) Ayarlama
Flutter komutlarını terminalden veya komut istemcisinden çalıştırabilmek için Flutter SDK'nın bin klasörünü sistem PATH'inize eklemeniz gerekmektedir.
Windows:
1.Arama çubuğuna
ortam değişkenleri yazın ve Sistem ortam değişkenlerini düzenleyin seçeneğini açın.
2. Açılan pencerede Ortam Değişkenleri... butonuna tıklayın.
3. Sistem değişkenleri bölümünde Path değişkenini bulun ve Düzenle... butonuna tıklayın.
4. Yeni butonuna tıklayın ve Flutter SDK klasörünüzün içindeki bin klasörünün yolunu ekleyin (örneğin: C:\flutter\bin).
5. Tüm pencereleri Tamam diyerek kapatın.
macOS/Linux:
1.Terminali açın.
2.Aşağıdaki komutu kullanarak ~/.bashrc, ~/.bash_profile veya ~/.zshrc (kullandığınız kabuğa göre) dosyasını düzenleyin:
3.Dosyanın sonuna aşağıdaki satırı ekleyin (kendi Flutter SDK yolunuzu güncellemeyi unutmayın):
4.Dosyayı kaydedin ve kapatın (Ctrl+O, Enter, Ctrl+X).
5.Değişikliklerin etkili olması için terminali yeniden başlatın veya aşağıdaki komutu çalıştırın:
Adım 3: Flutter Doctor Çalıştırma
Flutter kurulumunuzun doğru yapıldığını doğrulamak için terminalde aşağıdaki komutu çalıştırın:
flutter doctor
Bu komut, Flutter geliştirme ortamınızdaki eksik bileşenleri veya hataları size bildirecektir. Çıktıda [✓] işaretleri her şeyin yolunda olduğunu, [!] işaretleri ise eksik veya hatalı bir şeyler olduğunu gösterir. flutter doctor çıktısındaki talimatları takip ederek eksik bileşenleri kurmanız veya hataları gidermeniz gerekmektedir.
Genellikle, Android Studio veya VS Code eklentileri, Android lisansları veya Xcode (macOS için) gibi bileşenler eksik olabilir. Çıktıdaki yönergeler bu sorunları çözmenize yardımcı olacaktır.
Adım 4: IDE Kurulumu (VS Code veya Android Studio)
Flutter geliştirmesi için iki ana IDE önerilir: Visual Studio Code ve Android Studio.
Visual Studio Code (VS Code):
VS Code, hafif, hızlı ve güçlü bir kod düzenleyicidir. Flutter geliştirmesi için gerekli eklentileri kurarak tam teşekküllü bir IDE haline getirilebilir.
1.VS Code İndirme ve Kurulumu: Resmi web sitesinden VS Code'u indirin ve kurun: VS Code İndir
2.Gerekli Eklentileri Kurma: VS Code'u açın ve sol taraftaki uzantılar (Extensions) simgesine tıklayın (veya Ctrl+Shift+X / Cmd+Shift+X). Arama çubuğuna Flutter yazın ve Flutter eklentisini yükleyin. Bu eklenti, Dart eklentisini de otomatik olarak yükleyecektir.
Android Studio:
Android Studio, Google tarafından Android geliştirme için tasarlanmış tam özellikli bir IDE'dir. Flutter ve Dart eklentileri ile Flutter geliştirmesi için de kullanılabilir.
1.Android Studio İndirme ve Kurulumu: Resmi web sitesinden Android Studio'yu indirin ve kurun: Android Studio İndir
2.Flutter ve Dart Eklentilerini Kurma: Android Studio'yu açın. File > Settings > Plugins (macOS'ta Android Studio > Preferences > Plugins) yolunu izleyin. Marketplace sekmesinde Flutter aratın ve yükleyin. Bu eklenti, Dart eklentisini de otomatik olarak yükleyecektir. Kurulumdan sonra Android Studio'yu yeniden başlatmanız istenebilir.
3.Android SDK ve Araçları: Android Studio, Android SDK'yı ve gerekli araçları otomatik olarak kuracaktır. Eğer flutter doctor çıktısında Android SDK ile ilgili bir uyarı varsa, Android Studio'daki SDK Manager'ı (Tools > SDK Manager) kullanarak eksik bileşenleri yükleyebilirsiniz.
Kurulum tamamlandıktan sonra, flutter doctor komutunu tekrar çalıştırarak tüm bileşenlerin doğru bir şekilde kurulduğundan emin olun. Artık Flutter ile ilk uygulamanızı geliştirmeye hazırsınız!
1.3. İlk Flutter Projesi Oluşturma ve Çalıştırma
Geliştirme ortamınızı başarıyla kurduğunuza göre, şimdi ilk Flutter projenizi oluşturabilir ve çalıştırabilirsiniz. Bu bölümde, hem komut satırı hem de IDE üzerinden proje oluşturma adımlarını ve uygulamanızı bir emülatörde veya fiziksel cihazda nasıl çalıştıracağınızı öğreneceksiniz.
Komut Satırı ile Proje Oluşturma
1.Proje Oluşturma Komutu: Terminal veya komut istemcisini açın ve projenizi oluşturmak istediğiniz dizine gidin. Ardından aşağıdaki komutu çalıştırın:
2.Proje Dizinine Girme: Proje oluşturulduktan sonra, oluşturulan projenin dizinine girin:
3.Uygulamayı Çalıştırma: Proje dizinindeyken, uygulamayı çalıştırmak için aşağıdaki komutu kullanın:
IDE ile Proje Oluşturma (VS Code veya Android Studio)
Visual Studio Code (VS Code):
1.VS Code'u açın.
2.View > Command Palette... (veya Ctrl+Shift+P / Cmd+Shift+P) menüsünü açın.
3.Arama çubuğuna Flutter: New Project yazın ve seçin.
4.Application seçeneğini seçin.
5.Projenizi oluşturmak istediğiniz dizini seçin.
6.Proje adını girin (örneğin: my_first_app) ve Enter tuşuna basın.
7.VS Code, yeni Flutter projesini oluşturacak ve otomatik olarak açacaktır.
Android Studio:
1.Android Studio'yu açın.
2.Karşılama ekranında New Flutter Project seçeneğini seçin.
3.Flutter Application seçeneğini seçin ve Next butonuna tıklayın.
4.Proje adını (Project name), Flutter SDK yolunu (Flutter SDK path), proje konumunu (Project location) ve isteğe bağlı olarak açıklamasını (Description) girin. Next butonuna tıklayın.
5.Paket adını (Package name) ve platform desteklerini (Platform channels) ayarlayın. Finish butonuna tıklayın.
6.Android Studio, yeni Flutter projesini oluşturacak ve otomatik olarak açacaktır.
Uygulamayı Çalıştırma (Emülatör/Fiziksel Cihaz)
Uygulamanızı çalıştırmak için bir emülatör veya fiziksel bir cihazın bağlı ve hazır olması gerekmektedir.
Emülatör Kurulumu (Android Studio ile):
1.Android Studio'yu açın.
2.Tools > Device Manager (veya AVD Manager) yolunu izleyin.
3.Create device butonuna tıklayın.
4.Bir cihaz tanımı seçin (örneğin: Pixel 6) ve Next butonuna tıklayın.
5.Bir sistem görüntüsü (Android sürümü) indirin ve seçin (örneğin: API 33 - Tiramisu). Next butonuna tıklayın.
6.Emülatör ayarlarını gözden geçirin ve Finish butonuna tıklayın.
7.Oluşturduğunuz emülatörü başlatmak için Device Manager'daki oynat (play) simgesine tıklayın.
Fiziksel Cihazda Çalıştırma:
1.Geliştirici Seçeneklerini Etkinleştirme: Android cihazınızda Ayarlar > Telefon Hakkında (veya Cihaz Hakkında) bölümüne gidin ve Yapım Numarasına (Build Number) yedi kez dokunarak geliştirici seçeneklerini etkinleştirin.
2.USB Hata Ayıklamayı Etkinleştirme: Ayarlar > Sistem > Geliştirici Seçenekleri bölümüne gidin ve USB hata ayıklama (USB debugging) seçeneğini etkinleştirin.
3.Cihazı Bilgisayara Bağlama: Cihazınızı USB kablosuyla bilgisayarınıza bağlayın. Cihazınızda USB hata ayıklamasına izin vermeniz istenebilir.
4.Cihazı Tanıma: Terminalde flutter devices komutunu çalıştırarak cihazınızın tanındığından emin olun.
Artık projenizi oluşturup, emülatör veya fiziksel cihazda çalıştırabilirsiniz. İlk Flutter uygulamanızın ekranda belirdiğini görmek, geliştirme yolculuğunuzdaki ilk heyecan verici adımdır!
1.4. Temel Proje Yapısı ve Dosya İncelemesi
Bir Flutter projesi oluşturduğunuzda, otomatik olarak belirli bir dosya ve klasör yapısı oluşturulur. Bu yapı, projenizin düzenli kalmasını ve farklı platformlar için gerekli dosyaların doğru yerlerde bulunmasını sağlar. Bu bölümde, temel proje yapısını ve önemli dosyaları inceleyeceğiz.
my_first_app/
├── .dart_tool/
├── .git/
├── .gitignore
├── .idea/
├── android/
├── build/
├── ios/
├── lib/
│ └── main.dart
├── linux/
├── macos/
├── pubspec.yaml
├── README.md
├── test/
├── web/
├── windows/
└── .metadata
Yukarıdaki yapı, yeni oluşturulmuş bir Flutter projesinin ana dizinini göstermektedir. Şimdi bu dizinlerin ve dosyaların ne anlama geldiğini inceleyelim:
•.dart_tool/: Dart ve Flutter araçları tarafından kullanılan geçici dosyaları ve önbelleği içerir. Genellikle bu klasörle doğrudan etkileşime geçmenize gerek kalmaz.
•.git/: Git versiyon kontrol sistemi tarafından kullanılan dosyaları içerir. Projenizin versiyon kontrolünü yönetmek için önemlidir.
•.gitignore: Git'in takip etmemesi gereken dosya ve klasörleri belirtir. Derleme çıktıları, geçici dosyalar ve hassas bilgiler gibi dosyaların versiyon kontrolüne dahil edilmesini engeller.
•.idea/: IntelliJ IDEA (Android Studio'nun temelini oluşturan IDE) tarafından kullanılan proje ayarları ve yapılandırma dosyalarını içerir.
•android/: Android platformuna özgü dosyaları içerir. Uygulamanızın Android sürümünü derlemek için gerekli olan Java/Kotlin kodları, kaynaklar ve manifest dosyaları burada bulunur. Eğer Android'e özgü bir ayar yapmanız gerekirse (örneğin, izinler), bu klasöre bakmanız gerekir.
•build/: Uygulamanızın derlenmiş çıktılarını (APK, IPA vb.) ve diğer derleme ile ilgili dosyaları içerir. Bu klasör genellikle otomatik olarak oluşturulur ve versiyon kontrolüne dahil edilmez.
•ios/: iOS platformuna özgü dosyaları içerir. Uygulamanızın iOS sürümünü derlemek için gerekli olan Swift/Objective-C kodları, kaynaklar ve Xcode proje dosyaları burada bulunur. iOS'a özgü ayarlar veya bağımlılıklar için bu klasöre bakmanız gerekir.
•lib/: Bu, Flutter projenizin kalbidir. Uygulamanızın Dart kaynak kodları burada bulunur. Varsayılan olarak, main.dart dosyası bu klasörün içinde yer alır ve uygulamanızın başlangıç noktasını oluşturur. Tüm widget'larınız, iş mantığınız ve kullanıcı arayüzü kodlarınız genellikle bu klasör altında düzenlenir.
•main.dart: Uygulamanızın ana giriş noktasıdır. runApp() fonksiyonu ile uygulamanızın kök widget'ını başlatır. Genellikle uygulamanızın ana ekranını ve temel yapısını tanımlar.
•linux/, macos/, web/, windows/: Bu klasörler, uygulamanızın ilgili platformlar için derlenmesi ve çalıştırılması için gerekli olan platforma özgü dosyaları içerir. Örneğin, web/ klasörü web uygulamanızın HTML, CSS ve JavaScript dosyalarını barındırır.
•pubspec.yaml: Flutter projenizin yapılandırma dosyasıdır. Bu dosya, projenizin adını, açıklamasını, versiyonunu, Dart SDK kısıtlamalarını ve en önemlisi, projenizin bağımlılıklarını (kullandığınız paketler ve kütüphaneler) ve varlıklarını (resimler, fontlar vb.) tanımlar. Yeni bir paket eklemek veya varlıkları kullanmak istediğinizde bu dosyayı düzenlemeniz gerekir.
•README.md: Projenizin kısa bir açıklamasını, kurulum talimatlarını ve diğer önemli bilgileri içeren Markdown formatında bir dosyadır. Genellikle GitHub gibi platformlarda projenizin ana sayfası olarak görüntülenir.
•test/: Uygulamanız için yazılan test kodlarını içerir. Flutter, birim testleri, widget testleri ve entegrasyon testleri yazmanıza olanak tanır.
•.metadata: Flutter araçları tarafından kullanılan meta veri dosyasıdır. Genellikle bu dosyayla doğrudan etkileşime geçmenize gerek kalmaz.
Bu temel proje yapısını anlamak, Flutter projelerinizde gezinmenizi, dosyaları bulmanızı ve uygulamanızın farklı bölümlerini yönetmenizi kolaylaştıracaktır. Özellikle lib/ ve pubspec.yaml dosyaları, Flutter geliştirme sürecinde en sık etkileşimde bulunacağınız dosyalardır.