FlutterFlow kullanarak ev sahiplerinin sıhhi tesisat, elektrik ve peyzaj hizmetlerini rezerve edebileceği eksiksiz bir hizmet talep portalı oluşturdum. Yapay zeka oluşturmayı test ettim, Firebase’i bağladım, sürüm kontrolünü kullandım ve test moduna dağıttım.
Bu inceleme, fiyatlandırma detaylarını, yapay zekanın gerçek yeteneklerini, kod dışa aktarımının nasıl göründüğünü ve dik öğrenme eğrisinin buna değip değmediğini kapsıyor.
FlutterFlow Nedir?
Flutterflow bir görsel uygulama geliştirme platformudur; sıfırdan kod yazmadan yerel iOS, Android ve web uygulamaları oluşturmanıza olanak tanır. Eski Google mühendisleri tarafından geliştirilen FlutterFlow, Google’ın Flutter çerçevesinin üzerine inşa edilmiştir.
Haftalarca Dart ve Flutter’ın widget yapısını öğrenmek yerine, FlutterFlow sürükle-bırak arayüzüyle şunları yapmanızı sağlar:
- Ekranları önceden hazırlanmış bileşenlerle görsel olarak tasarlamak
- Firebase, Supabase veya özel API’lere bağlanmak
- Metin açıklamalarından sayfalar oluşturmak için yapay zekayı kullanmak
- Her zaman temiz, okunabilir Flutter kodu dışa aktarmak
FlutterFlow’u benzersiz kılan, yaptığı her görsel değişikliğin anında Dart koduna dönüştürülüp görüntülenebilmesi ve indirilebilmesidir. Hiçbir zaman kilitli kalmazsınız.
Kimler İçin Uygun?
FlutterFlow en çok gerçek mobil uygulamalara ihtiyaç duyan kişiler için idealdir, sadece görsel web siteleri değil. En çok fayda sağlayacak gruplar:
- Başlangıç kurucuları: Hizmet pazaryeri, teslimat uygulaması veya rezervasyon platformu gibi bir MVP’yi haftalar içinde App Store ve Google Play’e taşımak isteyenler için FlutterFlow büyük avantaj sunar.
- Ajanslar ve serbest çalışanlar: Profesyonel özelliklerden faydalanır. Sürüm kontrol sistemiyle staging dalları oluşturabilir, kod dışa aktarımıyla temiz Flutter projelerini teslim edebilir ve yapay zeka üretimiyle tasarım aşamasını hızlandırabilirler.
- Geliştiriciler: Mobil geliştirmedeki sıkıcı işleri (duyarlı düzenler, gezinme yığınları, durum yönetimi) hallederken gerektiğinde özel Dart kodu yazma özgürlüğüne sahip olmak isteyenler hız kazanır.
- Teknik merakı olan küçük işletme sahipleri: Öğrenmeye istekliyseniz kullanabilirsiniz. Bu Wix değil. Veri yapıları, API çağrıları ve duyarlı tasarım gibi kavramları anlamanız gerekir.
FlutterFlow Artıları ve Eksileri
- Yapay zeka, bağlama uygun sayfalar oluşturuyor
- Gerçek Flutter kodu, her zaman dışa aktarılabilir
- Profesyonel sürüm kontrolü ve dallar
- Yerel Firebase ve Supabase entegrasyonları
- Gerekirse özel Dart kodu yazma
- Oluşturma sırasında canlı tema geçişleri
- Widget ağacında tam hiyerarşi görünümü
- Anında kod görünümü ile şeffaflık
- Karmaşık veri yapılarıyla iyi başa çıkma
- Yerleşik API çağrı test arayüzü
- GitHub deposu senkronizasyonu mevcut
- Hata ayıklama paneliyle test modu
- Yeni başlayanlar için dik öğrenme eğrisi
- Backend için Firebase/Supabase bilgisi gerektirir
- Basit işler için “kolay mod” yok
Projeye başlamadan önce ücretsiz katmanla bir ekran oluşturun. Bir saat içinde çalışan bir giriş sayfası yapabiliyorsanız, öğrenme eğrisinin sizin için değip değmeyeceğini anlarsınız: Ücretsiz katmana başla
FlutterFlow Özellikleri
- Görsel widget tabanlı mobil uygulama derleyici
- Metinden sayfa oluşturma için yapay zeka
- Firebase ve Supabase backend entegrasyonları
- Gerçek zamanlı Flutter kodu dışa aktarımı
- Git tarzı sürüm kontrolü ve dallanma
- Özel Dart fonksiyonları ve widget’lar
- iOS, Android ve web dağıtımı
- Özel başlıklarla API entegrasyonu
FlutterFlow ile Deneyimim
FlutterFlow, “güç kullanıcı” no-code aracı olarak pozisyonlanmış. Ev sahiplerinin sıhhi tesisat ve elektrik hizmetleri isteyebildiği bir uygulama inşa etmeye karar verdim. İşte ilk tıklamadan kodu gördüğüm ana kadar olan süreç.
1. Başlangıç: Kaydolma ve İlk İzlenimler
Süreci FlutterFlow.io ana sayfasında başlattım. Profesyonel görünümlü, karanlık arka planlı ve arayüzünü sergileyen yüksek kaliteli grafiklerle doluydu.
Büyük başlık “Build Better. Launch Faster” gözümü çekti. Üstte Product, Resources, Pricing, Enterprise ve AI bölümleri vardı. Bir “Log In” butonu ve parlak bir “Start for Free” butonu bulunuyordu. “Start for Free”a tıkladım.
Beni app.flutterflow.io/create-account sayfasına yönlendirdi. Birkaç giriş seçeneği gördüm:
- Google ile giriş
- Apple ile giriş
- GitHub ile giriş
- Microsoft ile giriş
Ben klasik yöntemi seçtim. Adımı ve e-postamı yazdım, şifre alanlarını doldurdum ve “Create Account”a tıkladım.
Ekran titredi, mor FlutterFlow logosu birkaç saniye döndü ve ardından bir dizi onboarding sorusu belirdi. Kimin kullandığını öğrenmek istiyorlar. Sorulanlar:
- Birincil rolünüz nedir? (Ben Developer seçtim)
- Çalıştığınız yer nasıl tanımlanır? (Startup tercih ettim)
- Kodlama deneyiminiz var mı? (“A Lot” seçtim)
- Kimler için uygulama oluşturmak istiyorsunuz? (“My Company” seçeneği)
- Uygulamanızı oluşturmak için birini kiralamak ister misiniz? (Hayır)
Bunları yanıtladıktan sonra “Start Building” butonu çıktı. Buna tıkladığımda proje panosuna geldim. Temiz ama sadeydi.
“Create New”a tıkladım, proje adı soran bir açılır pencere belirdi. “Service Request Portal” yazdım ve tekrar “Create New” dedim.
Kaydolma deneyimim:
Onboarding biraz uzun hissettirdi ama arayüzü beceri seviyenize göre uyarlıyorlar. Ciddi bir yazılım alıyormuşsunuz hissi verdi; basit bir web oyuncağı değil. “Developer” olduğumu hemen tanıması hoştu.
2. Pano Gezinme ve Ortamı Hazırlama
Onboarding sonrası ana panoma geldim. Karanlık tema, sağ üstte büyük “Create New” butonu var. Tıkladım, “Create a New Project” penceresi çıktı. Proje adını “Service Request Portal” yazdım.
Altında “Starter Apps” ve “Template Categories” başlıklarıyla:
- Business
- E-Commerce
- AI & Chat
- Dashboard/CRM
- Food & Delivery
gibi şablonlar vardı. Blank tuvali görmek istediğim için “Start Building” dedim. Yine logo döndü ve editöre geldim.
Açılır bir “Welcome to FlutterFlow” turu çıktı. “Skip” ve “Next” tuşlarıyla ilerledim, “Common UI Components” ve “Widget Tree” gösterildi. Son ekranda videoya link ve “Start Building” butonu vardı. Ona tıklayıp turu kapattım.
Ana editör yoğun. Ortada boş bir telefon çerçevesi, solda simgeler:
- Widget Palette: Sürükle-bırak öğeleri (Text, Column, Row, Container, Image, Button, Icon).
- Widget Tree: Sayfa hiyerarşisi.
- Page Selector: Farklı ekranlar arası geçiş.
- Firestore: Veritabanı paneli.
- App Settings: Dişli ikonu.
- AI Copilot: Yıldız ikonu.
Bir süre her şeye fareyle dokunarak ne işe yaradığını keşfettim. Tuvali bembeyaz bir ekran olarak görmek biraz ürkütücüydü.
Pano izlenimim:
Arayüz yoğun. “Beş dakikada site” isteyenler için değil; profesyonel bir IDE hissi var. Photoshop veya Figma kullandıysanız yabancılık çekmezsiniz, basit web site oluşturuculara alışkınsanız ilk başta korkutabilir.
3. Yapay Zeka ile İlk Deneme
Her şeyi elle yapmak istemedim. Yerleşik AI sayfa oluşturucu “Copilot”u denemek istedim. Üst araç çubuğunda yıldız ikonu olan “Generate with AI (BETA)”ye tıkladım. Küçük bir pencere açıldı: “Describe the page you want to create…” kutusu belirdi.
Hazır bir açıklamam vardı:
“A client portal where homeowners can request home services (plumbing, electrical, cleaning, landscaping) and track the status of their service requests. Include user authentication, a service request form with service type, description, date, and urgency fields, and a dashboard showing all requests with their status (pending, in progress, completed).”
Ayrıca AI’nın takip etmesi için veri yapısını belirttim:
- Services Tablosu: ID, Service Type, Description, Requested Date, Status, Urgency, Image.
- Users Tablosu: ID, Name, Email, Phone, Address, Role (Customer/Admin).
Karakter sayacı “737 / 1000” gösteriyordu. Yeterliydi. Mor “Generate Page” butonuna tıkladım.
“Page generation started.” mesajı çıktı. Yaklaşık 2 dakika bekledim, tıkanıp kalmış mı diye düşündüm ama sonra tasarım belirdi.
Sonuç “HomeService Pro” oldu. Oldukça tamamlanmış görünüyordu:
- “Welcome back, Sarah” başlıklı üst kısım ve “Your home services dashboard” alt başlık.
- Büyütülmüş mor “New Request” butonu.
- Plumbing, Electrical, Cleaning, Landscaping ikonlu hızlı işlemler bölümü.
- “Recent Requests” listesi: “Kitchen Sink Leak”, “Deep House Cleaning” gibi öğeler ve “Pending”, “Complete” etiketleri.
AI penceresinin solunda renk daireleri vardı. Farklı temalara tıklayınca anında renkler güncellendi: “Professional & Refined”, “Tech AI”, “Readex Pro” gibi.
Sonuçtan memnun kaldım, altındaki “Insert Page”a tıkladım. Yeni sayfa adı soruldu: “ServicePortal” yazdım ve “Projeye tema güncelle” seçeneğini işaretleyip “Create Page” dedim.
Yapay zeka oluşturma izlenimim:
Tüm deneyimin en etkileyici kısmıydı. Genel bir düzen bekliyordum, ama istediğim spesifik hizmetlere uygun ikonlar bile ekledi. Tema geçişleri de markalamayı saniyeler içinde halletti. Bir saati üç saate tercih ederim.
4. Hatalarla Başa Çıkma ve “Kapsamı” Keşfetme
Sayfa eklendikten sonra sağ üstte kırmızı bir dairede “1” gördüm. Tıkladım, “Project Issues” açıldı:
Hata: Entry Page is not an existing page in the project.
Kafam karıştı çünkü “ServicePortal” sayfası listede duruyordu. Hata detayında bir çözüm bulamayınca biraz araştırdım. Orijinal boş “HomePage”i silmiştim; uygulama başlangıç sayfasını bulamıyordu. Soldaki dişli ikona (App Settings) gittim.
Genel ayarlar altında “Initial Page” bölümünde “ServicePortal” seçtim. Kırmızı uyarı kayboldu.
Sonra gerçek koda bakmak istedim. Sağ üstteki > ikonuna tıkladım, “View Code” penceresi belirdi. Birkaç saniye “Generating code…” yazdıktan sonra tam bir editör açıldı.
service_portal_widget.dart dosyasını gördüm. Flutter’ın temel import’ları, yüzlerce satır profesyonel Dart kodu. Sürükle-bırak ne eklediyse, AI ne eklediyse anında gerçek koda dönüşüyordu.
Sol menüde diğer ikonları da inceledim:
- Firestore: Koleksiyon oluşturup Services ve Users tablolarını tanımlamak için.
- Data Types: Karmaşık veri yapıları tanımlamak için.
- Custom Code: Custom Functions, Custom Widgets, Custom Actions bölümleri. main.dart bile duruyor.
Hata ve kod görünümü izlenimim:
Hata mesajı acemiler için belirsiz olabilir, ama sorunları hemen işaretlemesi harika. “View Code” özelliği öne çıkıyor. Gerçek bir ürün inşa ediyormuşsunuz hissi veriyor, geçici bir prototip değil.
5. Önizleme ve İnceleme
Uygulamayı çalıştırmak istedim. Sağ üstte göz ikonu “Preview App” butonuna tıkladım.
Yeni bir sekme açıldı, “swirling F” animasyonu çıktı. Yaklaşık bir dakika derledi. Ardından tam çalışan önizleme geldi.
Test ettim:
- “Recent Requests” listesinde kaydırma sorunsuzdu.
- Plumbing ve Electrical ikonlarına fareyle dokununca reaksiyon aldım.
- “New Request” butonuna tıkladım.
- Mock veride “Outlet Installation”, “Priority: Medium”, “Scheduled: Tomorrow” gibi bilgiler hazırdı.
Önizleme penceresinde “Size” seçenekleri vardı:
- Mobile: 375 x 812 (varsayılan)
- Tablet: 768 x 1024
- Desktop: 1440 x 900
Masaüstüne geçince AI düzeni tam duyarlı değildi; ikonlar ekranı gereğinden fazla kapladı. Gerçek duyarlılık kuralları eklemeniz gerektiği ortaya çıktı.
Önizleme izlenimim:
Preview modu sağlam. Sadece ekran resmi değil, gerçek bir uygulama derliyor. Derleme süresi biraz uzun, ama net sonuç veriyor. AI tasarımı harika bir başlangıç, asıl güç geri plandaki ayarlarda; gerçek dünyaya bağlandığınızda fark oluşuyor.
6. Beyni Bağlama: Veritabanları ve Entegrasyonlar
“ServicePortal” sayfasından memnun kalınca verileri nasıl saklayacağımı görmek istedim. Sol menüde Firestore ikonuna tıkladım.
Hiç koleksiyon oluşturulmamıştı. Google’ın Firebase’iyle kusursuz çalışıyor. Gerçek dağıtım için:
- “Create Collection” ile Services ve Users tablolarını kurmak
- Firebase Proje ID’sini ayarlarda bağlamak
- Firestore ve Authentication’ı etkinleştirmek
Ancak yalnızca Google ürünleri değil. API Calls sekmesine (bulut ve fiş ikonu) geçtim. Burası entegrasyon potansiyelini açıyor.
“Add API Call” var. Stripe ödemeleri veya hava durumu API’si gibi istekleri tanımlayıp, başlık ayarlarını yapıp, test edebiliyorsunuz.
Ayrıca Media Assets klasörünü inceledim. Boştu ama buraya sürükle-bırakla logo ve görselleri yükleyebilirsiniz.
Builder’ın yapamadıkları için Custom Code kısmı var:
- Custom Functions: Küçük Dart kod parçaları
- Custom Widgets: Eksik komponentleri ekleme
- Custom Actions: Buton tıklamalarında tetiklenen mantık
Entegrasyon izlenimim:
FlutterFlow her şeyi kendisi yapmaya çalışmıyor; diğer hizmetleri yönetiyor. Firebase entegrasyonu en sıkı gördüğüm no-code entegrasyonuyken, API ve Custom Code sınırsız büyüme sağlıyor.
7. Güvence: Sürüm Kontrol ve Anlık Görüntüler
No-code araçlarda “aman yanlışlıkla sildim” korkusu vardır. Sürüm kontrolü ikonu (dallanma simgesi) bulunca içim rahatladı.
Tıkladım, “Version Control” kenar çubuğu açıldı. “Main” dalını gördüm. Üç sekme var:
- Branches: Geliştirme özelliklerini deneyebileceğiniz ayrı dallar.
- Branch History: Yapılan tüm değişikliklerin geçmişi.
- Snapshots: Benim favorim.
“Snapshots”a tıkladım, 27 dakika önce oluşturulan “Argus” gibi görüntüler gördüm. Ayrıca “Commit” butonu var.
GitHub reposuna bağlanma bile var; görsel builder’daki her değişikliği gerçek bir GitHub deposuna gönderebilirsiniz.
Sürüm kontrol izlenimim:
Profesyonel ekipler için oyun değiştirici. Çoğu no-code araçta temel Undo varken FlutterFlow’da gerçek sürüm yönetimi var. Denemekten korkmuyorsunuz.
8. Canlıya Geçirme: Yayın Deneyimi
Sonunda uygulamayı editörden çıkarıp kullanıcılarla buluşturmak istedim. Sağ üst köşede yayın kontrolleri var.
Test & Run Paneli: Sağ kenar çubuğunda “Test, Run & Publish” başlığıyla hızlı iterasyon için test modu bölümü.
İki ana seçenek:
- Test butonu (mor yıldırım ikonu) – Hızlı testler için
- FlutterFlow Local Run – Masaüstü uygulamasını indirip cihazda çalıştırma
Web platformunu etkinleştirmeniz gerektiğini hatırlatıyor. Ayrıca geçmiş test sürümlerinin bağlantılarını kopyalayıp paylaşabileceğiniz bir liste var.
Test Modu Deneyimi: Test butonuna tıkladığımda:
- “Preparing cloud resources…”
- “We are setting up a testing session for your app…”
- “This should take 2-3 minutes.”
Beklerken ipuçları gösteriyor: “FlutterFlow Tip #10: Master Layouts in FlutterFlow” video linki gibi.
Test oturumu yüklendi, Service Request Portal’ımı gördüm:
- “Current Load – Expires in 11 minutes” oturum bilgisi
- Kırmızı “End Session” butonu
- Yeşil “Instant Reload” butonu
- “Known Issues”, “Troubleshooting Info” ve “Debug Panel” sekmeleri
- Uygulamanın canlı önizlemesi
Test iş akışı izlenimim:
Test modu hızlı iterasyon için tasarlanmış. 11 dakikalık süre baskı yaratıyor, sadece belirli özellikleri test ediyorsunuz. “Instant Reload” kod değişikliklerini anında görmek için kritik. Debug Panel gerçek zamanlı hata yakalamayı kolaylaştırıyor.
Genel Değerlendirme
Bu oturumun ardından görüşüm net: FlutterFlow ciddi kullanıcılar içindir.
Sadece basit bir açılış sayfası veya dahili araç yapıyorsanız gereksiz. Arayüzü öğrenmek inşa etmeye vakit kaybettirir.
Ancak gerçek bir startup MVP’si veya 10 kat hızlı prototip isteyen geliştiriciler için müthiş bir platform.
Beğendiklerim:
- Yapay zeka gerçekten işe yarıyor: Genel bir şablon değil, spesifik isteklerimi yerine getirdi.
- Tam şeffaflık: Kod her an görülebiliyor, asla “kilitli” hissetmiyorsunuz.
- Profesyonel özellikler: Sürüm kontrol, dallanma, tam Firestore entegrasyonu bir ayda aşılacak değil.
Dikkat edilmesi gerekenler:
- Dik öğrenme eğrisi: “Kolay mod” yok; mobil düzenleri anlamanız şart.
- Yavaş derleme: Önizleme için bekleme süresi var, bazı web araçları kadar anlık değil.
Fiyatlandırma ve Planlar
FlutterFlow, bölgesel indirimlerle dört ana katman sunar. Tüm planlarda temel görsel editör var, ancak işbirliği özellikleri, dağıtım seçenekleri ve yapay zeka kullanım limitleri farklılık gösterir.
| Plan | Fiyat (Aylık) | Projeler | AI İstekleri | Kod İndirme | Ekip Büyüklüğü | En Uygun |
|---|---|---|---|---|---|---|
| Free | $0 | 2 | 5 (ömür boyu) | ✗ | 1 | Platformu test etmek |
| Basic | $15.60 | Sınırsız | aylık 50 | ✓ | 1 | Bireysel geliştiriciler |
| Growth | $32 (ilk kullanıcı) | Sınırsız | aylık 200 | ✓ | 2 | Küçük ekipler |
| Business | $60 (ilk kullanıcı) | Sınırsız | aylık 500 | ✓ | 5 | Büyüyen şirketler |
Ödeme Detayları
- Kabul edilen yöntemler: Kredi kartı, PayPal
- Yıllık indirim: Yıllık faturalamada yaklaşık %25 tasarruf
- İade Politikası: İlk satın alımda 14 günlük para iade garantisi
- Gizli maliyetler: İlk ücretsiz özel alan adı bağlantısı dışındaki her alan için ek $10/ay. Growth ve Business katmanlarında ek işbirlikçi başına $10–$8/ay.
FlutterFlow Alternatifi
Eğer hedefiniz yerleşik backend mantığına sahip karmaşık bir web uygulamasıysa, güçlü bir alternatif Bubbledır.
Bubble, kendi çalışma zamanında çalışan bir web uygulaması platformudur. FlutterFlow’u mobil öncelikli, web desteği olan bir araç olarak düşünün; Bubble’ı ise web öncelikli, mobil tarayıcılara uyum sağlayan bir platform olarak.
| Özellik | FlutterFlow | Bubble |
|---|---|---|
| Kullanım Kolaylığı | Widget tabanlı yapı, geliştiricilere aşina. Backend kurulumu (Firebase/Supabase) için dik öğrenme eğrisi. | Güçlü ama karmaşık. Görsel iş akışları ve veritabanı yönetimi bir arada. Öğrenmek zaman alıyor. |
| En Uygun | Offline destekli, kamera, GPS, push bildirimleri gibi cihaz özelliklerine ihtiyacı olan yerel mobil uygulamalar. | Web uygulamaları, SaaS platformları, pazaryerleri, karmaşık mantık gerektiren admin panelleri ve iç araçlar. |
| Mobil Uygulamalar | Gerçek yerel uygulamalar (Flutter). App Store ve Google Play’e doğrudan dağıtım. Akıcı performans ve offline destek. | Mobil tarayıcılarda çalışan PWA’lar. Gerçek yerel değil. Mağaza dağıtımı için üçüncü taraf araçlar gerekir. |
| Backend & Veri | Harici backend (Firebase, Supabase, REST API) gerektirir. Daha fazla kurulum ama esneklik ve ölçeklenebilirlik. | Yerleşik backend, veritabanı, iş akışları ve kullanıcı kimlik doğrulama. Hepsi tek ekosistemde ama daha az esnek. |
| Tasarım Esnekliği | Widget tabanlı sistem, önceden hazırlanmış bileşenler. Mobil uyumlu düzenler. Üst katmanlarda Figma import desteği. | Web düzenleri için yüksek özelleştirme. Mobil tarayıcı uyumluluğu bazen zahmetli. Genel olarak daha fazla tasarım kontrolü. |
| Performans | Yerel mobil performansına yakın. Flutter koduna derleniyor. Karmaşık animasyonlar sorunsuz. | Ağır iş akışlarında web uygulaması ölçeklendikçe performans düşebilir. Karmaşık uygulamalarda optimizasyon gerekir. |
| Fiyatlandırma | $15.60/ay’dan başlar. Kod dışa aktarımı Basic planda dahil. Growth/Business katmanlarında kullanıcı başına ödeme. | Mobil için $42/ay’dan başlar. İş yüküne (sunucu kapasitesi) göre artan fiyat. Kod dışa aktarma yok. |
| Kod Sahipliği | Ücretli tüm planlarda tam Flutter kodu dışa aktarımı. Herhangi bir yere barındırın, platform dışında değiştirin. Kilitlenme yok. | Kod dışa aktarma yok. Uygulamalar Bubble altyapısında kalır. Bubble’dan ayrılmak yeniden inşa etmek demek. |
FlutterFlow Hakkında Son Karar
FlutterFlow ciddi geliştiriciler içindir. Yerel mobil uygulamanızı App Store veya Google Play’e taşımak istiyorsanız en hızlı yollardan biri.
Yapay zeka gerçekten işe yarıyor, Firebase entegrasyonu kusursuz ve kod dışa aktarımı sayesinde kilitli kalmazsınız.
Ancak öğrenme eğrisi gerçek. Veri yapıları, API çağrıları ve duyarlı düzenleri anlamalısınız. Basit bir web uygulaması için Bubble veya Softr daha hızlı sonuç verir.
En uygun kullanım: mobil öncelikli MVP’ler, prototip hızını 10x artırmak isteyen geliştiriciler veya en az bir kişi backend mimarisini bilen küçük ekipler için ideal.
