Dart ve Flutter öğrenenler için Discord sunucumuz açıldı.Katıl

↑↓ seç · Enter aç · Esc kapat

Mutlu Tekin
Mutlu Tekin
← Yazılar

Bölüm 1 — Konu 2: Ortam Kurulumu (Flutter SDK, Android Studio/VS Code, Emulator/Simulator, DevTools'a İlk Bakış)

4 dk okuma #flutter
Dizi · 2/61 Flutter Türkçe Tutorial
  1. Bölüm 1 — Konu 1: Flutter Nedir, Mimarisi (Widget → Element → RenderObject, Skia/Impeller)
  2. Bölüm 1 — Konu 2: Ortam Kurulumu (Flutter SDK, Android Studio/VS Code, Emulator/Simulator, DevTools'a İlk Bakış)
  3. Bölüm 1 — Konu 3: İlk Proje Yapısı (`pubspec.yaml`, `lib/`, Klasör Mimarisi, `flutter create` Anatomisi)
  4. Bölüm 1 — Konu 4: Hot Reload / Hot Restart Ne Yapıyor, Neden Önemli
  5. Bölüm 2 — Konu 5: "Her Şey Widget'tır" Felsefesi, Widget Ağacı
  6. Bölüm 2 — Konu 6: StatelessWidget vs StatefulWidget + `setState()` Derinlemesine (Rebuild Mekanizması)
  7. Bölüm 2 — Konu 7: Temel Layout — Container, Row, Column, Stack, Padding, Align, Center
  8. Bölüm 2 — Konu 8: Constraint Sistemi — "Constraints Go Down, Sizes Go Up, Parent Sets Position"
  9. Bölüm 2 — Konu 9: `Expanded`, `Flexible`, `Spacer`, Intrinsic Widget'lar
  10. Bölüm 3 — Konu 10: MaterialApp/CupertinoApp, Scaffold, AppBar
  11. Bölüm 3 — Konu 11: `ListView`, `GridView`, `SingleChildScrollView` (+ Builder Pattern)
  12. Bölüm 3 — Konu 12: Text, TextStyle, Icon, Image, Asset Yönetimi
  13. Bölüm 3 — Konu 13: Custom Widget Yazma Prensipleri (Composition Over Inheritance)
  14. Bölüm 3 — Konu 14: Navigator 1.0 — Push/Pop, Named Routes
  15. Bölüm 4 — Konu 15: Form, TextField/TextFormField, GlobalKey<FormState>, Validasyon
  16. Bölüm 4 — Konu 16: Theme Sistemi (ThemeData, ColorScheme)
  17. Bölüm 4 — Konu 17: Responsive & Adaptive Tasarım (MediaQuery, LayoutBuilder, OrientationBuilder, Breakpoint Stratejileri)
  18. Bölüm 5 — Konu 18: Future/Async-Await Flutter Bağlamında, FutureBuilder
  19. Bölüm 5 — Konu 19: `Stream`, `StreamBuilder`
  20. Bölüm 5 — Konu 20: HTTP İstekleri (`http` / `dio` Paketleri)
  21. Bölüm 5 — Konu 21: JSON Serialization (Manuel → `json_serializable`/`freezed`)
  22. Bölüm 5 — Konu 22: Local Storage — `shared_preferences` → `Hive` → `sqflite`/Drift
  23. Bölüm 6 — Konu 23: InheritedWidget ve InheritedModel — "Neden setState Yetmiyor" Sorusunun Cevabı
  24. Bölüm 6 — Konu 24: Provider Paketi
  25. Bölüm 6 — Konu 25: Riverpod (Modern Yaklaşım, Provider'ın Halefi)
  26. Bölüm 6 — Konu 26: BLoC/Cubit Pattern (`flutter_bloc`)
  27. Bölüm 6 — Konu 27: GetX (Tartışmalı Ama Yaygın)
  28. Bölüm 6 — Konu 28: Karşılaştırma — Hangi Projede Hangisi?
  29. Bölüm 7 — Konu 29: Navigator 2.0 (Router, RouteInformationParser, RouterDelegate)
  30. Bölüm 7 — Konu 30: `go_router` Paketi (Pratik ve Modern Çözüm)
  31. Bölüm 7 — Konu 31: Deep Linking
  32. Bölüm 7 — Konu 32: Repository Pattern, Katmanlı Mimari (Data/Domain/Presentation)
  33. Bölüm 7 — Konu 33: Dependency Injection (`get_it`, `injectable`)
  34. Bölüm 7 — Konu 34: Clean Architecture Uyarlaması, SOLID Prensipleri
  35. Bölüm 8 — Konu 35: Implicit Animasyonlar
  36. Bölüm 8 — Konu 36: Explicit Animasyonlar (`AnimationController`, `Tween`, `Curve`)
  37. Bölüm 8 — Konu 37: Hero Animasyonları
  38. Bölüm 8 — Konu 38: `CustomPainter` / `Canvas`
  39. Bölüm 8 — Konu 39: Rive / Lottie Entegrasyonu
  40. Bölüm 9 — Konu 40: Platform Channels
  41. Bölüm 9 — Konu 41: Permission Yönetimi (`permission_handler`)
  42. Bölüm 9 — Konu 42: Kamera, Konum, Sensörler
  43. Bölüm 9 — Konu 43: Push Notification (Firebase Cloud Messaging)
  44. Bölüm 9 — Konu 44: Android/iOS Build Sistemleri
  45. Bölüm 10 — Konu 45: Test Yazımı (Unit, Widget, Integration, Golden)
  46. Bölüm 10 — Konu 46: CI/CD
  47. Bölüm 10 — Konu 47: Rebuild Optimizasyonu (`const`, `key` Kullanımı)
  48. Bölüm 10 — Konu 48: DevTools Profiling
  49. Bölüm 10 — Konu 49: Lazy Loading, Pagination, Büyük Liste Performansı
  50. Bölüm 11 — Konu 50: Firebase Ekosistemi (Auth, Firestore, Storage, Functions)
  51. Bölüm 11 — Konu 51: Supabase Alternatifi
  52. Bölüm 11 — Konu 52: GraphQL (Opsiyonel)
  53. Bölüm 11 — Konu 53: Store Yayınlama Süreci (İmzalama, Listing, Versiyonlama)
  54. Bölüm 11 — Konu 54: App Size, Obfuscation, Flavor Yönetimi
  55. Bölüm 12 — Konu 55: Flutter Web / Desktop
  56. Bölüm 12 — Konu 56: Custom `RenderObject` Yazımı
  57. Bölüm 12 — Konu 57: Engine Mimarisi Derinlemesine (Impeller vs Skia)
  58. Bölüm 12 — Konu 58: Plugin Geliştirme, pub.dev'e Paket Yayınlama
  59. Bölüm 12 — Konu 59: Monorepo Mimarisi (Melos)
  60. Bölüm 12 — Konu 60: Erişilebilirlik (Accessibility) Derinlemesine
  61. Bölüm 12 — Konu 61: Yerelleştirme (Localization / i18n)
Dizinin sayfası →
İçindekiler 9 başlık
  1. Flutter SDK Kurulumu
  2. IDE Seçimi — VS Code vs Android Studio
  3. Emulator / Simulator — Sanal Cihaz Kurulumu
  4. İlk Kontrol — Bağlı Cihazları Listeleme
  5. Flutter DevTools — İlk Bakış
  6. Kurulumu Doğrulama — Örnek Bir Proje ile Test
  7. Sık Karşılaşılan Kurulum Sorunları
  8. 🎯 Bu Dersten Çıkarılması Gerekenler
  9. 📝 Ödevler

Flutter SDK Kurulumu

Dart tutorial'ında Dart SDK'yı bağımsız kurmuştuk (Dart Bölüm 1 Konu 2'yi hatırla). Flutter SDK'sı, kendi içinde zaten bir Dart SDK'sı barındırır — yani Flutter'ı kurduğunda, aslında uyumlu bir Dart sürümü de otomatik olarak gelir.

Kurulum adımları (özet, platforma göre değişir):

  1. flutter.dev üzerinden, işletim sistemine uygun Flutter SDK'yı indir.
  2. SDK'yı bir klasöre çıkar (örneğin C:\src\flutter veya ~/development/flutter).
  3. Flutter'ın bin klasörünü PATH ortam değişkenine ekle (Dart Bölüm 1'de PATH kavramını görmüştük — aynı mantık).
  4. Terminali aç, kurulumu doğrula:
bash
flutter doctor

flutter doctor — Kurulumun "Sağlık Kontrolü"

Bu komut, Flutter geliştirme ortamının eksiksiz olup olmadığını kontrol eder ve şuna benzer bir çıktı verir:

metin
[✓] Flutter (Channel stable, 3.x.x)
[✓] Android toolchain - develop for Android devices
[✗] Xcode - develop for iOS and macOS (Xcode kurulu değil)
[✓] Chrome - develop for the web
[✓] Android Studio
[✓] VS Code
[✓] Connected device

Her [✗] işareti, eksik bir bileşeni gösterir — flutter doctor, genelde ne yapman gerektiğini de açıklar (örneğin "Xcode'u App Store'dan indirin" gibi). Tüm maddeleri yeşile çevirmek zorunda değilsin — örneğin sadece Android geliştirmek istiyorsan, Xcode'a (sadece iOS/macOS için gerekir) ihtiyacın olmaz.

IDE Seçimi — VS Code vs Android Studio

Dart tutorial'ında VS Code'u önermiştik (Dart Bölüm 1 Konu 2). Flutter geliştirmede de iki ana seçenek var:

VS Code Android Studio
Hafiflik ✅ Çok hafif, hızlı açılır ❌ Daha ağır, IDE tam donanımlı
Flutter/Dart eklentisi ✅ Var, güçlü ✅ Yerleşik (JetBrains tabanlı)
Android emulator yönetimi ⚠️ Android Studio'ya bağımlı kalabilir ✅ Doğrudan entegre
Genel tercih Günlük hızlı geliştirme Android'e özel derin ayarlar gerektiğinde

Pratik öneri: VS Code ile başla (Dart'ta zaten kullandığın araç) — Flutter ve Dart eklentilerini kur. Android emulator'ü yönetmek için Android Studio'yu sadece o amaçla (arka planda) kurman gerekecek, ama günlük kodlamayı VS Code'da yapabilirsin.

VS Code'a eklenti kurulumu:

  1. Extensions (Uzantılar) sekmesine git.
  2. "Flutter" ara, kur (bu otomatik olarak Dart eklentisini de kurar).

Emulator / Simulator — Sanal Cihaz Kurulumu

Uygulamanı test etmek için gerçek bir telefona ihtiyacın yok — bir emulator (Android için sanal cihaz) veya simulator (iOS için sanal cihaz, sadece macOS'ta çalışır) kullanabilirsin.

Android Emulator kurulumu:

  1. Android Studio'yu aç.
  2. "Device Manager" (Cihaz Yöneticisi) bölümüne git.
  3. "Create Device" ile bir sanal telefon modeli seç (örneğin Pixel 7).
  4. Bir Android sürümü (system image) indir ve seç.
  5. Emulator'ü başlat.

iOS Simulator (sadece macOS):

  • Xcode kurulduğunda otomatik olarak gelir, open -a Simulator komutuyla açılabilir.

Gerçek cihaz kullanmak da mümkün:

  • Android: Telefonda "Geliştirici Seçenekleri"ni açıp USB hata ayıklamayı (USB debugging) etkinleştir, USB ile bağla.
  • iOS: Bir Apple geliştirici hesabıyla, cihazı Xcode üzerinden "güvenilir" olarak işaretle.

İlk Kontrol — Bağlı Cihazları Listeleme

bash
flutter devices

Bu komut, o anda kullanılabilir tüm cihazları (açık emulator'ler, bağlı gerçek cihazlar, hatta Chrome tarayıcısı — web geliştirme için) listeler:

metin
2 connected devices:

sdk gphone64 x86 64 (mobile) • emulator-5554 • android-x64
Chrome (web)                 • chrome        • web-javascript

Flutter DevTools — İlk Bakış

Dart tutorial'ında DevTools'a değinmemiştik (o zaman henüz görsel bir uygulama yoktu) — şimdi kısaca tanıyalım. Flutter DevTools, uygulamanı çalışırken analiz etmeni sağlayan bir dizi görsel araçtır — tarayıcıda açılan bir web arayüzü şeklinde çalışır.

DevTools'un sunduğu bazı araçlar (her birini ileride, ilgili bölümlerde derinlemesine işleyeceğiz):

  • Widget Inspector: Widget ağacını (Bölüm 1 Konu 1'de öğrendiğimiz) görsel olarak inceleme.
  • Performance/Timeline: Uygulamanın hangi noktalarda yavaşladığını analiz etme (Bölüm 9'da işleyeceğiz).
  • Memory: Bellek kullanımını izleme (Dart Bölüm 13'te öğrendiğimiz garbage collection'ı görsel olarak gözlemleme).
  • Network: API çağrılarını izleme (Bölüm 5'te işleyeceğiz).

DevTools, bir uygulama çalışırken otomatik olarak erişilebilir hale gelir — bunu bir sonraki derste, ilk projemizi çalıştırdığımızda gerçekten göreceğiz.

Kurulumu Doğrulama — Örnek Bir Proje ile Test

Henüz kendi projemizi oluşturmadık (Bölüm 1 Konu 3'te yapacağız), ama Flutter'ın kendi örnek projesiyle hızlı bir test yapabilirsin:

bash
flutter create test_projesi
cd test_projesi
flutter run

Eğer her şey doğru kurulduysa, bu komutlar bir emulator/cihaz üzerinde, Flutter'ın varsayılan sayaç uygulamasını (counter app) açacaktır. Bunu bir sonraki derste, kendi projemizi oluştururken detaylı olarak inceleyeceğiz.

Sık Karşılaşılan Kurulum Sorunları

Sorun Olası Çözüm
flutter: command not found Flutter'ın bin klasörü PATH'e eklenmemiş — terminali yeniden başlat veya PATH'i kontrol et
Android licenses kabul edilmemiş flutter doctor --android-licenses çalıştırıp lisansları kabul et
Emulator çok yavaş açılıyor Bilgisayarında donanım hızlandırma (HAXM/Hyper-V, Apple Silicon'da otomatik) etkin mi kontrol et
VS Code'da Flutter komutları görünmüyor Flutter eklentisinin kurulu ve aktif olduğunu kontrol et, VS Code'u yeniden başlat

🎯 Bu Dersten Çıkarılması Gerekenler

  • Flutter SDK, kendi içinde uyumlu bir Dart SDK'sı barındırır — ayrıca Dart kurmana gerek yoktur.
  • flutter doctor, geliştirme ortamının eksiksiz olup olmadığını kontrol eder ve eksikleri raporlar.
  • VS Code (hafif, günlük kullanım) ve Android Studio (emulator yönetimi, derin Android ayarları) birlikte kullanılabilir.
  • Emulator/simulator, gerçek cihaz olmadan test yapmanı sağlar; flutter devices ile bağlı cihazları listeleyebilirsin.
  • Flutter DevTools, widget inceleme, performans analizi, bellek izleme gibi görsel araçlar sunan bir web arayüzüdür.

📝 Ödevler

  • [ ] Flutter SDK'yı kur, flutter doctor çalıştır, çıkan tüm maddeleri (eksik olanlar dahil) not al.
  • [ ] VS Code'a Flutter ve Dart eklentilerini kur.
  • [ ] Bir Android emulator oluştur (Android Studio üzerinden), başlat ve çalıştığını doğrula.
  • [ ] flutter devices komutunu çalıştır, çıkan cihaz listesini incele.
  • [ ] flutter create test_projesi ile örnek bir proje oluştur, flutter run ile çalıştır, varsayılan sayaç uygulamasının açıldığını gözlemle (bu projeyi silmene gerek yok, bir sonraki derste kendi projemizi ayrıca oluşturacağız).

Sıradaki konu: Bölüm 1 — Konu 3: İlk Proje Yapısı (pubspec.yaml, lib/, Klasör Mimarisi, flutter create Anatomisi)