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#dart

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