Flutter ile Mobil Uygulama Geliştirmeye Başlangıç

Flutter, Google'ın geliştirdiği açık kaynaklı bir arayüz framework'üdür: tek bir Dart kod tabanından iOS, Android, web ve masaüstü uygulaması çıkarmamızı sağlar. Bu yazı serinin giriş kapısı. Kurulumdan ilk çalışan uygulamaya kadar olan yolu, yolda en çok takılınan noktalarla birlikte anlatıyorum; sonunda da buradan sonra hangi konuya hangi sırayla geçmek gerektiğini bulacaksınız.

Canlı Demo: Flutter Başlangıç Örneği

Hiçbir şey kurmadan önce Flutter'ın neye benzediğini tarayıcıda görebilirsiniz. İlk Flutter uygulamanızı interaktif olarak deneyin:

💡 Eğer yukarıdaki örnek açılmazsa, DartPad linkine tıklayarak yeni sekmede çalıştırabilirsiniz.

Koddaki bir metni ya da rengi değiştirip tekrar çalıştırmak, Flutter'ın temel fikrini anlamak için yeterli: arayüz, iç içe geçmiş widget'lardan oluşan bir koddur.

Flutter Nasıl Çalışır?

Flutter, platformun kendi butonlarını ve listelerini kullanmaz. Ekrandaki her pikseli kendi çizim motoruyla çizer. Bunun pratikteki sonucu, aynı kodun iOS'ta ve Android'de aynı görünmesi ve tasarımın platform kısıtlarına takılmamasıdır. Kod Dart diliyle yazılır; Dart, Java, C# ya da JavaScript bilen birinin birkaç günde alışabileceği, tip güvenli ve null-safe bir dildir:

void main() {
  print('Merhaba Flutter!');

  var isim = 'Ahmet';
  int yas = 25;

  print('Benim adım $isim ve $yas yaşındayım');
}

Geliştirme sırasında en çok hissedilen özellik ise hot reload'dur: kodu kaydettiğimizde değişiklik, uygulama yeniden başlamadan ve ekrandaki durum kaybolmadan saniyeler içinde cihaza yansır.

Kurulum: Genel Resim

Sürüm numaraları ve indirme adımları sık değiştiği için burada adım adım ekran görüntüsü vermiyorum; güncel adımlar her zaman resmî kurulum sayfasında yer alır. Bilmeniz gereken, kurulumun üç parçadan oluştuğudur:

1. Flutter SDK: Framework'ün kendisi ve flutter komut satırı aracı. Dart SDK'sı bunun içinde gelir, ayrıca kurulmaz. SDK indirildikten sonra bin klasörünün sistemin PATH değişkenine eklenmesi gerekir.
2. Editör: VS Code ya da Android Studio. İkisinde de Flutter eklentisini kurmak gerekir; eklenti kod tamamlama, hata ayıklama ve hot reload düğmelerini getirir. VS Code daha hafiftir, Android Studio ise emülatör yönetimini aynı pencerede sunar.
3. Hedef platformun araçları: Android için Android Studio ile birlikte gelen Android SDK ve bir emülatör. iOS için Xcode; bu yüzden iOS'a derleme yapmak için bir Mac gerekir. Windows'ta çalışıyorsanız Android ve web hedefleriyle başlayabilirsiniz.

İlk gün her platformu kurmaya çalışmak gereksiz. Tek bir hedef, örneğin Android emülatörü ya da Chrome, öğrenmeye başlamak için yeterlidir.

flutter doctor ile Kurulumu Doğrulama

Kurulumdan sonra ilk çalıştıracağımız komut:

flutter doctor

Bu komut ortamı tarar ve her bileşen için bir satır yazar. Başında onay işareti olan satırlar hazırdır, ünlem ya da çarpı olanlar eksiktir ve altlarında ne yapılması gerektiği yazar. Buradaki önemli nokta şu: bütün satırların yeşil olması gerekmez. Yalnızca Android için geliştirme yapacaksanız Xcode ya da Visual Studio satırındaki uyarı sizi engellemez. Bir uyarının ayrıntısını görmek için flutter doctor -v kullanılır.

İlk Projeyi Oluşturma ve Çalıştırma

flutter create ilk_uygulama
cd ilk_uygulama
flutter run

flutter create çalışan bir örnek uygulama üretir. flutter run, bağlı bir cihaz ya da açık bir emülatör varsa uygulamayı oraya yükler. Birden fazla hedef varsa hangisini istediğimizi sorar; doğrudan seçmek için -d kullanılır:

flutter devices          # Kullanılabilir cihazları listeler
flutter emulators        # Kurulu emülatörleri listeler
flutter run -d chrome    # Tarayıcıda çalıştırır

Editör kullanıyorsanız aynı işi sağ alttaki cihaz seçiciden hedefi seçip F5'e basarak yaparsınız.

Proje Yapısı

Oluşan klasörde ilk bakışta çok dosya var, ama başlangıçta yalnızca ikisiyle çalışırız:

Yol	Ne işe yarar?
lib/main.dart	Uygulamanın giriş noktası. Yazdığımız Dart kodunun tamamı lib/ altında durur
pubspec.yaml	Proje adı, bağımlılıklar (paketler), resim ve font gibi assets tanımları
android/, ios/, web/	Platforma özel kabuk projeler. İzinler, uygulama adı ve ikon gibi ayarlar için girilir
test/	Otomatik testler
analysis_options.yaml	Kod analiz (lint) kuralları
build/, .dart_tool/	Otomatik üretilen dosyalar; elle dokunulmaz

Paket eklemek için pubspec.yaml'ı elle düzenlemek yerine flutter pub add paket_adi komutu kullanılabilir. Resim ve ikon tarafı için assets ile resim ekleme ve uygulama ikonu oluşturma yazıları sıradaki adımlardır.

İlk Uygulamanın Kodu

lib/main.dart içindeki her şeyi silip en küçük anlamlı uygulamayı yazalı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: 'İlk Uygulamam',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.orange),
      ),
      home: Scaffold(
        appBar: AppBar(title: const Text('Merhaba Flutter')),
        body: const Center(
          child: Text(
            'Flutter ile uygulama geliştiriyorum!',
            style: TextStyle(fontSize: 24),
          ),
        ),
      ),
    );
  }
}

Yukarıdan aşağı okuyalım. main() uygulamanın başladığı yerdir ve runApp ile kök widget'ı ekrana verir. MaterialApp tema, başlık ve sayfa geçişleri gibi uygulama genelindeki ayarları taşır. Scaffold tek bir sayfanın iskeletidir: üst çubuk, gövde, varsa alt menü. Center ve Text ise içeriğin kendisi. Flutter'da her şey widget'tır; hizalama bile (Center) bir widget'tır.

Widget'lar ikiye ayrılır. StatelessWidget yalnızca aldığı veriyi gösterir. StatefulWidget ise zamanla değişen bir değer tutar ve setState çağrıldığında kendini yeniden çizer.

Hot Reload ve Hot Restart

Uygulama çalışırken metni değiştirip dosyayı kaydedin; ekran hemen güncellenir. Terminalden çalıştırıyorsanız aynı işi r tuşu yapar.

• Hot reload (r): Değişen kodu çalışan uygulamaya enjekte eder ve build metodlarını yeniden çalıştırır. Sayaç değeri, açık olan sayfa, form alanlarındaki metin gibi durumlar korunur.
• Hot restart (R): Uygulamayı baştan başlatır, durum sıfırlanır. main() içinde, initState içinde ya da global ve static değişkenlerin başlangıç değerlerinde yapılan değişiklikler ancak bununla görünür.
• Tamamen durdurup yeniden çalıştırma: Yerel (native) tarafa dokunan değişikliklerde gerekir; örneğin platform kodu içeren bir paket eklendiğinde ya da android/ ve ios/ altındaki dosyalar değiştiğinde.

"Kodu değiştirdim ama ekranda bir şey olmadı" durumunda sırayla bu üçünü denemek çoğu zaman sorunu çözer.

Mini Senaryo: Su Takip Sayacı

Hazır sayaç örneğini ezberlemek yerine küçük ama gerçek bir ekran yazalım: gün içinde içilen su bardaklarını sayan ve hedefe ne kadar kaldığını gösteren bir sayfa. MaterialApp içindeki home değerini const WaterPage() yapmanız yeterli.

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

  @override
  State<WaterPage> createState() => _WaterPageState();
}

class _WaterPageState extends State<WaterPage> {
  static const int _goal = 8;
  int _glasses = 0;

  @override
  Widget build(BuildContext context) {
    final done = _glasses >= _goal;

    return Scaffold(
      appBar: AppBar(title: const Text('Su Takibi')),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Text(
              '$_glasses / $_goal bardak',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
            const SizedBox(height: 16),
            SizedBox(
              width: 220,
              child: LinearProgressIndicator(
                value: (_glasses / _goal).clamp(0.0, 1.0),
              ),
            ),
            const SizedBox(height: 16),
            Text(done ? 'Günlük hedef tamam!' : 'Devam, az kaldı.'),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => setState(() => _glasses++),
        child: const Icon(Icons.local_drink),
      ),
    );
  }
}

Butona her basışta setState içindeki değişken artıyor ve Flutter build metodunu yeniden çalıştırıp ekranı güncelliyor. Birkaç bardak ekledikten sonra başlıktaki metni ya da bir rengi değiştirip kaydedin: sayaç sıfırlanmadan ekran güncellenir. Hot reload'un durumu koruması tam olarak budur. Bu ekrandaki parçaların ayrıntıları için FloatingActionButton ve giriş widget'ları ile durum göstergeleri yazılarına bakabilirsiniz.

Ne Zaman Kullanılır, Ne Zaman Kullanılmaz?

Flutter şu durumlarda güçlü bir tercihtir: iOS ve Android'e aynı anda çıkmak isteyen küçük bir ekip ya da tek geliştirici, markaya özel ve iki platformda aynı görünmesi gereken bir tasarım, hızlı prototip ihtiyacı.

Şu durumlarda ise önce düşünmek gerekir:

• Uygulamanın özü platforma özel yeteneklerse (ana ekran widget'ları, saat uygulamaları, işletim sisteminin en yeni API'leri), bu kısımlar yine yerel kodla yazılır. Flutter bunu destekler ama "tek kod" avantajı o oranda azalır.
• Yalnızca tek bir platform hedefleniyorsa ve ekip o platformun yerel dilini zaten biliyorsa, Swift ya da Kotlin ile devam etmek daha az katman demektir.
• İçerik ağırlıklı ve arama motorlarından trafik bekleyen bir web sitesi için Flutter web doğru araç değildir; orada klasik web teknolojileri daha uygundur.

İki popüler çapraz platform seçeneğini karşılaştırmak isterseniz Flutter mı React Native mi yazısında ayrıntılı bir değerlendirme var.

Sık Yapılan Hatalar

1. flutter komutunun bulunamaması

Belirti: Terminalde command not found: flutter, Windows'ta "'flutter' is not recognized as an internal or external command". SDK indirilmiş ama bin klasörü PATH'e eklenmemiştir. Ekledikten sonra terminali kapatıp yeniden açmak gerekir; açık olan pencere eski PATH ile çalışmaya devam eder.

2. Android lisanslarının kabul edilmemesi

Belirti: flutter doctor çıktısında Android satırında lisanslarla ilgili bir uyarı. Çözüm aşağıdaki komutu çalıştırıp çıkan sorulara y ile cevap vermektir:

flutter doctor --android-licenses

Aynı satırda "cmdline-tools component is missing" yazıyorsa Android Studio'da SDK Manager'ı açıp SDK Tools sekmesinden "Android SDK Command-line Tools" seçeneğini kurmak gerekir.

3. Geçersiz proje adı

Belirti: flutter create Ilk-Uygulama komutu "Ilk-Uygulama" is not a valid Dart package name. hatasıyla durur. Proje adı bir Dart paket adıdır: küçük harf, rakam ve alt çizgiden oluşmalı, rakamla başlamamalıdır. ilk_uygulama geçerlidir. Mağazada görünen uygulama adı bundan bağımsızdır ve sonradan platform klasörlerinden ayarlanır.

4. Çalıştıracak cihaz bulunamaması

Belirti: flutter run "No supported devices connected" benzeri bir mesajla çıkar. Emülatör açık değildir ya da telefon bağlantısı tanınmamıştır. Emülatörü Android Studio'nun Device Manager ekranından ya da flutter emulators --launch <emulator_id> ile başlatabilirsiniz. Gerçek Android cihazda geliştirici seçeneklerinden USB hata ayıklamayı açmak gerekir. Hiçbiri yoksa flutter run -d chrome her zaman elinizin altındadır.

Buradan Sonra Ne Öğrenmeli?

Flutter öğrenirken en sık yapılan hata, Dart'ı atlayıp doğrudan widget ezberlemeye girişmektir. Önerdiğim sıra şöyle:

1. Dart temelleri. Önce tip dönüşümleri ve static kavramı, ardından List, Set ve Map koleksiyonları. Flutter'da ekrana basılan hemen her şey bir listeden gelir.
2. Nesne yönelimli Dart. Her widget bir sınıftır ve extends ile yazılır; bu yüzden kalıtım ve polymorphism konusu Flutter kodunu okumayı doğrudan kolaylaştırır.
3. Asenkron programlama. İnternetten veri çekmek ya da dosya okumak Future ile çalışır; try-catch ve async/await yazısı bu kısmı anlatıyor.
4. Widget ağacı ve yerleşim. Widget ağacı, Row, Column ve Stack yazısı, ekranı nasıl böleceğinizi gösteren asıl Flutter başlangıcıdır.
5. Kendi widget'larınız ve sayfalar arası geçiş. Tekrar eden parçaları kendi widget'ınıza çıkarmayı ve Navigator ile sayfa geçişini öğrendiğinizde çok sayfalı gerçek bir uygulama yazabilecek durumdasınız demektir.

Konuların tamamı sırasıyla Flutter dersleri sayfasında listeleniyor. Bu sırayı birebir derslerle yürümeyi düşünüyorsanız en iyi Flutter öğretmenini seçerken nelere bakmalı yazısı değerlendirme ölçütlerini topluyor. Resmî kaynak olarak da Flutter dokümantasyonu ve Dart dil rehberi her zaman açık bir sekmede durmayı hak eder.

Sık Sorulan Sorular

Flutter öğrenmek için önce Dart bilmek gerekir mi?

Ayrı bir Dart kursu bitirmek şart değil, ama değişkenler, fonksiyonlar, sınıflar, koleksiyonlar ve async/await konularını bilmeden widget kodunu okumak zorlaşır. Daha önce başka bir dilde programlama yaptıysanız Dart temellerine birkaç gün ayırmak yeterlidir.

Windows bilgisayarda iOS uygulaması geliştirilebilir mi?

Kodu Windows'ta yazıp Android ve web üzerinde test edebilirsiniz, ancak iOS derlemesi Xcode gerektirir ve Xcode yalnızca macOS'ta çalışır. iOS sürümünü çıkarmak için bir Mac'e ya da macOS sunan bir bulut derleme servisine ihtiyaç olur.

Android Studio mu, VS Code mu kullanmalıyım?

İkisi de resmî olarak desteklenir ve Flutter eklentisiyle aynı temel özellikleri sunar. VS Code daha hafif ve hızlı açılır; Android Studio emülatör ve Android SDK yönetimini aynı yerde toplar. Android hedefliyorsanız Android Studio'yu SDK için kurup kodu VS Code'da yazmak yaygın bir düzendir.

flutter doctor'daki bütün uyarıları gidermek zorunda mıyım?

Hayır. Yalnızca hedeflediğiniz platformla ilgili satırların sorunsuz olması yeterlidir. Örneğin sadece Android ve web için geliştirme yapıyorsanız Xcode ya da Visual Studio ile ilgili uyarılar çalışmanızı engellemez.