Flutter vs React Native: Hangisini Seçmelisiniz?

# Flutter vs React Native: Hangisini Tercih Etmeli?

Cross-platform geliştirmede en çok karşılaşılan soru: Flutter mı, React Native mı? Kısa cevap "ekibine ve ürününe bağlı" ama bu cevap pazartesi sabahı karar vermenize yetmez. Bu rehberde gerçek trade-off'ları, kod karşılaştırmalarını ve somut bir karar çerçevesi bulacaksınız.

2026'da Cross-Platform'un Durumu

Her iki framework de artık olgunluk döneminde. Flutter'ı Google Pay, BMW ve Alibaba kullanıyor. React Native tarafında Meta, Shopify ve Discord var. İkisi de oyuncak değil. Soru "hangisi daha iyi" değil — "sizin durumunuz için hangisi daha doğru."

Mimari: İkisi Nasıl Çalışıyor?

Flutter'ın Yaklaşımı

Flutter, tüm rendering pipeline'ının sahibi. Platform'un native UI bileşenlerini kullanmaz — ekrandaki her pikseli kendi motoru (Skia, artık Impeller'a geçiş sürecinde) ile çizer. Dart kodunuz doğrudan native ARM koduna derlenir. Arada bridge yok, serializasyon maliyeti yok.

React Native'in Yaklaşımı

React Native, New Architecture ile (Fabric + TurboModules + JSI) devasa bir mimari dönüşüm geçirdi. Eski bridge — JSON serializasyon darboğazı — tarih oldu. JSI sayesinde JavaScript, C++ host objelerine doğrudan referans tutabiliyor. Senkron ve çok daha hızlı native çağrılar mümkün. Ama sonuçta UI'ınız gerçek platform-native bileşenler üzerinden render ediliyor.

Pratikte Ne Anlama Geliyor?

Flutter, platformlar arası piksel bazında tutarlılık sağlıyor ama bazı ince detaylarda (scroll fiziği, metin seçimi, platform alışkanlıkları) "native hissetmeyebiliyor." React Native gerçek native bileşenler sunuyor ama iOS ile Android arasında arada sırada render tutarsızlıkları ile karşılaşıyorsunuz.

Kod Karşılaştırması: Aynı Özelliği İkisinde de Yazalım

Basit bir profil kartı yapalım: avatar, isim ve "Takip Et" butonu.

Flutter (Dart)

class ProfilKarti extends StatefulWidget {
  final String isim;
  final String avatarUrl;

  const ProfilKarti({
    super.key,
    required this.isim,
    required this.avatarUrl,
  });

  @override
  State<ProfilKarti> createState() => _ProfilKartiState();
}

class _ProfilKartiState extends State<ProfilKarti> {
  bool _takipEdiliyor = false;

  @override
  Widget build(BuildContext context) {
    return Card(
      elevation: class="code-number">4,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(class="code-number">16),
      ),
      child: Padding(
        padding: const EdgeInsets.all(class="code-number">16),
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            CircleAvatar(
              radius: class="code-number">40,
              backgroundImage: NetworkImage(widget.avatarUrl),
            ),
            const SizedBox(height: class="code-number">12),
            Text(
              widget.isim,
              style: Theme.of(context).textTheme.titleLarge,
            ),
            const SizedBox(height: class="code-number">12),
            FilledButton.tonalIcon(
              onPressed: () =>
                  setState(() => _takipEdiliyor = !_takipEdiliyor),
              icon: Icon(
                  _takipEdiliyor ? Icons.check : Icons.person_add),
              label: Text(_takipEdiliyor ? class="code-string">'Takip Ediliyor' : class="code-string">'Takip Et'),
            ),
          ],
        ),
      ),
    );
  }
}

React Native (TypeScript)

import { useState } from class="code-string">'react';
import { View, Text, Image, Pressable, StyleSheet } from class="code-string">'react-native';

interface ProfilKartiProps {
  isim: string;
  avatarUrl: string;
}

export function ProfilKarti({ isim, avatarUrl }: ProfilKartiProps) {
  const [takipEdiliyor, setTakipEdiliyor] = useState(false);

  return (
    <View style={styles.kart}>
      <Image source={{ uri: avatarUrl }} style={styles.avatar} />
      <Text style={styles.isim}>{isim}</Text>
      <Pressable
        style={[styles.buton, takipEdiliyor && styles.butonTakip]}
        onPress={() => setTakipEdiliyor(!takipEdiliyor)}
      >
        <Text style={styles.butonMetin}>
          {takipEdiliyor ? class="code-string">'✓ Takip Ediliyor' : class="code-string">'Takip Et'}
        </Text>
      </Pressable>
    </View>
  );
}

const styles = StyleSheet.create({
  kart: {
    padding: class="code-number">16,
    borderRadius: class="code-number">16,
    backgroundColor: class="code-string">'#fff',
    alignItems: class="code-string">'center',
    elevation: class="code-number">4,
    shadowColor: class="code-string">'#class="code-number">000',
    shadowOffset: { width: class="code-number">0, height: class="code-number">2 },
    shadowOpacity: class="code-number">0.15,
    shadowRadius: class="code-number">8,
  },
  avatar: { width: class="code-number">80, height: class="code-number">80, borderRadius: class="code-number">40 },
  isim: { fontSize: class="code-number">20, fontWeight: class="code-string">'class="code-number">600', marginTop: class="code-number">12 },
  buton: {
    marginTop: class="code-number">12,
    paddingVertical: class="code-number">10,
    paddingHorizontal: class="code-number">24,
    borderRadius: class="code-number">20,
    backgroundColor: class="code-string">'#6200ee',
  },
  butonTakip: { backgroundColor: class="code-string">'#e0e0e0' },
  butonMetin: { color: class="code-string">'#fff', fontWeight: class="code-string">'class="code-number">600' },
});

Koddan Çıkan Dersler

Flutter'ın widget ağacı daha uzun ama kendi içinde bütün. Tema, layout ve bileşenler aynı soyutlamanın parçası. React Native, yapıyı (JSX) stilden (StyleSheet) ayırıyor — web geliştiricilerine tanıdık geliyor ama platform-spesifik gölge tanımları gerekiyor (iOS vs Android farkına dikkat edin). Deneyimlerime göre Flutter projelerinde stil tutarlılığı doğal olarak sağlanıyor, React Native projelerinde ise bunun için daha sıkı konvansiyonlar koymak gerekiyor.

Detaylı Karşılaştırma Tablosu

| Kriter | Flutter | React Native | Not |

|--------|---------|--------------|-----|

| Rendering | Kendi motoru (Impeller) | Fabric ile native bileşenler | Flutter = tutarlılık; RN = native doğallık |

| Dil | Dart | JavaScript / TypeScript | TS ekosistemi çok daha geniş |

| Hot Reload | Mükemmel, state korunur | Fast Refresh, state korunur | İkisi de geliştirici deneyiminde üst düzey |

| Performans | Native'e yakın, animasyonlarda güçlü | New Architecture ile ciddi iyileşme | Yoğun animasyon işlerinde Flutter öne geçiyor |

| Uygulama Boyutu | ~5-8 MB taban | ~3-5 MB taban | Flutter kendi motorunu taşıyor |

| Platform Hedefleri | iOS, Android, Web, macOS, Windows, Linux | iOS, Android, (Web: react-native-web) | Flutter'ın multi-platform hikayesi daha olgun |

| Native Erişim | Platform channels, FFI | TurboModules, JSI | RN'in yeni modül sistemi çok daha hızlı |

| State Yönetimi | Riverpod, Bloc, Provider | Redux, Zustand, Jotai, React Query | RN, geniş React ekosisteminden faydalanıyor |

| Test | Widget testleri, integration testleri | Jest, Detox, RNTL | İkisinde de sağlam test altyapısı var |

| Öğrenme Eğrisi | Dart + widget modeli | React + native primitifler | Web geliştiricileri için RN'de daha düşük giriş bariyeri |

| İşe Alım | Büyüyen ama daha küçük yetenek havuzu | Çok daha geniş havuz (React/web'den) | Çoğu pazarda RN için eleman bulmak daha kolay |

| Kurumsal Benimsenme | Otomotiv, fintech'te güçlü | E-ticaret, sosyal medyada güçlü | İkisi de ciddi kurumsal referanslara sahip |

Performans Detaylı Bakış

Animasyonlar ve UI Rendering

Flutter, tüm rendering pipeline'ını kontrol ettiği için tutarlı 60/120fps sunabiliyor. Her iki framework ile de çalışmış biri olarak söyleyebilirim: fark en çok karmaşık, katmanlı animasyonlarda ortaya çıkıyor — parallax efektli sayfa geçişleri, custom painter'lar, parçacık sistemleri. Flutter bunları JS thread'i düşünmeden hallediyor.

React Native'in New Architecture'ı aradaki farkı önemli ölçüde kapattı. Standart UI'lar için — listeler, formlar, navigasyon geçişleri — fark hissedilmiyor. Hâlâ geride kaldığı alan, JS-native sınırını sık geçen yoğun custom animasyonlar.

Açılış Süresi

Flutter uygulamalarının soğuk başlatma süresi, motor yüklenmesi nedeniyle biraz daha uzun. React Native özellikle Android'de daha hızlı açılıyor. Çoğu uygulama için bu fark 100-300ms — hızlı açılması gereken araçlarda önemli, bankacılık uygulamalarında değil.

Bellek Kullanımı

Birlikte çalıştığım ekiplerin gözlemi: Flutter uygulamaları motor yükü nedeniyle taban bellek kullanımında %10-20 daha yüksek. Modern cihazlarda bu ihmal edilebilir düzeyde. Ama gelişmekte olan pazarlardaki düşük segmenta cihazları hedefliyorsanız, mutlaka benchmark yapın.

Flutter'ı Ne Zaman Seçmeli?

Güçlü Sinyaller

Zayıf Sinyaller (Tek Başına Yetmez)

React Native'i Ne Zaman Seçmeli?

Güçlü Sinyaller

Zayıf Sinyaller (Tek Başına Yetmez)

Sık Yapılan Karar Hataları

Hata 1: Benchmark'lara Göre Seçim Yapmak

Sentetik benchmark'lar (Fibonacci hesaplamaları, JSON parse hızı) gerçek dünya performansı hakkında neredeyse hiçbir şey söylemez. Mobil uygulamalardaki darboğaz neredeyse her zaman ağ I/O'su, rendering karmaşıklığı veya state yönetimidir — ham hesaplama hızı değil.

Hata 2: Ekibin DNA'sını Görmezden Gelmek

React ekiplerinin "teknik olarak üstün" diye Flutter seçip aylarca alışılmadık pattern'larla boğuştuğunu gördüm. En iyi framework, ekibinizin ürün çıkarabildiği framework'tür. İyi tasarlanmış bir React Native uygulaması, kötü yapılandırılmış bir Flutter uygulamasını her zaman geçer.

Hata 3: "Native His" Argümanını Abartmak

Kullanıcılar, bir butonun gerçek UIKit bileşeni olup olmadığını geliştiricilerin sandığından çok daha az önemsiyor. Önem verdikleri şeyler: tepki süresi, akıcı scroll ve uygulamanın çökmemesi. İkisi de düzgün yapıldığında bunları sağlıyor.

Hata 4: Cross-Platform = "Bir Yaz, Her Yerde Çalışsın" Sanmak

Her iki framework'te de push notification, deep linking, izinler ve arka plan görevleri gibi konularda platforma özel kod yazmanız gerekir. Hangi framework'ü seçerseniz seçin, geliştirme süresinin %15-25'ini platforma özel işlere ayırın.

Hata 5: Prototip Yapmamak

Bir haftanız bile varsa, aynı küçük özelliği iki framework'te de geliştirin. Uygulamalı deneyim, hiçbir karşılaştırma yazısının söyleyemeyeceği şeyleri ortaya çıkarır — ekibinizin araçlara nasıl tepki verdiği, debugging deneyimi, deployment pipeline'ı.

Karar Çerçevesi

Bu beş soruyu sırayla sorun. Net cevap veren ilk soru muhtemelen kararınızdır:

Sonuç

2026'da Flutter ile React Native arasında seçim yapmak bir kazanan belirlemek değil — ikisi de kazanan. Mesele dürüst bir öz değerlendirme: ekibiniz ne biliyor, ürününüz neye ihtiyaç duyuyor, zaman kısıtlarınız ne diyor? Bu soruların cevaplarıyla örtüşen framework doğru olandır.

Projenize ve ekibinize özel bir framework karar atölyesi düzenleyebilirim.