Flutter mı React Native mi
İkisi arasındaki asıl fark tek bir şeydir: Flutter arayüzü kendi çizer, React Native ise gerçek Android ve iOS görünümlerini çağırır. Duyduğunuz diğer bütün farklar, dilden ve ekosistemden uygulamanın hissine kadar, bu tek mimari seçimden çıkar.
- Ders 4 / 8
- Orta
- Ücretsiz, kayıt yok
İki kefe, kazanan yok
Hiçbir kefe daha ağır değil. Onu eğen şey sizin projenizdir.
Flutter kefesi
- Arayüzü kendi çizer, böylece iki platformda da aynıdır
- Bol hareketli özgün bir tasarımı kurmak daha kolaydır
- Dart, durumu koruyan sıcak yeniden yükleme ve önceden derleme ile
- İşletim sisteminin görünüm değişikliği uygulamaya kendiliğinden ulaşmaz
React Native kefesi
- Platformun kendi görünümlerini oluşturur, böylece yerel görünür
- JavaScript ve React, bir web ekibinin zaten bildiği şey
- İşletim sisteminin görünümü değiştiğinde onunla birlikte gider
- İki platform arasında kılı kılına eşliği bedava vermez
Bu ayrım iş uygulamaları içindir. Bir oyun ya da grafik açıdan ağır bir arayüz için bunların hiçbiri varsayılan yanıt değildir.
Son kontrol: Bu dersteki bilgiler ve araç adları bu tarihte kaynaklarıyla yeniden doğrulanır.
İkisi arasındaki gerçek fark nerede?
Her iki projenin kendi belgelerinden birer cümleyle. Flutter ın resmî SSS i, Flutter ın işletim sisteminin yerleşik platform bileşenlerini kullanıp kullanmadığını sorar ve kendi yanıtına tek kelimeyle başlar: hayır. Flutter, Material ve Cupertino dâhil kendi bileşen kümesini sunar; bunları kendi çatısı ve motoru yönetir ve çizer. Karşı tarafta React Native belgeleri, React Native in çalışma zamanında bileşenleriniz için karşılık gelen Android ve iOS görünümlerini oluşturduğunu ve bileşenler Android ile iOS un aynı görünümleriyle desteklendiği için uygulamanın diğer her uygulama gibi göründüğünü, hissettirdiğini ve çalıştığını söyler.
Yani aynı resme iki farklı yol. Flutter bir oyun motoru gibi davranır: kendi tuvalini alır ve her şeyi onun üstüne boyar. Flutter belgeleri, iOS ta Dart kodunun önceden derlenip bir runner projesinin içinde duran yerel bir ARM kitaplığına dönüştüğünü anlatırken bu benzetmeyi kendisi kurar. React Native ise bir sürücü gibi davranır: kendisi hiçbir şey boyamaz ve platform görünümlerine ne yapacaklarını söyler.
Bu farkın kararda kullanılacak iki pratik sonucu var. Birincisi: işletim sistemi bileşenlerinin görünümünü değiştirdiğinde React Native uygulaması onunla birlikte değişir, Flutter uygulaması ise siz güncelleyene kadar olduğu gibi kalır. İkincisi: arayüzünüzün Android ve iOS ta tıpatıp aynı görünmesi gerekiyorsa Flutter bunu size bedava verir, React Native vermez.
Hangisi daha iyi? Hiçbiri. Bunlar iki farklı sorunun yanıtıdır ve dersin kalanı sizin sorunuzun hangisi olduğuyla ilgilidir.

Gerçekten farklı olan altı eksen
Bu altısından hiçbiri tek başına karar vermez. Karar, onların projenizle birleşmesinden çıkar.
Dart mı JavaScript mi: ekibiniz için hangisi daha ucuz?
Flutter, Dart ile yazılır. Dart ın kendi sitesi onu, her platformda hızlı uygulamalar geliştirmek için istemciye göre optimize edilmiş bir dil olarak tanımlar ve Dart ın Flutter ın da temelini oluşturduğunu söyler. Flutter SSS i Dart ın neden seçildiğini açıklar: iki şeyin birleşimi; durumu koruyan sıcak yeniden yüklemeyi mümkün kılan, JIT tabanlı hızlı bir geliştirme döngüsü ve verimli ARM kodu üreten, önceden derleyen bir derleyici.
React Native, React ile birlikte JavaScript ile yazılır. Kendi belgeleri, JavaScript i hem platform arayüzlerine erişmek hem de arayüzünüzün görünümünü ve davranışını React bileşenleriyle tanımlamak için kullandığınızı söyler.
Şimdi pratik soru: hangisi size daha ucuz? Yanıt neredeyse her zaman ekibinizin hâlihazırda bildiğidir. React yazan web geliştiricileriniz varsa React Native aşağı yukarı birinci günden çalışır ve alışkanlıkların ve araçların büyük bölümü taşınır. Ekibinizin web geçmişi yoksa ve sıfırdan başlıyorsa Dart küçük bir dildir ve öğrenmesi JavaScript ten zor değildir; o durumda karar bu eksen değildir.
İşe alım görüşmelerinde sık duyduğumuz ve doğru olmayan bir şey: Dart ın nadir bir dil olduğu ve eleman bulunamadığı. Asıl nadir olan, her iki ekosistemde de deneyimli bir mobil geliştiricidir. React bilen biri illa React Native bilmez; yayın döngüsü, cihaz üzerinde hata ayıklama, imzalama ve platform arayüzleri webde öğrenilmeyen şeylerdir.
Kaynaksız bir sayıya yaslanmadan ekosistemi nasıl tartarsınız?
Karşılaştırma yazıları burada genelde pazar payı sayılarına uzanır. Biz uzanmayacağız; çünkü o sayıların atıf yapılabilir bir kaynağı yok ve zaten sizin kararınızla ilgileri yok. Doğru soru hangi ekosistemin daha büyük olduğu değil; uygulamanızın onlarsız çalışamayacağı üç dört yeteneğin birinde canlı desteğinin bulunup bulunmadığıdır.
O hâlde kendi listenizi yazın. Ödeme geçidi, harita, bildirim, kamera, barkod okuma, hesapla giriş, her neyse. Sonra her birini o ekosistemin paket kaydında arayın: Dart ve Flutter için pub.dev, JavaScript için npm.
Ve her pakette, yıldız saymanın bulamayacağı üç şeye bakın. Bir, son yayın tarihi; bir yıldır yayın yapmamış bir paket, bir sonraki işletim sistemi sürümünde sizin sorununuz olur. İki, paketin yerel bir SDK yı sarmalayıp sarmalamadığı ya da yeniden yazıp yazmadığı; resmî SDK yı sarmalayan bir paket, o SDK güncellendiğinde genelde ayak uydurur. Üç, açık sorunların gerçekten önemsediğiniz platformla ilgili olup olmadığı.
İki ekosistemde de aynı olan ve kararda unutulan bir nokta: donanıma ya da bir platform hizmetine bağlı her yetenek, sonunda birinin yerel kodunu yazmasını gerektirir. İyi bir paket varsa o kişi siz değilsinizdir. Yoksa sizsinizdir ve bu proje tahminine girmelidir. Kendi uygulama geliştirme sayfamız da aynı şeyi söylüyor: herhangi bir yol önermeden önce uygulamanın ne yapması gerektiğini soruyoruz.
Bir pakete yaslanmadan önce onu nasıl tartarsınız
Bunlara bakın
- Son yayın tarihi ve en son işletim sisteminde denenip denenmediği
- Resmî SDK yı sarmalayıp sarmalamadığı ya da yeniden yazdığı
- Gerçekten önemsediğiniz platformdaki açık sorunlar
- Lisans ve ticari kullanımınıza uyup uymadığı
Bunları ölçüt almayın
- Karşılaştırma yazılarındaki pazar payı rakamları
- Son commit tarihine bakmadan yıldız sayısı
- Büyük bir şirketin adını bir yerde anmış olması
Bu sayfa iki ekosistemde de aynı biçimde çalışır. Yıldız sayısı iki tarafta da yok, çünkü bakım hakkında hiçbir şey söylemez.
Peki hangisini seçmeliyim?
Üç soru, bu sırayla. Birincisi: ekibiniz bugün ne biliyor? React yazıyorlarsa varsayılan seçim React Native dir ve ondan uzaklaşmak için bir gerekçeniz olması gerekir. İkincisi: arayüz ne kadar özgün? Tasarımınız hareket ve standart dışı biçimlerle doluysa ve iki platformda kılı kılına aynı olmak zorundaysa, bunun için yapılmış olan Flutter dır. Üçüncüsü: kaç yerel SDK bağlanmalı? Bu sayı büyüdükçe canlı paketi olan ekosistemin ağırlığı artar ve bu, genel olarak değil sizin projeniz için tartılmalıdır.
Ve satış sayfalarında pek yazılmayan konumumuz: orta ölçekli bir İran işletmesinin uygulaması için, yani içerik listesi artı formlar artı ödeme artı bildirimler için, iki çatı da işi görür ve aralarındaki seçim projenin darboğazı değildir. Darboğaz genellikle başka yerdedir: arka uç, arayüz tasarımı ve teslimden sonra onu kimin sürdüreceği. Bir yüklenici çatı seçimini projenin en önemli kararına dönüştürüyorsa muhtemelen asıl konudan kaçıyordur.
Gerçek bir istisna var. Uygulamanız bir oyunsa ya da grafik açıdan ağır bir arayüzü varsa bunların hiçbiri varsayılan yanıt değildir ve o alanın araçlarına gitmelisiniz. Uygulama yalnızca sitenizin mobil bir sürümüyse belki hiç uygulamaya ihtiyacınız yoktur; bu soruyu çatı seçiminden sonra değil önce sorun.
Karar, daha iyi olandan değil elinizdekinden başlar
Ekibiniz bugün ne yazıyor?
React Native
- Dil, kitaplıklar ve alışkanlıklar taşınır
- Arayüz platformun görünümüyle uyumlu kalır
- Bu daldan uzaklaşmak bir gerekçe ister
Flutter
- İki platform arasındaki eşlik bedava gelir
- Bol hareketli özgün tasarım daha ucuza çıkar
- Karşılığında görünümü güncel tutmak size kalır
Bu ağaç, uygulama bir iş uygulamasıyken çalışır. Bir oyun için iki daldan hiçbiri yanıt değildir.
Yapay zekayla hızlı yol
Çatı karşılaştırmalarını saatlerce okuyup hiçbir yere varmayabilirsiniz. Daha hızlı yol soruyu tersine çevirmektir: hangi çatı daha iyi diye sormak yerine kendi özellik listenizi ikiye ayırın; çatının kendi başına hallettikleri ve bir platform yeteneğine uzananlar. Gerçek maliyeti ikinci grup üretir. Bu iş yargı ve genişlik ister; o yüzden ucuz değil güçlü bir model koyun. Güncel tercihimiz bu sitenin yapay zeka bölümünde.
- Özellik listesini sade bir dille, her biri bir cümle olacak şekilde yazın. Örneğin: kullanıcı cep numarasıyla giriş yapar, sipariş verir, öder ve sipariş durumunu bildirimle alır.
- Aşağıdaki tarifi çalıştırın. Çıktı bir tavsiye değil, bir tablodur.
- Tablonun adlandırdığı her platform yeteneğini o platformun resmî belgelerinde arayın. Modelin verdiği bir ad belgelerde yoksa orada durun: modeli uydurmuştur.
- Şimdi ve yalnızca şimdi, o birkaç yetenek için pub.dev ve npm de arama yapın ve bu sayfadaki değerlendirme sayfasını her pakete uygulayın. Çatı kararı bir yazıdan değil, o tablodan çıkar.
Kopyalamaya hazır şablon
Bu, Android ve iOS ta yayımlanacak bir mobil uygulamanın özellik listesidir.
Her özellik için, şu dört sütunla ve fazladan hiçbir açıklama olmadan tek bir tablo satırı ver:
1) Özelliğin kendisi, benim yazdığım cümleyle.
2) "Arayüz" ya da "platform yeteneği". Yalnızca ekran, form, liste ve gezinme ise arayüz. Donanıma ya da bir işletim sistemi hizmetine uzanıyorsa platform yeteneği.
3) Yalnızca platform yeteneği satırları için: o yeteneğin işletim sistemi düzeyindeki adı, Android ve iOS için ayrı ayrı. Platformun kendi resmî arayüz ya da çatı adını yaz.
4) Kısa bir risk: o yetenekte pratikte genellikle bozulan şey.
Katı kurallar:
- Hiçbir üçüncü taraf paket ya da kitaplık adı yazma. Hiçbir sürüm numarası yazma.
- Hangi çatının daha iyi olduğunu tavsiye etme. Tabloyu ver ve dur.
- Bir satırdan emin değilsen üçüncü sütuna "emin değilim" yaz ve tahmin etme.
Özellikler:
{özellik listesi}
Çıktıya güvenmeden önce: Üçüncü sütun, modelin bir ad uydurabileceği yerin ta kendisidir ve uydurulmuş bir ad tam olarak gerçek bir ad gibi görünür. Verdiği her adı resmî Android ve Apple belgelerinde arayın; yoksa o satırı atın. Ve pub.dev ile npm deki gerçek paketlere kendiniz bakmadan bu tablodan hiçbir çatı kararı çıkarmayın. Tablo, denetimin sonucu değil, nelerin denetleneceğinin listesidir.
Bu işte yapay zeka
Çatı seçiminde yapay zeka bir işte yararlı, bir başkasında tehlikelidir. Yararlı: gereksinimleri platform yeteneklerine ayırmak; yukarıdaki hızlı yolda anlatılan iş, çünkü genişlik ister ve doğrulaması kolaydır. Tehlikeli: hangi çatının daha iyi olduğunu ya da hangi paketi kuracağınızı sormak, çünkü modelin yanıtı iki durumda da kendinden emin görünür ve denetlemesi daha zordur.
Gerçekten işe yarayan araçlar
- Claude Gereksinimleri platform yeteneklerine ayırmakta ve bir pakete yaslanmadan önce kaynağını okumakta iyi. İran, Anthropic'in desteklenen ülkeler listelerinin hiçbirinde yok; bunu Anthropic'in kendi sayfasında okuduk.
- Gemini Kod üzerindeki daha hacimli geçişler ve belge özetleme için uygun maliyetli. Google'ın kendi sayfası Gemini web uygulamasının 230'dan fazla ülke ve bölgede çalıştığını söylüyor ve İran o listede yok.
- Claude Code Kod aşamasına geldiğinizde bir komut satırı aracı, yapıştırılmış metin yerine gerçek depo üzerinde çalışır. Claude Code aynı Anthropic hesabı üzerinde çalışıyor ve İran desteklenen ülkeler listesinde değil.
Nerede geri teper
Burada belirli bir risk var ve bir paket adı taşıyor. Modele belirli bir iş için hangi paketi kuracağınızı sorduğunuzda yanıt genelde makul görünen bir addır ve o ad yoksa bir paket kaydında boş bir adı aramış olursunuz. Biri o adı kaydettiğinde iş ciddileşir. Yukarıdaki tarifin modele paket adı vermeyi yasaklamasının nedeni tam da budur: siz platform yeteneğinin adını alırsınız ve paketi pub.dev ile npm de kendiniz bulursunuz.
İkinci risk daha yumuşak ve danışmanlık görüşmelerinde sık görüyoruz: model iki çatı hakkında da olumlu yanıt verir, çünkü ikisi de verisinde övülmüştür. Flutter projem için iyi mi diye sorun, evet alırsınız; aynı soruyu React Native için sorun, yine evet alırsınız. Konumumuz: modelden seçmesini istemeyin, neleri denetlemeniz gerektiğini saymasını isteyin. Her aracın İran'dan nasıl ödenebileceği için satın alma rehberine bakın.
Kaynaklar: Flutter FAQ: does Flutter use the built-in platform widgets React Native docs: Core Components and Native Components Anthropic: supported countries Google: where Gemini Apps are available
Bu tavsiyenin sınırı
Bu karşılaştırma yalnızca mobil uygulamalar hakkındadır. İki çatının masaüstünden webe başka hedefleri de var; orada denklem değişir ve burada yazacağımız birinci elden bir deneyimimiz yok. İkincisi, ikisi için hiçbir performans sayısı vermedik ve bu bilinçli: bir performans rakamı, hangi cihazda, hangi arayüzle ve hangi sürümde ölçüldüğü söylenmeden anlamsızdır ve yazılarda dolaşan sayılar bunu söylemez. Üçüncüsü, uygulamayı kuran ekibin ikisinden birinde gerçek deneyimi varsa o eksen, bu sayfadaki her mimari savdan ağır basar.
Kendi işimizden
Aynı mimari seçimi biz webde yaptık ve faturasını da ödedik. Bu sitedeki şekillerin hiçbiri, diyagramlardan grafiklere, hazır bir kitaplıkla çizilmiyor: rgb.ir teması 52 arketiplik kendi şekil kitaplığına sahip ve her biri inc/diagram*.php dosyalarında bir rgb_dg_* işlevi. Ölçüsü basit ve kendiniz sayabilirsiniz: assets/css/diagram.css içinde url( sayısı sıfır, yani hiçbir görsel yüklenmiyor ve assets/js klasöründeki hiçbir JavaScript dosyası bu şekillere dokunmuyor.
Bu seçimin faydası Flutter ın faydasıdır: çıktı her ekranda aynıdır ve üçüncü taraf bir kitaplık yolun yarısında kaybolmaz. Bedeli de Flutter ın bedelidir ve bu yıl onu ödedik: bu sitenin Öğrenme bölümü elimizde olmayan şekillere ihtiyaç duyduğunda onları bizim için kimse kurmadı. inc/diagram-lib2.php dosyası kendi yazdığımız on beş yeni arketip taşıyor. Hazır bir kitaplık o on beşini bedava verir ve karşılığında nasıl göründüklerine kendisi karar verirdi. Bu dersin konusu tam da bu takastır.
Gerçek devam soruları
İkisinden hangisi daha hızlı?
Bu biçimde bir yanıtı yoktur; biri size bir sayı verdiğinde hangi cihazda ve hangi arayüzle ölçüldüğünü sorun. Sıradan bir iş uygulaması için ikisi de kullanıcının fark ettiği eşikten hızlıdır ve yavaşlık genelde çatıdan değil ağdan ve arka uçtan gelir.
Bu ikisinden web ve masaüstü sürümü de çıkar mı?
İkisinin de mobilin ötesinde hedefleri var ve kendi belgeleri bunu söylüyor. Ama pratik bir nokta: tek komutla bir derleme üretmek o sürümün hazır olduğu anlamına gelmez. Başparmak için tasarlanmış bir arayüz masaüstünde tuhaf görünür, tersi de öyle; o sürüm kendi tasarım işini ister.
Sonradan pişman olursak geçiş ne kadar zor?
Arayüz katmanı fiilen yeniden yazılır, çünkü birinin arayüz kodunun hiçbiri diğerinde kullanılamaz. Ayakta kalan şey, baştan ayrı tuttuysanız, arka uç, API ve iş mantığıdır. Bu tek cümle bile, hangi çatıyı seçerseniz seçin, mantığı arayüzden ayrı yazmak için iyi bir gerekçedir.