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 3: İlk Proje Yapısı (`pubspec.yaml`, `lib/`, Klasör Mimarisi, `flutter create` Anatomisi)

4 dk okuma #flutter
Dizi · 3/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 10 başlık
  1. Proje Oluşturma
  2. Klasör Yapısına Genel Bakış
  3. lib/ Klasörü — Asıl Çalışma Alanın
  4. pubspec.yaml — Flutter Bağlamında
  5. flutter create'in Ürettiği Varsayılan Kod
  6. Uygulamayı Çalıştırma
  7. build/ Klasörü — Derleme Çıktıları
  8. .gitignore — Neyin Paylaşılmayacağı
  9. 🎯 Bu Dersten Çıkarılması Gerekenler
  10. 📝 Ödevler

Proje Oluşturma

bash
flutter create merhaba_dunya
cd merhaba_dunya

Bu komut, Dart Bölüm 12'de öğrendiğimiz dart create'e çok benzer, ama çok daha fazla dosya ve klasör üretir — çünkü Flutter, sadece Dart kodu değil, her platform için (Android, iOS, web, masaüstü) gerekli yapılandırma dosyalarını da oluşturur.

Klasör Yapısına Genel Bakış

metin
merhaba_dunya/
  android/          # Android'e özgü native yapılandırma
  ios/              # iOS'a özgü native yapılandırma
  web/              # Web'e özgü yapılandırma
  windows/          # Windows masaüstü yapılandırması
  macos/            # macOS masaüstü yapılandırması
  linux/            # Linux masaüstü yapılandırması
  lib/              # ⭐ SENİN YAZACAĞIN DART KODU BURADA
  test/             # Testler (Dart Bölüm 12'de öğrendiğimiz test yapısına benzer)
  pubspec.yaml      # Proje yapılandırması (Dart Bölüm 12'yi hatırla)
  analysis_options.yaml  # Lint kuralları (Dart Bölüm 13'ü hatırla)

Önemli gözlem: android/, ios/, windows/ gibi klasörler, native platform kodunu içerir — bunlara günlük geliştirmede neredeyse hiç dokunmayacaksın. Flutter, bu klasörleri otomatik olarak yönetir; sen sadece lib/ klasöründe Dart/Flutter kodu yazarsın, Flutter bunu her platform için uygun native pakete (APK, IPA, vb.) derler.

lib/ Klasörü — Asıl Çalışma Alanın

metin
lib/
  main.dart

Yeni bir proje, lib/ içinde tek bir dosyayla (main.dart) başlar. Bu, Dart tutorial'ında öğrendiğimiz main() fonksiyonunun (Dart Bölüm 1 Konu 3) bulunduğu dosyadır — Flutter uygulaması da, tıpkı bir Dart programı gibi, main() ile başlar.

Proje büyüdükçe, lib/ içinde kendi klasör yapını oluşturursun — Dart Bölüm 12'de öğrendiğimiz proje organizasyonu prensiplerini (models/, services/, screens/ gibi) burada uygularsın:

metin
lib/
  main.dart
  screens/
    ana_ekran.dart
    detay_ekran.dart
  models/
    kullanici.dart
  services/
    api_servisi.dart

Bunu ilerleyen bölümlerde, gerçek bir uygulama büyüdükçe canlı olarak deneyimleyeceğiz.

pubspec.yaml — Flutter Bağlamında

Dart Bölüm 12 Konu 53'te pubspec.yaml'ı detaylı işlemiştik. Flutter projelerinde bu dosya, ek olarak Flutter'a özgü bölümler içerir:

yaml
name: merhaba_dunya
description: "İlk Flutter projem"
publish_to: 'none'
version: 1.0.0+1

environment:
  sdk: '>=3.0.0 <4.0.0'

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.6

dev_dependencies:
  flutter_test:
    sdk: flutter
  flutter_lints: ^3.0.0

flutter:
  uses-material-design: true

Yeni gördüğümüz kısımlar:

  • flutter: sdk: flutter — Flutter framework'ünün kendisini, bir bağımlılık olarak ekler (Dart Bölüm 12'de dependencies kavramını hatırla — Flutter, aslında kendisi de bu mekanizmayla projene "eklenir").
  • version: 1.0.0+1 — Dart Bölüm 12'de gördüğümüz semantic versioning'e ek olarak, +1 kısmı build number'dır — her yayınladığın sürümde bu sayı artmalıdır (Bölüm 11'de, uygulama yayınlama konusunda tam olarak işleyeceğiz).
  • flutter: uses-material-design: true — Google'ın Material Design ikon setini kullanmanı sağlar (bir sonraki bölümde MaterialApp'i öğrenirken bunu göreceğiz).
  • cupertino_icons — iOS tarzı (Apple'ın "Cupertino" tasarım dili) ikonlar için.

flutter create'in Ürettiği Varsayılan Kod

lib/main.dart dosyasını açtığında, Flutter'ın kendi örnek uygulamasını (sayaç uygulaması) göreceksin. Şimdilik kodun tamamını anlamana gerek yok (bunu Bölüm 1'in ilerleyen konularında ve Bölüm 2'de adım adım işleyeceğiz), ama genel yapısını tanıyalım:

dart
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(
      title: 'Flutter Demo',
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

Dikkatini çekmek istediğim noktalar (detaylı işlemeden önce):

  • import 'package:flutter/material.dart'; — Dart Bölüm 12'de öğrendiğimiz import mekanizması, burada Flutter'ın kendi kütüphanesini (Material Design widget'larını içeren) dahil ediyor.
  • runApp(const MyApp()); — Bu, Dart'taki main()'in Flutter'a özgü karşılığı; uygulamayı başlatan fonksiyon.
  • class MyApp extends StatelessWidget — Dart Bölüm 7'de öğrendiğimiz extends (kalıtım) burada karşımıza çıkıyor! MyApp, Flutter'ın kendi StatelessWidget sınıfından türüyor — bir sonraki bölümde bunu tam olarak işleyeceğiz.
  • const MyApp({super.key}); — Dart Bölüm 7'de öğrendiğimiz super (üst sınıf constructor'ına erişim) burada da geçerli.
  • @override Widget build(...) — Dart Bölüm 7'de öğrendiğimiz @override — StatelessWidget'tan gelen bir metodu override ediyoruz.

Bu senin için harika bir haber: Bu kodun her satırı, Dart'ta öğrendiğin kavramların doğrudan uygulamasıdır. Yeni bir dil öğrenmiyorsun — sadece Flutter'ın kendi sınıflarını (StatelessWidget gibi) tanımaya başlıyorsun.

Uygulamayı Çalıştırma

bash
flutter run

Bu komut:

  1. Kodunu JIT derler (Dart Bölüm 12'de öğrendiğimiz JIT/AOT ayrımını hatırla — geliştirme modunda JIT kullanılır).
  2. Bağlı bir emulator/cihaza yükler.
  3. Uygulamayı başlatır, terminalde canlı bir konsol açar (burada r tuşuna basarak hot reload tetikleyebilirsin — Bölüm 1 Konu 4'te tam olarak işleyeceğiz).

build/ Klasörü — Derleme Çıktıları

Uygulamayı ilk kez çalıştırdığında, projede otomatik olarak bir build/ klasörü oluşur — burada, derlenmiş ara dosyalar bulunur. Bu klasör elle düzenlenmez, ve genelde versiyon kontrolüne (Git) dahil edilmez (.gitignore dosyasında zaten hariç tutulmuştur).

.gitignore — Neyin Paylaşılmayacağı

Flutter projeleri, otomatik olarak bir .gitignore dosyasıyla gelir — bu, Dart Bölüm 12'de öğrendiğimiz pubspec.lock mantığına benzer bir "neyi paylaşma, neyi paylaşma" kararı içerir: build/ gibi otomatik üretilen klasörler, versiyon kontrolüne dahil edilmemelidir (çünkü herkesin kendi makinesinde yeniden üretilebilir).


🎯 Bu Dersten Çıkarılması Gerekenler

  • flutter create, her platform (Android, iOS, web, masaüstü) için native yapılandırma klasörleri üretir — ama sen sadece lib/ klasöründe çalışacaksın.
  • pubspec.yaml, Dart'takiyle aynı temel yapıya sahiptir, ek olarak flutter: bölümü ve +build_number içerir.
  • Varsayılan main.dart, Dart'ta öğrendiğin extends, super, @override gibi kavramları doğrudan kullanır — Flutter, yeni bir dil değil, Dart'ın üzerine kurulu bir framework.
  • flutter run, kodu JIT derler ve bağlı bir cihaza yükler.
  • build/ klasörü otomatik üretilir, elle düzenlenmez, versiyon kontrolüne dahil edilmez.

📝 Ödevler

  • [ ] flutter create ilk_projem ile yeni bir proje oluştur, klasör yapısını incele — her üst düzey klasörün ne işe yaradığını not al.
  • [ ] pubspec.yaml dosyasını aç, flutter: bölümünü ve dependencies'i incele, Dart'taki pubspec.yaml'dan farkını belirle.
  • [ ] lib/main.dart dosyasını aç, içindeki extends, super, @override kullanımlarını bul ve her birinin Dart'ta ne anlama geldiğini (öğrendiğin derslerden) hatırla.
  • [ ] flutter run ile projeyi çalıştır, terminaldeki çıktıyı incele (hangi cihaza yüklendiği, hangi modda çalıştığı gibi bilgiler).
  • [ ] Proje çalışırken oluşan build/ klasörünü bul, içeriğine göz at (düzenlemene gerek yok, sadece ne tür dosyalar olduğunu gör).

Sıradaki konu: Bölüm 1 — Konu 4: Hot Reload / Hot Restart Ne Yapıyor, Neden Önemli