Flutter'a Giriş: Dart Dili ve Widget Sistemi

Flutter'a Giriş: Dart Dili ve Widget Sistemi

Flutter, Google tarafından geliştirilen açık kaynaklı bir UI çerçevesidir. Tek bir kod tabanından Android, iOS, Web, Windows, macOS ve Linux için uygulama üretmenizi sağlar. Temelinde Dart programlama dili ve her şeyin bir Widget olduğu reaktif bir UI sistemi yatar.

Dart Diline Hızlı Bakış

Dart, Flutter'ın resmi dilidir. Nesne yönelimli, tip güvenli ve JIT/AOT derleme desteğine sahiptir:

// Değişkenler ve tipler
String isim = "Flutter";
int versiyon = 3;
double pi = 3.14;
bool aktif = true;
var otomatik = "tip çıkarımı";

// Null safety
String? nullOlabilir = null;
String nullOlamaz = "zorunlu";

// Fonksiyonlar
int topla(int a, int b) => a + b;

// Arrow function
List<int> kareler(List<int> liste) =>
    liste.map((x) => x * x).toList();

// Async/await
Future<String> veriGetir() async {
  await Future.delayed(Duration(seconds: 1));
  return "Veri hazır";
}

Dart'ta Sınıflar ve Mixin

class Hayvan {
  final String isim;
  const Hayvan(this.isim);

  void sesCikar() => print("...");
}

class Kopek extends Hayvan {
  Kopek(String isim) : super(isim);

  @override
  void sesCikar() => print("Hav!");
}

mixin Yuzebilir {
  void yuz() => print(" yüzüyor");
}

class Ordek extends Hayvan with Yuzebilir {
  Ordek() : super("Ördek");
}

Widget Sistemi

Flutter'da her şey bir Widget'tır — metin, buton, padding, layout, hatta animasyonlar bile. Widget'lar immutable'dır; UI değiştiğinde yeni widget örnekleri oluşturulur.

// StatelessWidget — değişmeyen UI
class SelamlamaKarti extends StatelessWidget {
  final String isim;
  const SelamlamaKarti({super.key, required this.isim});

  @override
  Widget build(BuildContext context) {
    return Card(
      elevation: 4,
      child: Padding(
        padding: const EdgeInsets.all(16),
        child: Text(
          "Merhaba, !",
          style: const TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
        ),
      ),
    );
  }
}

StatefulWidget

class SayacWidget extends StatefulWidget {
  const SayacWidget({super.key});

  @override
  State<SayacWidget> createState() => _SayacWidgetState();
}

class _SayacWidgetState extends State<SayacWidget> {
  int _sayac = 0;

  void _artir() => setState(() => _sayac++);
  void _azalt() => setState(() {
    if (_sayac > 0) _sayac--;
  });

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Text("", style: Theme.of(context).textTheme.displayLarge),
        const SizedBox(height: 20),
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            FloatingActionButton(
              onPressed: _azalt,
              heroTag: "azalt",
              child: const Icon(Icons.remove),
            ),
            const SizedBox(width: 20),
            FloatingActionButton(
              onPressed: _artir,
              heroTag: "artir",
              child: const Icon(Icons.add),
            ),
          ],
        ),
      ],
    );
  }
}

Temel Layout Widget'ları

// Column ve Row
Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        Text("Başlık"),
        IconButton(icon: const Icon(Icons.more_vert), onPressed: () {}),
      ],
    ),
    const Divider(),
    const Expanded(child: Text("İçerik buraya gelir")),
  ],
)

// Stack — üst üste bindirme
Stack(
  alignment: Alignment.bottomRight,
  children: [
    Image.network("https://picsum.photos/300"),
    Container(
      color: Colors.black54,
      padding: const EdgeInsets.all(8),
      child: const Text("Altyazı", style: TextStyle(color: Colors.white)),
    ),
  ],
)

// ListView.builder — büyük listeler
ListView.builder(
  itemCount: 100,
  itemBuilder: (context, index) => ListTile(
    leading: CircleAvatar(child: Text("")),
    title: Text("Öğe "),
    trailing: const Icon(Icons.chevron_right),
  ),
)

Theme ve MaterialApp

void main() {
  runApp(const BenimUygulamam());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Flutter Demo",
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
        textTheme: const TextTheme(
          displayLarge: TextStyle(fontSize: 48, fontWeight: FontWeight.bold),
        ),
      ),
      home: const AnaSayfa(),
    );
  }
}

pubspec.yaml — Bağımlılık Yönetimi

name: benim_uygulamam
description: Flutter örnek uygulaması
version: 1.0.0+1

environment:
  sdk: ">=3.0.0 <4.0.0"

dependencies:
  flutter:
    sdk: flutter
  http: ^1.2.0
  provider: ^6.1.2
  shared_preferences: ^2.2.2

dev_dependencies:
  flutter_test:
    sdk: flutter
  flutter_lints: ^3.0.0

Sonuç

Flutter ve Dart, öğrenmesi hızlı, üretkenliği yüksek bir platform çiftidir. Widget sisteminin composable yapısı sayesinde karmaşık UI'lar bile küçük, yeniden kullanılabilir parçalara ayrılabilir. Bir sonraki adım olarak state management çözümlerini (Provider, Riverpod, Bloc) incelemenizi öneririm.