Bölüm 1 — Konu 3: İlk Proje Yapısı (`pubspec.yaml`, `lib/`, Klasör Mimarisi, `flutter create` Anatomisi)
Dizi · 3/3 Flutter Türkçe Tutorial
- Bölüm 1 — Konu 1: Flutter Nedir, Mimarisi (Widget → Element → RenderObject, Skia/Impeller)
- Bölüm 1 — Konu 2: Ortam Kurulumu (Flutter SDK, Android Studio/VS Code, Emulator/Simulator, DevTools'a İlk Bakış)
- Bölüm 1 — Konu 3: İlk Proje Yapısı (`pubspec.yaml`, `lib/`, Klasör Mimarisi, `flutter create` Anatomisi)
Proje Oluşturma
flutter create merhaba_dunya
cd merhaba_dunyaBu 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ış
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
lib/
main.dartYeni 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:
lib/
main.dart
screens/
ana_ekran.dart
detay_ekran.dart
models/
kullanici.dart
services/
api_servisi.dartBunu 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:
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: trueYeni 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'dedependencieskavramı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,+1kı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ümdeMaterialApp'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:
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ğimizimportmekanizması, burada Flutter'ın kendi kütüphanesini (Material Design widget'larını içeren) dahil ediyor.runApp(const MyApp());— Bu, Dart'takimain()'in Flutter'a özgü karşılığı; uygulamayı başlatan fonksiyon.class MyApp extends StatelessWidget— Dart Bölüm 7'de öğrendiğimizextends(kalıtım) burada karşımıza çıkıyor!MyApp, Flutter'ın kendiStatelessWidgetsı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ğimizsuper(ü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
flutter runBu komut:
- 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).
- Bağlı bir emulator/cihaza yükler.
- Uygulamayı başlatır, terminalde canlı bir konsol açar (burada
rtuş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 sadecelib/klasöründe çalışacaksın.pubspec.yaml, Dart'takiyle aynı temel yapıya sahiptir, ek olarakflutter:bölümü ve+build_numberiçerir.- Varsayılan
main.dart, Dart'ta öğrendiğinextends,super,@overridegibi 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_projemile 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.yamldosyasını aç,flutter:bölümünü vedependencies'i incele, Dart'takipubspec.yaml'dan farkını belirle. - [ ]
lib/main.dartdosyasını aç, içindekiextends,super,@overridekullanımlarını bul ve her birinin Dart'ta ne anlama geldiğini (öğrendiğin derslerden) hatırla. - [ ]
flutter runile 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