Flutter'a Sonunda Başladım!

Bugün tarihi bir gün! Dart'ın temellerini öğrendikten sonra sonunda Flutter'a geçiş yaptım. İlk izlenimim: Widget'lar, widget'lar, her yer widget!

Canlı Demo: Row, Column ve Stack Örnekleri

Flutter'ın temel layout yapılarını interaktif olarak deneyin:

Flutter'ın Yapısını Anlamak

Flutter projesinde ilk dikkatimi çeken şey şu oldu: Her şey bir ağaç yapısı gibi. Main fonksiyonundan başlıyor, sonra uygulama widget'ı, sonra sayfa, sonra scaffold... İç içe geçmiş bir yapı.

Temel Flutter Yapısı

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp()); // Uygulama buradan başlıyor
}

main() fonksiyonu her şeyin başladığı yer. runApp() diyerek uygulamamızı başlatıyoruz.

Ana Widget (MyApp)

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'İlk Uygulama',
      debugShowCheckedModeBanner: false, // Debug yazısını kaldır
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'İlk Projem'),
    );
  }
}

MaterialApp Flutter'da material design kurallarına göre uygulama yapmanızı sağlıyor. home parametresi ilk açılacak sayfayı belirtiyor.

Sayfa Widget'ı (MyHomePage)

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);
  
  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

StatefulWidget durumu değişebilen widget'lar için. Mesela bir buton sayacı yapıyorsanız, sayı değiştiğinde ekranın güncellenmesi gerekir. İşte bunun için StatefulWidget kullanılır.

State Sınıfı

class _MyHomePageState extends State<MyHomePage> {
  @override
  void initState() {
    super.initState();
    print("Sayfa yüklendi!");
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Text("Merhaba Flutter!"),
      ),
    );
  }
}

initState() sayfa ilk açıldığında bir kere çalışır. API çağrıları genelde buraya yazılır.

Scaffold bir sayfa iskeletidir. AppBar (üst çubuk), body (içerik), bottomNavigationBar gibi kısımları var.

Flutter'ın Ağaç Yapısı

Flutter'ı anlamanın anahtarı bu ağaç yapısını kavramak:

Main
 └─ MyApp (MaterialApp)
     └─ MyHomePage (Scaffold)
         ├─ AppBar
         └─ Body
             └─ Widget'lar...

Her şey iç içe. Şöyle düşünün: Bir bina var (MaterialApp), binanın odaları var (Scaffold), odaların içinde mobilyalar var (Widget'lar).

Tasarım Düzeni: Row, Column ve Stack

Flutter'da layout (yerleşim) için üç temel yapı var. Başta hangisini ne zaman kullanacağımı karıştırıyordum.

Row - Yatay Yerleşim

Row widget'ları yan yana dizer. Soldan sağa.

Row(
  children: [
    Container(width: 80, height: 80, color: Colors.blue),
    Container(width: 80, height: 80, color: Colors.red),
    Container(width: 80, height: 80, color: Colors.yellow),
  ],
)

Ekran çıktısı: 🟦🟥🟨 (yan yana üç kare)

Column - Dikey Yerleşim

Column widget'ları alt alta dizer. Yukarıdan aşağıya.

Column(
  children: [
    Container(width: 80, height: 80, color: Colors.blue),
    Container(width: 80, height: 80, color: Colors.red),
    Container(width: 80, height: 80, color: Colors.yellow),
  ],
)

Ekran çıktısı:

🟦
🟥
🟨

(alt alta üç kare)

Stack - Üst Üste Yerleşim

Stack widget'ları üst üste koyar. Katmanlar gibi.

Stack(
  children: [
    Container(width: 130, height: 100, color: Colors.blue),
    Container(width: 80, height: 70, color: Colors.red),
    Container(width: 30, height: 60, color: Colors.yellow),
  ],
)

Büyük mavi kutu altta, orta kırmızı ortada, küçük sarı üstte. Hepsi sol üst köşeden hizalanmış.

Row ve Column Kombinasyonu

Şimdi daha karmaşık bir layout yapalım. Satır ve sütunları birleştirerek:

Hedef: 2 satır, her satırda 4 sütun (toplam 8 kutu)

Column(
  children: [
    // Birinci satır
    Row(
      children: [
        Container(width: 80, height: 80, color: Colors.yellow),
        Container(width: 80, height: 80, color: Colors.red),
        Container(width: 80, height: 80, color: Colors.green),
        Container(width: 80, height: 80, color: Colors.blue),
      ],
    ),
    // İkinci satır
    Row(
      children: [
        Container(width: 80, height: 80, color: Colors.red),
        Container(width: 80, height: 80, color: Colors.blue),
        Container(width: 80, height: 80, color: Colors.yellow),
        Container(width: 80, height: 80, color: Colors.green),
      ],
    ),
  ],
)

Sonuç:

🟨 🟥 🟩 🟦
🟥 🟦 🟨 🟩

Mantığı şöyle: Ana yapı Column (dikey). İçinde iki Row var (yatay). Her Row'un içinde dört Container var.

Container Widget'ı

Container Flutter'ın en temel widget'larından biri. Bir kutu gibi düşünün.

Basit Container

Container(
  width: 100,
  height: 100,
  color: Colors.blue,
  child: Text("Merhaba"),
)

İçeriği Ortalamak

Container(
  width: 100,
  height: 100,
  color: Colors.blue,
  child: Center(
    child: Text(
      "Merhaba",
      style: TextStyle(color: Colors.white),
    ),
  ),
)

Center widget'ı içindeki şeyi ortalar.

Margin ve Padding

Container(
  width: 100,
  height: 100,
  margin: EdgeInsets.all(10),  // Dıştan boşluk
  padding: EdgeInsets.all(20), // İçten boşluk
  color: Colors.blue,
  child: Text("Merhaba"),
)

Margin: Container'ın dışındaki boşluk
Padding: Container'ın içindeki boşluk

Köşeleri Yuvarlama

Container(
  width: 100,
  height: 100,
  decoration: BoxDecoration(
    color: Colors.blue,
    borderRadius: BorderRadius.circular(20),
  ),
  child: Center(
    child: Text("Yuvarlak"),
  ),
)

decoration kullandığınızda color parametresini decoration içine yazmalısınız.

Border (Kenarlık) Eklemek

Container(
  width: 100,
  height: 100,
  decoration: BoxDecoration(
    color: Colors.white,
    border: Border.all(
      color: Colors.blue,
      width: 3,
    ),
  ),
  child: Center(
    child: Text("Kenarlıklı"),
  ),
)

Row ve Column'da Hizalama

Widget'ları istediğimiz yere hizalayabiliriz:

MainAxisAlignment

Row(
  mainAxisAlignment: MainAxisAlignment.center, // Ortala
  children: [
    Container(width: 50, height: 50, color: Colors.red),
    Container(width: 50, height: 50, color: Colors.blue),
  ],
)

Row için mainAxis yataydır. Seçenekler:

start: Sola yasla
end: Sağa yasla
center: Ortala
spaceBetween: Araya eşit boşluk
spaceAround: Etraflarına eşit boşluk
spaceEvenly: Her tarafa eşit boşluk

CrossAxisAlignment

Row(
  crossAxisAlignment: CrossAxisAlignment.center, // Dikeyde ortala
  children: [
    Container(width: 50, height: 50, color: Colors.red),
    Container(width: 50, height: 100, color: Colors.blue),
  ],
)

Row için crossAxis dikeydir. Seçenekler:

start: Üste yasla
end: Alta yasla
center: Ortala
stretch: Genişlet

Pratik Örnek: Hesap Makinesi Layout'u

Column(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  children: [
    // Ekran
    Container(
      width: double.infinity,
      height: 100,
      color: Colors.grey[300],
      child: Center(
        child: Text(
          "0",
          style: TextStyle(fontSize: 48),
        ),
      ),
    ),
    // Tuşlar
    Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: [
        butonOlustur("7"),
        butonOlustur("8"),
        butonOlustur("9"),
        butonOlustur("/"),
      ],
    ),
    Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: [
        butonOlustur("4"),
        butonOlustur("5"),
        butonOlustur("6"),
        butonOlustur("*"),
      ],
    ),
  ],
)

İlk Gün Çıkarımlarım

Flutter'da her şey widget
Row yatay, Column dikey, Stack üst üste
Container en çok kullanacağım widget
MainAxisAlignment ve CrossAxisAlignment ile hizalama yapılıyor
Scaffold bir sayfa iskeletidir

Yarın buton tıklama, state yönetimi ve dinamik içerik konularına bakacağım. Bu Flutter yolculuğu gerçekten heyecan verici!

Faydalı Kaynaklar

Benimle Flutter öğrenmek ister misiniz?

Flutter öğrenmeye devam! 🚀

Flutter'a Giriş: Widget Ağacı, Row, Column ve Stack Yapıları