Sık sorulan soru

Viski ile Flutter geliştirme mümkün mü?

Kısa cevap: hayır. Viski, projeleri React tabanlı web uygulamaları olarak üretir. React Native veya Flutter ile yerel mobil derleme bu araç setinin parçası değildir; Flutter SDK ve Dart derleyicisi burada bulunmaz.

Flutter kullanmak istiyorsanız projeyi yerel makinenizde geliştirmeniz gerekir. Aşağıda iki framework’ü karşılaştırdık, ne zaman hangisini seçeceğinizi anlattık ve React bilginizi Flutter’a nasıl taşıyacağınızı gösterdik.

Karşılaştırmaya git Flutter’a nasıl başlanır?

Viski üretir

React web

Next.js + TypeScript + Tailwind

Viski desteklemez

Flutter / RN derleme

Dart SDK ve native toolchain yok

Alternatif yol

Flutter Web

Yerelde derle, statik çıktıyı yayınla

Karşılaştırma

Flutter ve React Native yan yana

Dil, render yaklaşımı, performans, ekosistem ve öğrenme eğrisi açısından iki framework’ün temel farkları.

Kriter	Flutter	React Native
Dil	Dart. Google tarafından geliştirilen, güçlü tipli ve AOT/JIT derlemeli bir dil.	JavaScript / TypeScript. Web geliştiricilerinin zaten bildiği dil ve araçlar.
Render yaklaşımı	Kendi render motoru (Impeller / Skia). Her pikseli kendisi çizer, platform widget’larına bağımlı değildir.	Native bileşenler. JS kodu iOS ve Android’in gerçek UI bileşenlerini kontrol eder (Yeni Mimari: Fabric + JSI).
Performans	AOT derlenmiş Dart ve tek bir render katmanı sayesinde tutarlı, yüksek kare hızı. Ağır animasyonlarda güçlü.	Yeni Mimari ile köprü maliyeti büyük ölçüde azaldı; çoğu uygulama için native’e yakın performans.
Ekosistem	pub.dev paketleri, Firebase ile güçlü entegrasyon. Google desteği. Web, masaüstü ve gömülü hedefler.	npm ekosistemi, Expo araç seti, Meta desteği. Çok geniş kütüphane havuzu ve iş ilanı sayısı.
UI tutarlılığı	Her platformda piksel piksel aynı görünüm. Material 3 ve Cupertino widget setleri hazır.	Platformun kendi görünümünü alır; iOS ve Android arasında küçük farklar doğaldır.
Hot reload	Stateful hot reload: durum korunarak anında yenileme.	Fast Refresh: benzer deneyim, bileşen durumu çoğu zaman korunur.
Öğrenme eğrisi	Dart yeni bir dil olsa da öğrenmesi kolay; widget ağacı mantığı React’e benzer.	React bilen biri için neredeyse sıfır; native modüller ve Xcode/Gradle konfigürasyonu zorlayabilir.
Web desteği	Flutter Web ile tek kod tabanından tarayıcıya derlenir; SEO ve ilk yükleme süresi zayıf tarafı.	React Native Web + Expo ile mümkün, ancak çoğu ekip web için doğrudan React kullanır.

Karar

Ne zaman Flutter, ne zaman React Native?

İkisi de üretim kalitesinde. Seçim ekibinizin bilgisine, tasarım beklentisine ve hedef platformlara bağlı.

Flutter’ı seçin, eğer…

Piksel mükemmel, özel tasarım
Tasarımın her iki platformda da birebir aynı görünmesi gerekiyorsa.
Yoğun animasyon ve grafik
Kendi render motoru sayesinde karmaşık animasyonlar ve özel çizimler akıcı çalışır.
Çok platform hedefi
Mobil, web, masaüstü ve gömülü cihazlara tek kod tabanıyla ulaşmak istiyorsanız.
Ekip web geçmişine sahip değilse
Sıfırdan başlayan bir ekip için Dart temiz ve tutarlı bir öğrenme yolu sunar.

Dikkat

Uygulama boyutu biraz daha büyük
Dart dışında yeniden kullanılabilir web kodu az
Web çıktısında SEO zayıf

React Native’i seçin, eğer…

Ekip zaten React biliyor
Mevcut React/TypeScript bilgisi ve kütüphaneleri anında mobil projeye taşınır.
Web ile kod paylaşımı
İş mantığı, API katmanı ve tipler web uygulamasıyla ortak tutulabilir.
Platformun doğal görünümü
Uygulamanın iOS’ta iOS, Android’de Android gibi hissettirmesi öncelikse.
Expo ile hızlı başlangıç
OTA güncellemeler, EAS Build ve hazır modüllerle native ayar yükü minimuma iner.

Dikkat

Native modüllerde Xcode/Gradle bilgisi gerekebilir
Üçüncü parti kütüphane kalitesi değişken
Platformlar arası küçük görsel farklar

Yerel kurulum

Flutter projesine nasıl başlanır?

Flutter SDK’yı flutter.dev üzerinden kurduktan sonra aşağıdaki komutlarla ilk projenizi oluşturup web, Android ve iOS için derleyebilirsiniz.

1. Kurulumu doğrulayın

Eksik araçları (Android Studio, Xcode, Chrome) listeler.

flutter doctor

2. Yeni proje oluşturun

Varsayılan olarak Android, iOS, web ve masaüstü hedefleri eklenir.

flutter create uygulamam
cd uygulamam

3. Çalıştırın

Bağlı cihazı veya emülatörü otomatik seçer; tarayıcı için Chrome’u belirtin.

flutter run
# Tarayıcıda çalıştırmak için:
flutter run -d chrome

4. Üretim çıktısı alın

Web çıktısı build/web altında statik dosyalardır; istediğiniz sunucuya koyabilirsiniz.

flutter build web --release
flutter build apk --release
flutter build appbundle --release
flutter build ios --release

Paket eklemek

pub.dev üzerindeki paketleri doğrudan komut satırından ekleyin.

flutter pub add provider
flutter pub add flutter_riverpod
flutter pub add go_router http

Geçiş rehberi

React bilgisini Flutter’a taşımak

Widget ağacı ile bileşen ağacı aynı deklaratif fikre dayanır. Aşağıdaki tablo React kavramlarının Flutter karşılıklarını gösterir.

Kavram	React	Flutter
Yapı taşı	Component (fonksiyon)	Widget (StatelessWidget / StatefulWidget)
Ağaç	Component tree + Virtual DOM	Widget → Element → RenderObject ağacı
Yerel durum	useState, useReducer	setState, ValueNotifier
Paylaşılan durum	Context API	Provider, InheritedWidget
Global durum	Redux, Zustand, Jotai	Riverpod, Bloc, GetX
Yan etkiler	useEffect	initState / dispose, FutureBuilder, StreamBuilder
Stil	CSS, Tailwind, styled-components	Widget parametreleri, ThemeData, Container / Padding
Düzen	Flexbox, Grid	Row, Column, Flex, Expanded, GridView
Yönlendirme	React Router, Next.js App Router	Navigator 2.0, go_router
Veri çekme	fetch, React Query / SWR	http / dio, FutureBuilder, Riverpod async

React: sayaç bileşeni

Counter.tsx

import { useState } from 'react';

export function Counter() {
  const [count, setCount] = useState(0);
  return (
    <div className="flex flex-col items-center gap-2">
      <p>Sayaç: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        Artır
      </button>
    </div>
  );
}

Flutter: aynı sayaç widget’ı

counter.dart

import 'package:flutter/material.dart';

class Counter extends StatefulWidget {
  const Counter({super.key});
  @override
  State<Counter> createState() => _CounterState();
}

class _CounterState extends State<Counter> {
  int count = 0;
  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        Text('Sayaç: $count'),
        ElevatedButton(
          onPressed: () => setState(() => count++),
          child: const Text('Artır'),
        ),
      ],
    );
  }
}

Widget ağacı ≈ Component ağacı

Her widget build() ile alt widget’larını döndürür; React bileşeninin JSX döndürmesiyle aynı. Props yerine constructor parametreleri kullanılır.

Context ≈ Provider

React Context ile paylaştığınız veriyi Flutter’da Provider veya InheritedWidget ile ağacın altına geçirirsiniz. Riverpod bunu derleme zamanı güvenli hale getirir.

Redux ≈ Bloc / Riverpod

Tek yönlü veri akışı ve reducer mantığı Bloc’ta event → state dönüşümü olarak karşınıza çıkar. Daha hafif bir çözüm için Riverpod’un StateNotifier’ı yeterlidir.

SSS

Sık sorulan sorular

Viski ile Flutter uygulaması geliştirebilir miyim?

Hayır. Viski, projeleri React tabanlı web uygulamaları olarak üretir ve mobil kabuk için web teknolojilerini kullanır. Flutter SDK ve Dart derleyicisi bu araç setinin parçası değildir. Flutter ile çalışmak istiyorsanız projeyi yerel makinenizde veya kendi CI ortamınızda geliştirmeniz gerekir.

React bilgim Flutter öğrenirken işime yarar mı?

Evet, oldukça. Flutter’ın widget ağacı, React’in bileşen ağacıyla aynı deklaratif mantığa dayanır. Props → constructor parametreleri, useState → setState, Context → Provider/InheritedWidget şeklinde birebir karşılıklar vardır. Asıl yeni kısım Dart söz dizimi ve düzen (layout) widget’larıdır.

Mevcut React web uygulamamı Flutter’a nasıl taşırım?

Doğrudan otomatik bir dönüştürücü yoktur. Önerilen yol: önce iş mantığını (API çağrıları, modeller, doğrulamalar) Dart’a taşıyın, ardından ekranları widget olarak yeniden yazın. Backend’iniz REST veya GraphQL ise olduğu gibi kullanmaya devam edersiniz.

Flutter Web, React’in yerini alabilir mi?

İçerik ağırlıklı, SEO gerektiren siteler için hayır; Flutter Web canvas tabanlı çizim yaptığı için arama motorları ve erişilebilirlik araçları sayfayı iyi okuyamaz. Dashboard, dahili araç veya mobil uygulamanın web sürümü gibi uygulama tarzı projelerde ise makul bir seçenektir.

React Native için Expo kullanmalı mıyım?

Yeni başlıyorsanız evet. Expo, native araç kurulumunu büyük ölçüde gizler, EAS ile bulutta derleme ve mağazaya gönderme sağlar. İleri düzey native modül ihtiyacında “development build” ile tüm native koda yine erişebilirsiniz.

Performans açısından hangisi daha hızlı?

Çoğu iş uygulamasında fark hissedilmez. Flutter, ağır animasyon ve özel grafik senaryolarında daha tutarlı kare hızı verir. React Native, Yeni Mimari (JSI, Fabric, TurboModules) ile eski köprü maliyetini büyük ölçüde ortadan kaldırmıştır.

Aynı projede ikisini birlikte kullanabilir miyim?

Teknik olarak Flutter “add-to-app” ile mevcut native uygulamaya modül olarak eklenebilir, ancak React Native ile aynı uygulamada birlikte kullanmak bakım yükünü ciddi biçimde artırır. Tek bir framework seçmeniz önerilir.