Bölüm 3 — Konu 10: MaterialApp/CupertinoApp, Scaffold, AppBar

Bölüm 3'e hoş geldin. Şimdiye kadar tek widget'lık örnekler yazdık — bu derste, gerçek bir uygulamanın iskeletini kuracağız.

#MaterialApp — Uygulamanın Kök Widget'ı

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: 'İlk Uygulamam',
      theme: ThemeData(colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue)),
      home: const AnaEkran(),
    );
  }
}

Not: theme: parametresine eskiden (Material 2 döneminde) doğrudan ThemeData(primarySwatch: Colors.blue) gibi tek bir renk veriliyordu. Bu hâlâ çalışır ama artık eski (legacy) bir kalıp — güncel Flutter (Material 3 varsayılan olduğu için) ColorScheme.fromSeed(seedColor: ...) kullanmanı bekler; tek bir "tohum" renkten tutarlı, tam bir renk paleti üretir. Tema sistemini bütün detaylarıyla Bölüm 4 Konu 16'da işleyeceğiz — burada sadece doğru/güncel sözdizimini görmen yeterli.

Bölüm 1 Konu 3'te bu kodu görmüştük ama detaylandırmamıştık — şimdi tam olarak işleyelim. MaterialApp, Google'ın Material Design tasarım diline uygun bir uygulama iskeleti kurar — Bölüm 1'de öğrendiğimiz Widget ağacının en tepesinde yer alır ve şu önemli işlevleri sağlar:

• Tema yönetimi (theme:) — Bölüm 4'te tam olarak işleyeceğiz.
• Navigasyon altyapısı (Navigator — Bölüm 3 Konu 14'te göreceğiz).
• Yerelleştirme (localization) desteği.
• home: — uygulamanın ilk açılan ekranını belirtir.

#CupertinoApp — iOS Tarzı Alternatif

import 'package:flutter/cupertino.dart';

CupertinoApp(
  home: CupertinoPageScaffold(
    child: Center(child: Text('iOS stili')),
  ),
)

CupertinoApp, Apple'ın iOS tasarım dili ("Cupertino", Apple'ın merkezinin bulunduğu şehir) kullanılarak tasarlanmış widget'lar sunar. Pratikte: Çoğu Flutter uygulaması MaterialApp kullanır — Material Design, hem Android hem iOS'ta iyi görünen, evrensel bir tasarım dilidir. CupertinoApp'i genelde, özellikle iOS'a özgü bir görünüm istediğinde veya belirli Cupertino widget'larını (örneğin CupertinoSwitch) kullanmak istediğinde tercih edersin. İkisini karıştırmak da mümkündür — bir MaterialApp içinde bazı Cupertino widget'ları kullanabilirsin.

#Scaffold — Sayfa İskeleti

Scaffold(
  appBar: AppBar(
    title: Text('Ana Sayfa'),
  ),
  body: Center(
    child: Text('Merhaba!'),
  ),
  floatingActionButton: FloatingActionButton(
    onPressed: () {},
    child: Icon(Icons.add),
  ),
)

Scaffold, tek bir ekranın temel yapısını sağlayan bir widget'tır — Material Design'ın "sayfa şablonu" gibi düşünebilirsin. Bir uygulamada genelde her ekran (Bölüm 3 Konu 14'te göreceğimiz "sayfa" kavramı), kendi Scaffold'unu içerir.

Scaffold'un sunduğu temel "yuvalar" (slots):

• appBar: üstteki başlık çubuğu.
• body: ana içerik.
• floatingActionButton: sağ altta yüzen aksiyon butonu.
• bottomNavigationBar: alt navigasyon çubuğu (Bölüm 3 Konu 11'de listeler ile birlikte göreceğiz).
• drawer: kenardan açılan menü.

Scaffold, aslında Bölüm 2 Konu 7'de öğrendiğimiz Container'a benzer bir "kompozisyon widget'ı" — arka planda, verdiğin bu parçaları (appBar, body vb.) doğru layout ile birleştiren bir widget'tır (Dart Bölüm 6'da öğrendiğimiz "named parametreler" mantığıyla, her "yuvayı" ayrı bir named parametre olarak alıyor).

#AppBar — Üst Başlık Çubuğu

AppBar(
  title: Text('Uygulamam'),
  backgroundColor: Colors.blue,
  actions: [
    IconButton(
      icon: Icon(Icons.search),
      onPressed: () {},
    ),
    IconButton(
      icon: Icon(Icons.more_vert),
      onPressed: () {},
    ),
  ],
)

actions, Bölüm 2'de öğrendiğimiz List<Widget> alan bir parametredir (Dart Bölüm 4'ü hatırla) — AppBar'ın sağ tarafında görünecek ikon butonlarını sıralar. IconButton'daki onPressed, Dart Bölüm 5'te öğrendiğimiz anonim fonksiyon (callback) kavramının doğrudan bir uygulaması — "bu butona tıklandığında çalışacak kod."

#Hepsini Bir Arada — İlk Gerçek Ekranımız

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: 'İlk Uygulamam',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const AnaEkran(),
    );
  }
}

class AnaEkran extends StatelessWidget {
  const AnaEkran({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Ana Sayfa'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Icon(Icons.flutter_dash, size: 80, color: Colors.blue),
            SizedBox(height: 16),
            Text('Flutter Öğreniyorum!', style: TextStyle(fontSize: 24)),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          print('Butona tıklandı');
        },
        child: Icon(Icons.favorite),
      ),
    );
  }
}

Dikkat et: AnaEkran, ayrı bir class olarak tanımlandı (Dart Bölüm 6'yı hatırla — tek sorumluluk prensibi, burada "uygulama iskeleti" ile "ana ekranın içeriği" ayrı class'lara bölünüyor). MyApp, sadece uygulama düzeyinde ayarları (tema, başlık) yönetirken, AnaEkran, gerçek ekran içeriğinden sorumlu.

#SizedBox — Küçük Ama Sık Kullanılan Bir Widget

SizedBox(height: 16) // sadece dikey boşluk
SizedBox(width: 8)   // sadece yatay boşluk

SizedBox, Bölüm 2 Konu 7'de öğrendiğimiz Padding'e benzer bir "tek iş yapan" widget'tır — sadece belirli bir boyutta boş alan oluşturur (bir Column/Row içinde iki widget arasına boşluk koymak için çok yaygın kullanılır). Padding'den farkı, Padding'in bir çocuğun etrafına boşluk eklemesi, SizedBox'ın ise kendi başına bir boşluk widget'ı olarak kullanılabilmesidir (child olmadan da).

#🎯 Bu Dersten Çıkarılması Gerekenler

• MaterialApp, uygulamanın kök widget'ıdır; tema, navigasyon altyapısı ve ilk ekranı (home) yönetir.
• CupertinoApp, iOS tasarım diline uygun alternatif bir kök widget'tır.
• Scaffold, tek bir ekranın temel yapısını (appBar, body, floatingActionButton gibi "yuvalarla") sağlar.
• AppBar, üst başlık çubuğudur; actions ile sağ tarafa ikon butonları eklenebilir.
• SizedBox, belirli boyutta boş alan oluşturmak için kullanılan basit bir widget'tır.

#📝 Ödevler

• [ ] AppBar, body ve FloatingActionButton içeren bir Scaffold iskeleti oluştur.
• [ ] AppBar'a en az 2 actions ikonu ekle, her birine bir onPressed (şimdilik sadece print yazdıran) fonksiyonu bağla.
• [ ] MyApp ve ayrı bir ekran class'ı (örn. AnaEkran) yaparak, uygulama düzeyi ayarlar ile ekran içeriğini birbirinden ayır.
• [ ] SizedBox kullanarak bir Column içindeki widget'lar arasına dikey boşluklar ekle.
• [ ] MaterialApp'i CupertinoApp ile değiştirip (basit bir örnekte), görsel farkı gözlemle.

Sıradaki konu: Bölüm 3 — Konu 11: ListView, GridView, SingleChildScrollView (+ Builder Pattern)