Použil jsem FlutterFlow k vytvoření kompletního portálu pro objednávání služeb, kde si majitelé domů mohou rezervovat instalatérské, elektrotechnické a zahradnické služby. Otestoval jsem generování pomocí AI, připojil Firebase, pracoval s verzovacím systémem a nasadil aplikaci v testovacím režimu.
V této recenzi rozebírám cenové plány, skutečné možnosti AI, jak vypadá export kódu a zda se strmá křivka učení vyplatí.
Co je FlutterFlow?
Flutterflow je vizuální platforma pro vývoj aplikací, která vám umožňuje vytvářet nativní iOS, Android a webové aplikace, aniž byste museli psát kód od nuly. Vytvořena bývalými inženýry Googlu, je postavěna na frameworku Flutter od Google.
Místo toho, abyste trávili týdny učením se jazyka Dart a systému widgetů Flutter, vám FlutterFlow poskytuje rozhraní s přetahováním, ve kterém můžete:
- Návrh obrazovek vizuálně pomocí předpřipravených komponent
- Připojit se k Firebase, Supabase nebo vlastním API
- Generovat stránky pomocí popisů AI
- Kdykoliv exportovat čistý, čitelný kód Flutteru
To, co dělá FlutterFlow jedinečným, je jeho transparentnost. Každá vizuální změna, kterou provedete, okamžitě generuje kód v Dartu, který můžete zobrazit, stáhnout a dokonce upravit mimo platformu. Nikdy nejste nijak vázáni.
Pro koho je určeno?
FlutterFlow funguje nejlépe pro lidi, kteří potřebují skutečné mobilní aplikace, ne jen vylepšené webové stránky. Zde jsou ti, kteří získají největší užitek:
- Zakladatelé startupů vytvářející MVP jsou ideální cílovou skupinou. Pokud uvádíte na trh tržiště služeb, doručovací aplikaci nebo rezervační platformu a potřebujete mít něco v obchodech s aplikacemi během týdnů (nikoli měsíců), FlutterFlow vás nezklame.
- Agentury a freelanceři stavějící pro klienty těží z profesionálních funkcí. Systém verzování vám umožňuje vytvářet testovací větve, export kódu znamená, že můžete předat čisté projekty ve Flutteru, a generování pomocí AI urychluje počáteční fázi návrhu.
- Vývojáři, kteří chtějí jít rychleji ocení, jak FlutterFlow řeší únavné části mobilního vývoje, jako jsou responzivní rozložení, navigační zásobníky a správa stavů, a přitom vám umožňuje psát vlastní kód v Dartu, když je to potřeba.
- Majitelé malých podniků s technickou zvědavostí mohou FlutterFlow používat, pokud se chtějí učit. Není to Wix. Musíte rozumět konceptům, jako jsou datové struktury, volání API a responzivní design.
Výhody a nevýhody FlutterFlow
- AI generuje kontextuálně přesné stránky
- Skutečný kód Flutteru, exportovatelný kdykoli
- Profesionální verzování s větvemi
- Nativní integrace s Firebase a Supabase
- Možnost vlastního kódu v Dartu, když je potřeba
- Živé přepínání motivů během generování
- Strom widgetů ukazuje přesnou hierarchii
- Okamžitý náhled kódu pro transparentnost
- Dobře pracuje s komplexními datovými strukturami
- Vestavěné rozhraní pro testování volání API
- Dostupná synchronizace s repozitářem GitHub
- Testovací režim s debugovacím panelem
- Strmá křivka učení pro začátečníky
- Vyžaduje znalosti Firebase/Supabase pro backend
- Žádný „snadný režim“ pro jednoduché úkoly
Chcete zjistit, jestli FlutterFlow vyhovuje vašemu projektu? Začněte s jejich bezplatným tarifem a vytvořte jednu obrazovku. Pokud zvládnete mít funkční přihlašovací stránku hotovou za méně než hodinu, budete vědět, zda je křivka učení pro váš případ použití přijatelná.
Funkce FlutterFlow
- Vizuální tvůrce mobilních aplikací založený na widgetech
- Generování stránek AI z textových popisů
- Integrace backendu s Firebase a Supabase
- Export kódu Flutter v reálném čase
- Versování a větvení ve stylu Git
- Vlastní funkce a widgety v Dartu
- Deploy na iOS, Android a web
- Integrace API s vlastními hlavičkami
Moje praktické zkušenosti s FlutterFlow
FlutterFlow je prezentován jako no-code nástroj pro pokročilé uživatele. Rozhodl jsem se vytvořit aplikaci, která majitelům domů umožní objednávat služby jako instalatérské a elektrotechnické práce. Zde je přesně to, co se stalo, od prvního kliknutí na domovské stránce až po okamžik, kdy jsem uviděl svůj kód.
1. Začínáme: Registrace a první dojmy
Cesta začala na domovské stránce FlutterFlow.io. Je to velmi moderně vypadající web, plný tmavých pozadí a vysoce kvalitní grafiky, která ukazuje jejich rozhraní.
Velký titul “Build Better. Launch Faster” na mě ihned zapůsobil. Okamžitě jsem si všiml navigační lišty v horní části s položkami Product, Resources, Pricing, Enterprise a AI.
Bylo tam tlačítko “Log In” a výrazné tlačítko “Start for Free”. Neztrácel jsem čas a klikl jsem na “Start for Free”.
To mě přesměrovalo na registrační stránku (app.flutterflow.io/create-account). Viděl jsem několik způsobů, jak se přihlásit:
- Přihlásit se pomocí Google
- Přihlásit se pomocí Apple
- Přihlásit se pomocí GitHub
- Přihlásit se pomocí Microsoft
Rozhodl jsem se pro standardní postup. Zadal jsem své jméno a e-mailovou adresu a přešel k políčkům pro heslo. Jakmile jsem jej potvrdil, klikl jsem na “Create Account”.
Obrazovka zablikala, fialové logo FlutterFlow se na pár sekund zatočilo a pak se mi zobrazila řada onboardingových otázek.
Oni očividně chtějí vědět, kdo jejich nástroj používá. FlutterFlow se ptalo:
- Jaká je vaše hlavní role? (Zvolil jsem Developer)
- Co nejlépe popisuje vaše pracoviště? (Vybral jsem Startup)
- Máte zkušenosti s programováním? (Vybral jsem „A Lot“)
- Pro koho chcete aplikace vytvářet? (Zvolil jsem „My Company“)
- Máte zájem najet někoho, kdo by vám aplikaci postavil? (Odvážné „No“ z mé strany)
Po zodpovězení se objevilo tlačítko “Start Building”. Po kliknutí jsem se dostal na nástěnku projektu. Byla čistá, ale skromná.
Klikl jsem na “Create New” a objevilo se vyskakovací okno, kde se ptali na název projektu. Pojmenoval jsem ho “Service Request Portal” a znovu stiskl “Create New”.
Můj názor na registrační proces:
Onboarding trval trochu déle, ale jasně jim pomáhá přizpůsobit rozhraní vaší úrovni dovedností. Působilo to profesionálně a luxusně, jako bych se registroval do seriózního softwaru, nikoli do jednoduché webové hračky. Líbilo se mi, že hned rozpoznali moji „developer“ zkušenost.
2. Procházení nástěnky a příprava
Po onboardingu jsem se ocitl na hlavní nástěnce. Byla to čistá oblast s tmavým motivem a velkým tlačítkem “Create New” v pravém horním rohu. Klikl jsem na něj a objevilo se okno “Create a New Project”.
Do pole pro název projektu jsem napsal “Service Request Portal”.
Pod tím jsem viděl spoustu “Starter Apps” a “Template Categories”, jako například:
- Obchod
- Elektronický obchod
- AI a chat
- Panel/CRM
- Jídlo a doručení
Mohl jsem zvolit šablonu, ale chtěl jsem vidět, jak vypadá prázdné plátno. Klikl jsem na “Start Building”. Objevil se další načítací screen se točícím se logem a pak jsem byl v samotném editoru.
Než jsem mohl cokoli dělat, vyskočil průvodce “Welcome to FlutterFlow”. Ukazoval obrázky toho, jak vypadají mobilní aplikace v editoru, a měl tlačítka “Skip” a “Next”.
Klikl jsem na “Next” několikrát. Zvýraznil “Common UI Components” a “Widget Tree”, což vypadalo jako vnořený seznam všeho na stránce. Nakonec se ukázala obrazovka “Learn More” s odkazem na video a tlačítkem “Start Building”. Klikl jsem na něj, abych průvodce zavřel.
Hlavní editor je hodně obsáhlý. Uprostřed je prázdný rámeček mobilního telefonu. Vlevo je postranní panel s řadou ikon:
- Paleta widgetů: Zde jsou všechny prvky pro přetahování (Text, Column, Row, Container, Image, Button, Icon).
- Strom widgetů: Hierarchický přehled všeho na stránce.
- Výběr stránek: Pro přechod mezi různými obrazovkami.
- Firestore: Pro databázi.
- Nastavení aplikace: Ikona ozubeného kola.
- AI Copilot: Ikona ve tvaru hvězdy.
Chvíli jsem jen přejížděl myší po prvcích, abych zjistil, co jsou zač. Plátno bylo zcela prázdné, jen bílá obrazovka uvnitř rámečku telefonu.
Můj názor na úvodní nástěnku:
Rozhraní je husté. Rozhodně to není pro někoho, kdo chce „webovku za pět minut“. Vypadá a působí jako profesionální IDE (Integrated Development Environment).
Pokud jste někdy používali Photoshop nebo Figma, budete se cítit více doma, ale pokud jste zvyklí na základní tvůrce webů s přetahováním, může to vypadat trochu zastrašujícím způsobem.
3. Můj první pokus o generování pomocí AI
Nechtěl jsem vytvářet každý tlačítko a řádek ručně, pokud to nebylo nutné. Slyšel jsem, že FlutterFlow má vestavěný generátor stránek pomocí AI nazvaný “Copilot”, takže jsem se rozhodl to vyzkoušet.
V horní liště jsem si všiml malé ikony hvězdy, nástroje “Generate with AI (BETA)”. Klikl jsem na ni a objevilo se malé okno s textovým polem, v němž stálo “Describe the page you want to create…”
Měl jsem připravený konkrétní popis:
“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, data, and urgency fields, and a dashboard showing all requests with their status (pending, in progress, completed).”
Také jsem přidal podrobnou “Data Structure” pro AI:
- Tabulka Služby: ID, typ služby, popis, datum požádání, stav, naléhavost, obrázek.
- Tabulka Uživatelé: ID, jméno, e-mail, telefon, adresa, role (Customer/Admin).
V dolní části jsem si všiml počtu znaků: “737 / 1000 characters.” Byl jsem dobře pod limitem. Pokračoval jsem a klikl na fialové tlačítko “Generate Page”.
Objevila se stavová zpráva: “Page generation started.” Pak jsem čekal. Okno generování jsem trochu pohnul sem a tam a sledoval animaci “thinking”. Trvalo to asi 2 minuty, dost na to, abych se zamyslel, zda se nástroj nezasekl, ale pak se obrazovka náhle naplnila návrhem.
Výsledek byl “HomeService Pro”. Vypadal pozoruhodně kompletně. Viděl jsem:
- Hlavičku s nápisem “Welcome back, Sarah” a podtitulkem “Your home services dashboard”.
- Velké tlačítko “New Request” v fialovém rámečku.
- Mřížku “Quick Actions” s ikonami pro Plumbing, Electrical, Cleaning a Landscaping.
- Seznam “Recent Requests” ve spodní části, zobrazující položky jako “Kitchen Sink Leak” a “Deep House Cleaning” s označením stavu jako “Pending” a “Complete”.
Na levé straně okna AI byla vertikální lišta barevných koleček. Klikal jsem na ně, abych viděl, jak bude aplikace vypadat v různých motivech.
Pokaždé, když jsem klikl, se celá aplikace okamžitě přebarvila. Byly tam také názvy motivů jako “Professional & Refined”, “Tech AI” a “Readex Pro”.
Byl jsem s výsledkem spokojený, takže jsem klikl na fialové tlačítko “Insert Page” dole. Objevilo se malé vyskakovací okno a ptalo se na název “New Page”. Napsal jsem “ServicePortal” a přepnul volbu “Do you want to update entire project theme?”. Poté jsem klikl na “Create Page”.
Můj názor na generování pomocí AI:
To byla nejpůsobivější část celé zkušenosti. Očekával jsem generický layout, ale AI skutečně pochopila konkrétní služby, o které jsem požádal, a dokonce přidala odpovídající ikony.
Přepínače motivů byly příjemným detailem, který mi umožnil aplikaci během sekund odlišit brandingem. Měl jsem pocit, že jsem ušetřil tři hodiny práce na rozvržení za méně než minutu.
4. Řešení chyb a průzkum „pod kapotou“
Jakmile byla stránka vložena, vrátil jsem se do hlavního editoru. V pravém horním rohu jsem si všiml červeného kolečka s číslem “1”.
Zkušenosti mě naučily, že v těchto nástrojích červená obvykle značí problém. Klikl jsem na ni a otevřel se postranní panel nazvaný “Project Issues”.
Chyba zněla: Entry Page is not an existing page in the project.
Chvíli mě to zmátlo. Na svém seznamu jsem viděl stránku “ServicePortal”. Klikl jsem na chybu, ale nedozvěděl jsem se, jak ji opravit, takže jsem musel pátrat.
Uvědomil jsem si, že jsem smazal původní prázdnou stránku “HomePage”, takže aplikace nevěděla, kterou stránku má při spuštění ukázat jako první. Nakonec jsem našel ikonu ozubeného kola “App Settings” úplně vlevo.
Uvnitř v části “General” jsem našel nastavení “Initial Page”. Vybral jsem “ServicePortal” jako vstupní stránku a červená chyba zmizela.
Když jsem to procházel, chtěl jsem vidět skutečný kód.
Jedním z hlavních lákadel FlutterFlow je, že není “černou skříňkou”. Klikl jsem na ikonu </> v pravém horním panelu. Objevilo se okno “View Code”. Několik sekund tam bylo “Generating code…” a pak se objevil plnohodnotný editor.
Viděl jsem soubor service_portal_widget.dart. Mohl jsem procházet stovky řádků skutečného kódu v Dartu. Vypadal čistě a profesionálně, s importy jako import ‘package:flutter/material.dart’;.
Mohl jsem přepínat mezi zobrazením “Widget” a “Model”. Bylo fascinující vidět, jak je každá akce přetažení (moje nebo AI) v reálném čase přeložena do skutečného, použitelného kódu.
Prozkoumal jsem také některé další ikony vlevo:
- Firestore: Viděl jsem, kde mohu vytvářet “Collections” pro své služby a uživatele.
- Datové typy: Kde mohu definovat komplexní datové struktury.
- Vlastní kód: To bylo do hloubky. Mělo to sekce pro Custom Functions, Custom Widgets a Custom Actions. Dokonce tam byl vidět soubor main.dart.
Můj názor na chyby a náhled kódu:
Zpráva o chybě byla pro začátečníka poněkud vágní, ale fakt, že nástroj problémy okamžitě vyznačí, je skvělý. Funkce “View Code” vyniká.
Máte pocit, že stavíte “skutečný” produkt, ne jen dočasný prototyp. Poskytuje úroveň transparentnosti, kterou většina no-code nástrojů prostě nenabízí.
5. Náhled a kontrola aplikace
Další věc, kterou jsem chtěl udělat, bylo skutečně spustit aplikaci a vyzkoušet si, jak působí. Klikl jsem na ikonu oka v pravém horním rohu, což je tlačítko “Preview App”.
Otevřela se nová karta v prohlížeči s načítací animací “točícího se F”. Kompilace trvala asi minutu. Když skončila, viděl jsem plně funkční náhled své aplikace uvnitř rámečku mobilního telefonu.
Vyzkoušel jsem ji:
- Roloval jsem seznam “Recent Requests” dole. Rolování bylo plynulé a působilo nativně.
- Přejel jsem kurzorem nad ikony “Plumbing” a “Electrical” a reagovaly na mou myš.
- Klikl jsem na tlačítko “New Request”.
- Všiml jsem si, že maketa dat obsahovala položky jako “Outlet Installation” s označením “Priority: Medium” a datem “Scheduled: Tomorrow”.
Viděl jsem panel nástrojů v horní části náhledu, který mi umožňoval měnit “Size” náhledu. Přepínal jsem mezi:
- Mobile: 375 × 812 (výchozí)
- Tablet: 768 × 1024
- Desktop: 1440 × 900
Když jsem přepnul na desktop, uvědomil jsem si, že layout generovaný AI není zcela responzivní. Ikony se roztáhly přes celou obrazovku a vypadaly trochu nešikovně.
Bylo jasné, že i když AI poskytne skvělý začátek, stále je potřeba vrátit se do editoru a nastavit pravidla “Responsive”, chcete-li, aby aplikace vypadala dobře na všech zařízeních.
Můj názor na náhled a kontrolu:
Režim náhledu je pevný. Neukazuje vám jen obrázek vaší aplikace; sestaví její funkční verzi. Časy kompilace jsou trochu pomalé, ale výsledek je mnohem přesnější reprodukcí finálního produktu než u jiných tvůrců.
Ve svém testování jsem dále zjistil, že i když byl návrh generovaný AI skvělým „front-of-house“ začátkem, skutečná síla FlutterFlow spočívá v nastaveních „back-of-house“.
Zde aplikaci propojujete s reálným světem, spravujete historii práce a nakonec dostáváte aplikaci na telefony lidí.
Takto vypadá FlutterFlow na pokročilejší technické straně tvůrce.
6. Propojení mozků: databáze a integrace
Když jsem byl spokojený s vzhledem své stránky “ServicePortal”, chtěl jsem zjistit, jak vlastně uložím data pro tyto žádosti o služby. Klikl jsem na ikonu Firestore na levém postranním panelu.
Otevřel se panel, který ukazoval, že jsem dosud nevytvořil žádné “Collections”. FlutterFlow je navržen tak, aby perfektně spolupracoval s Google Firebase. Pokud bych to chtěl skutečně spustit, musel bych:
- Kliknout na “Create Collection” pro nastavení tabulek “Services” a “Users”.
- Propojit v nastaveních ID projektu Firebase.
- Povolit “Firestore” pro databázi a “Authentication”, aby se Sarah mohla skutečně přihlásit.
Ale nejde jen o produkty Google. Klikl jsem na záložku API Calls (ikona vypadá jako mrak se zástrčkou). Zde se skutečně otevřely možnosti integrace.
Je tu velké tlačítko “Add API Call”. Pokud bych chtěl například integrovat Stripe pro platby nebo API počasí pro kontrolu podmínek při zahradnických pracích, udělal bych to zde. Můžete definovat požadavky GET nebo POST, nastavit hlavičky a testovat volání přímo v tvůrci.
Prozkoumal jsem také složku Media Assets . Ze začátku byla prázdná, ale zde bych nahrával loga pro instalatérské a elektrotechnické firmy. Je zde jednoduché tlačítko “Upload Media” a podporuje přetahování obrázků přímo.
Nakonec jsem pro věci, na které tvůrce nestačí, našel sekci Custom Code . To je hluboký ponor pro vývojáře. Je rozdělena do:
- Custom Functions: Malé útržky kódu v Dartu pro matematiku nebo formátování dat.
- Custom Widgets: Pokud potřebujete konkrétní slider nebo graf, který FlutterFlow nemá.
- Custom Actions: Logika, která se spustí po kliknutí na tlačítko.
Můj názor na integrace:
FlutterFlow se nesnaží dělat všechno samo; funguje jako velmi sofistikovaný „manažer“ pro ostatní služby.
Integrace s Firebase je nejsilnější, jakou jsem kdy viděl v no-code nástroji, ale sekce API a Custom Code znamenají, že nikdy nezůstanete bez možnosti. Působí jako nástroj, který s vámi může růst.
7. Bezpečnostní sítě: verzování a snímky
Jednou věcí, která mě u no-code nástrojů obvykle děsí, je fakt „ups“. Náhodně smazat hlavní sekci a nemoci ji obnovit.
S úlevou jsem našel menu Version Control (ikona vypadá jako větvicí se cesty).
Když jsem na něj klikl, objevil se postranní panel “Version Control”. Ukázal mi větev “Main”. Byly tam tři záložky:
- Branches: Kde můžete vytvořit vývojovou větev pro testování nových funkcí, aniž byste rozbili “živou” aplikaci.
- Branch History: Seznam všech provedených změn.
- Snapshots: Zde jsem strávil čas.
Klikl jsem na “Snapshots” a zobrazil se přehled mé práce, včetně snímku s názvem “Argus” vytvořeného před 27 minutami. Kromě snímků je tam tlačítko “Commit”.
Působí to hodně jako práce s GitHubem. Můžete si uložit konkrétní stav vaší aplikace, pojmenovat ho (např. “Post-AI Generation”) a pokud to později zcela rozbijete, můžete se jednoduše vrátit k tomuto přesnému okamžiku.
Dokonce tam bylo tlačítko Connect to a GitHub Repo. Znamená to, že každou změnu v tomto vizuálním editoru můžete poslat do skutečného repozitáře na GitHubu, kde na tom pak může pracovat tým programátorů.
Můj názor na verzování:
Tohle je průlom pro profesionální týmy. Většina no-code nástrojů má jen základní tlačítko “Undo”. FlutterFlow má profesionální verzovací systém. Dává vám jistotu experimentovat, protože víte, že máte “Save Point”, ke kterému se můžete kdykoli vrátit.
8. Nasazení do provozu: zkušenost s publikací
Cílem je nakonec dostat aplikaci z editoru do rukou majitelů domů. Podíval jsem se do pravého horního rohu rozhraní, kde jsou ovládací prvky pro publikaci.
Panel Test & Run: V pravém postranním panelu je výrazná sekce nazvaná “Test, Run & Publish” s podtitulem “Use test mode for faster iteration.” Zde začíná proces nasazení.
Vidím dvě hlavní možnosti:
- Tlačítko Test (ikona fialové blesku) – pro rychlé testovací iterace
- FlutterFlow Local Run – stáhne desktopovou aplikaci FlutterFlow pro spuštění vaší aplikace na lokálních zařízeních
Pod tím je upozornění: “You must enable the web platform in settings in order to publish to the web.”
Je tam také sekce s textem “Below are the versions of your past builds or ‘run modes’. You can copy and share links.”
Zkušenost s Test Mode: Když jsem klikl na tlačítko Test, objevil se načítací screen se zprávami:
- „Preparing cloud resources…“
- „We are setting up a testing session for your app…“
- „This should take 2-3 minutes.“
Během čekání FlutterFlow zobrazuje užitečné tipy. V tomto případě: “FlutterFlow Tip #10: Master Layouts in FlutterFlow” s odkazem “Watch Now” na výukové video.
Aplikace se v testovacím režimu úspěšně načetla a ukázala můj Service Request Portal s:
- informacemi o relaci v horní části: “Current Load – Expires in 11 minutes”
- červené tlačítko “End Session”
- zelené tlačítko “Instant Reload” – pro rychlé obnovení změn
- záložky “Known Issues”, “Troubleshooting Info” a “Debug Panel”
- živým náhledem mé aplikace s 100% zoomem
Můj názor na testovací pracovní postup:
Testovací režim FlutterFlow je navržený pro rychlé iterace. 11minutová expirace vytváří pocit naléhavosti. Soustředíte se na testování konkrétních funkcí místo rozptýlení.
Tlačítko “Instant Reload” je k nezaplacení, když chcete vidět změny okamžitě, aniž byste museli znovu sestavovat celou relaci. Debug Panel poskytuje výstup konzole v reálném čase, což je zásadní pro zachycení chyb, jakmile se vyskytnou.
Můj celkový dojem z FlutterFlow
Po této zkušenosti mám na FlutterFlow jasný názor: je to vážný nástroj pro vážné lidi.
Pokud se snažíte jen vytvořit základní cílovou stránku nebo jednoduchý interní nástroj pro svůj tým, je to pravděpodobně příliš. Více času strávíte učením se rozhraní než samotným budováním.
Pokud jste ale podnikatel, který se snaží vytvořit skutečné MVP startupu, nebo vývojář, který chce pracovat desetkrát rychleji, je to fenomenální platforma.
Co se mi líbilo:
- AI je skutečně užitečná: Nedostali jsem jen obecnou šablonu; AI dodržela mé konkrétní pokyny a vytvořila kontextuálně relevantní stránku.
- Úplná transparentnost: Možnost vidět kód kdykoli znamená, že nejste nikdy skutečně „uvázáni“. Vždy můžete exportovat kód a hostovat si ho sami.
- Profesionální funkce: Svěřování verzí, historie větví a plná integrace Firestore z něj dělají nástroj, který vám měsíc nevystačí.
Na co si dát pozor:
- Strmá křivka učení: Tady není žádný „snadný režim“. Musíte rozumět tomu, jak fungují mobilní rozložení, abyste uspěli.
- Pomalá kompilace: Proces „build“ pro náhled trvá. Není to okamžitá zpětná vazba, jakou dostanete u některých webových tvůrců.
Ceny a plány
FlutterFlow nabízí čtyři hlavní tarify s regionálními slevami. Všechny plány zahrnují základní vizuální editor, ale výrazně se liší funkcemi pro spolupráci, možnostmi nasazení a limity generování AI.
| Plán | Cena (měsíčně) | Projekty | AI požadavky | Export kódu | Velikost týmu | Nejlépe pro |
|---|---|---|---|---|---|---|
| Free | $0 | 2 | 5 (trvale) | ✗ | 1 | Testování platformy |
| Basic | $15.60 | Neomezeně | 50/měsíc | ✓ | 1 | Samostatní tvůrci |
| Growth | $32 (1st seat) | Neomezeně | 200/měsíc | ✓ | 2 | Malé týmy |
| Business | $60 (1st seat) | Neomezeně | 500/měsíc | ✓ | 5 | Rostoucí firmy |
Detaily platby
- Přijímané způsoby platby: Platební karta, PayPal
- Roční sleva: Ušetříte přibližně 25 % při ročním předplatném
- Reklamační politika: 14denní garance vrácení peněz při první objednávce
- Skryté náklady: Připojení vlastních domén nad první bezplatnou stojí navíc (10 USD/měsíc za doménu). Přídavní spolupracovníci pro jednotlivé projekty jsou k dispozici v tarifech Growth (10 USD/spolupracovník) a Business (8 USD/spolupracovník).
Alternativa k FlutterFlow
Pokud je vaším cílem komplexní webová aplikace se zabudovanou backendovou logikou, silnou alternativou je Bubble.
Bubble běží jako webová aplikace se svým vlastním proprietárním runtime. Vnímejte FlutterFlow jako nástroj mobile-first, který náhodou podporuje web, a Bubble jako platformu web-first, která se dokáže přizpůsobit mobilním prohlížečům.
| Funkce | FlutterFlow | Bubble |
|---|---|---|
| Jednoduchost použití | Strukturované rozhraní založené na widgetech, které je vývojářům povědomé. Strmější křivka učení pro nastavení backendu (Firebase/Supabase). | Výkonný, ale složitý. Vizuální workflow a správa databází v jednom místě. Chce to čas na osvojení. |
| Nejvhodnější pro | Nativní mobilní aplikace (iOS/Android) vyžadující offline funkce a zařízení jako fotoaparát, GPS, push notifikace. | Webové aplikace, SaaS platformy, tržiště, administrativní panely, interní nástroje vyžadující složitou logiku. |
| Mobilní aplikace | Skutečné nativní aplikace pomocí Flutteru. Přímé nasazení do App Store a Google Play. Plynulý výkon a podpora offline režimu. | Progresivní webové aplikace (PWA) fungující v mobilních prohlížečích. Neposkytují skutečnou nativní funkčnost. Vyžadují nástroje třetích stran pro obchody s aplikacemi. |
| Backend a data | Vyžaduje externí backend (Firebase, Supabase, REST API). Více konfigurace, ale větší flexibilitu a škálovatelnost. | Vestavěný backend s databází, workflow a autentizací uživatelů. Vše v jednom ekosystému, ale méně flexibilní. |
| Design a flexibilita | Systém založený na widgetech s předpřipravenými komponentami. Čisté layouty optimalizované pro mobil. Import z Figma dostupný v vyšších tarifech. | Vysoce přizpůsobitelné rozložení pro web. Responzivní design pro mobilní prohlížeče může být krkolomný. Celkově více kontroly nad designem. |
| Výkon | Výkon téměř jako nativní mobilní aplikace. Aplikace se kompilují do efektivního kódu Flutter. Plynule zpracovává složité animace. | Výkon se může zhoršovat, jak se webové aplikace rozrůstají s náročnými workflow. Vyžaduje optimalizaci pro složité aplikace. |
| Cenové podmínky | Cena od 15,60 USD měsíčně. Export kódu zahrnut v tarifu Basic. Příplatky za další členy týmu v tarifech Growth/Business. | Cena od 42 USD měsíčně pro mobil. Cena se zvyšuje s pracovním zatížením (kapacitou serveru). Export kódu není podporován. |
| Vlastnictví kódu | Plný export kódu Flutter ve všech placených tarifech. Hostujte kdekoli, upravujte mimo platformu. Nikdy nejste uvázáni. | Export kódu není možný. Aplikace zůstávají na infrastruktuře Bubble. Opustit Bubble znamená vytvářet vše znovu někde jinde. |
Klíčový filozofický rozdíl: FlutterFlow předpokládá, že si přinesete vlastní backend, a poskytuje vám transparentnost prostřednictvím exportu kódu. Bubble spojuje vše v jednom, ale drží vás ve svém ekosystému. Žádný z nich není „lepší“. Jsou optimalizovány pro zásadně odlišné případy použití.
Závěrečné hodnocení FlutterFlow
FlutterFlow je vážný nástroj pro vážné stavitele. Pokud potřebujete nativní mobilní aplikaci v App Store nebo Google Play, je to jedna z nejrychlejších cest od nápadu k produkci.
Generování pomocí AI skutečně funguje, integrace s Firebase je bezproblémová a export kódu znamená, že nejste nikdy uvázáni.
Ale křivka učení je skutečná. Musíte rozumět pojmům jako datové struktury, volání API a responzivní rozvržení. Pokud jen testujete nápad nebo potřebujete jednoduchou webovou aplikaci, platformy jako Bubble nebo Softr to zvládnou rychleji.
Ideální použití: technicky zaměření zakladatelé vytvářející mobilně orientovaná MVP, vývojáři, kteří chtějí prototypovat desetkrát rychleji, nebo malé týmy s alespoň jednou osobou, která rozumí architektuře backendu.
