Aš naudoju FlutterFlow, kad sukurčiau visišką paslaugų užklausų portalą, kur namų savininkai galėtų užsisakyti santechnikos, elektros ir kraštovaizdžio priežiūros paslaugas. Išbandžiau AI generavimą, sujungiau su Firebase, peržiūrėjau versijų valdymą ir iškėliau į testavimo režimą.
Ši apžvalga apima kainų detalizavimą, AI tikrąsias galimybes, kaip atrodo kodo eksportas ir ar verta įveikti statų mokymosi kreivę.
Kas yra FlutterFlow?
Flutterflow yra vizualios programėlių kūrimo platforma, leidžianti kurti gimtąsias iOS, Android ir žiniatinklio aplikacijas nerašant kodo nuo nulio. Ji sukurta buvusių Google inžinierių ir pastatyta ant Google Flutter karkaso.
Užuot praleidę savaites mokydamiesi Dart ir Flutter valdiklių sistemos, FlutterFlow suteikia tempk-ir-mesk sąsają, kurioje galite:
- Vizualiai suprojektuoti ekranus naudodami iš anksto paruoštus komponentus
- Jungtis prie Firebase, Supabase arba naudoti savo API
- Generuoti puslapius pagal AI aprašymus
- I bet kuriuo metu eksportuoti švarų, skaitomą Flutter kodą
Unikalus FlutterFlow bruožas – skaidrumas. Kiekvienas jūsų vizualus pakeitimas iškart sugeneruoja Dart kodą, kurį galite peržiūrėti, atsisiųsti ir net redaguoti už platformos ribų. Jūs niekada neliekate įstrigę.
Kieno tai sprendimas?
FlutterFlow geriausiai tinka tiems, kuriems reikia tikrų mobiliesiems skirtų aplikacijų, o ne tik svetainių. Štai kam tai duoda didžiausią naudą:
- Startup įkūrėjams, kuriant MVP: jei paleidžiate paslaugų turgavietę, pristatymo programėlę ar rezervacijų platformą ir norite pasirodyti parduotuvėse per kelias savaites (o ne mėnesius), FlutterFlow jums tinka.
- Agentūroms ir laisvai samdomiems kūrėjams: nauda profesionalių funkcijų dėka. Versijų valdymo sistema leidžia kurti atskiras šakas, kodo eksportas – perduoti švarius Flutter projektus, o AI generavimas – pagreitinti pradinį dizaino etapą.
- Kūrėjams, norintiems greičiau dirbti: įvertinsite, kaip FlutterFlow tvarko nuobodžias mobiliųjų programėlių kūrimo dalis, pavyzdžiui, reaguojančius išdėstymus, navigacijos krūvas ir būsenos valdymą, bet vis tiek leidžia rašyti pritaikytą Dart kodą.
- Mažų verslų savininkams, turintiems techninį smalsumą: FlutterFlow tiks, jei norite mokytis. Tai ne Wix. Reikia suprasti duomenų struktūras, API skambučius ir reaguojantį dizainą.
FlutterFlow pliusai ir minusai
- AI generuoja kontekstualiai tikslius puslapius
- Tikras Flutter kodas, eksportuojamas bet kada
- Profesionalus versijų valdymas su šakomis
- Gimtosios Firebase ir Supabase integracijos
- Galima rašyti pritaikytą Dart kodą
- Gyvas temos perjungimas generuojant
- Widget medžias rodo tikslų hierarchiją
- Momentinis kodo peržiūrėjimas skaidrumui
- Tvarko sudėtingas duomenų struktūras puikiai
- Įmontuota API skambučių testavimo sąsaja
- GitHub saugyklos sinchronizacija pasiekiama
- Testavimo režimas su derinimo panelėmis
- Statūs mokymosi kreivė pradedantiesiems
- Reikia Firebase/Supabase pagrindų backend
- Nėra „lengvo režimo“ paprastiems darbams
Pasiruošę sužinoti, ar FlutterFlow tinka jūsų projektui? Pradėkite nuo nemokamo plano ir sukurkite vieną ekraną. Jei per valandą sukursite veikiančią prisijungimo formą, suprasite, ar verta skirti laiką mokantis.
FlutterFlow funkcijos
- Vizualus valdiklių pagrindu veikiantis mobiliųjų aplikacijų kūrėjas
- AI puslapių generavimas pagal tekstinius aprašus
- Firebase ir Supabase backend integracijos
- Realaus laiko Flutter kodo eksportas
- Git stiliaus versijų valdymas ir šakos
- Pritaikytos Dart funkcijos ir valdikliai
- Diegimas iOS, Android ir žiniatinkliui
- API integracija su pritaikytais antraštėmis
Mano praktinė patirtis su FlutterFlow
FlutterFlow pozicionuojama kaip „power user“ lygio be-kodo įrankis. Nusprendžiau sukurti programėlę, kur namų savininkai gali užsakyti santechnikos, elektros ar valymo paslaugas. Štai kas įvyko nuo pirmo paspaudimo iki kodo peržiūros.
1. Pradžia: Registracija ir pirmieji įspūdžiai
Kelionė prasidėjo adresu FlutterFlow.io. Tai labai moderni svetainė, tamsus fonas ir aukštos kokybės grafika, demonstruojanti sąsają.
Didelis šūkis „Build Better. Launch Faster“ iš karto patraukė mano dėmesį. Viršuje – navigacijos juosta su skyriais Product, Resources, Pricing, Enterprise ir AI.
Buvo „Log In“ mygtukas ir ryškus „Start for Free“ mygtukas. Neužtrukęs paspaudžiau „Start for Free“.
Buvau nukreiptas į registracijos puslapį (app.flutterflow.io/create-account). Matėsi keli prisijungimo būdai:
- Prisijungimas su Google
- Prisijungimas su Apple
- Prisijungimas su GitHub
- Prisijungimas su Microsoft
Nusprendžiau eiti įprastu keliu: įrašiau vardą, el. paštą, slaptažodį, patvirtinau ir paspaudžiau „Create Account“.
Ekranas pakvipo, violetinis FlutterFlow logotipas sukosi kelias sekundes, ir mane pasitiko keli klausimai.
Jie aiškiai nori žinoti, kas naudoja jų įrankį. FlutterFlow klausė:
- Kokia jūsų pagrindinė rolė? (pasirinkau Developer)
- Kaip apibūdintumėte savo darbo vietą? (pasirinkau Startup)
- Ar turite kodavimo patirties? (pasirinkau „A Lot“)
- Kam norite kurti aplikacijas? (pasirinkau „My Company“)
- Ar svarstote samdyti ką nors aplikacijos kūrimui? (mano „No“)
Atsakius atsirado mygtukas „Start Building“. Spaudžiu ir patenku į projektų skydą – švarų, bet tuščią.
Paspaudžiau „Create New“, įvedžiau pavadinimą „Service Request Portal“ ir dar kartą paspaudžiau „Create New“.
Mano įžvalgos apie registraciją:
Onboarding procesas kiek užtrunka, bet aiškiai padeda pritaikyti sąsają pagal jūsų lygį. Jautėsi profesionaliai, kaip rimtai programinei įrangai, o ne mėgėjiškam įrankiui. Patekau kaip „developeris“ ir tai iškart pajutau.
2. Skydelio naršymas ir pradžios nustatymai
Po registracijos iškart atsidūriau pagrindiniame skydelyje. Tamsus fonas, viršuje dešinėje – „Create New“. Spaudžiu, atsiranda langas su projekto pavadinimu. Įrašau „Service Request Portal“.
Žemiau matosi daugybė „Starter Apps“ ir šablonų kategorijų:
- Business
- E-Commerce
- AI & Chat
- Dashboard/CRM
- Food & Delivery
Norėjau tuščio lapo, tad pasirinkau „Start Building“. Sugrįžo sukimo ekranas ir atsidūriau redaktoriuje.
Prieš pradedant – „Welcome to FlutterFlow“ turas su „Skip“ ir „Next“. Spaudžiau „Next“ kelis kartus, kol pamatė „Start Building“ – paspaudžiau ir turas dingolo.
Redaktorius įspūdingas: centre – tuščias mobiliojo telefono kadre, kairėje – šoninė juosta su piktogramomis:
- Widget Palette: tempk-ir-mesk elementai (Text, Column, Row, Container, Image, Button, Icon).
- Widget Tree: puslapio hierarchija.
- Page Selector: ekranų navigacija.
- Firestore: duomenų bazė.
- App Settings: pavarėlės piktograma.
- AI Copilot: žvaigždutės piktograma.
Mano įžvalga apie pradžios skydelį:
Sąsaja įtempta. Ne ketinate „penkių minučių svetainės“. Atrodo lyg profesionalus IDE. Jei dirbote Photoshop ar Figma, jausitės geriau, bet puslapiai kūrėjui – ne paprastam tinklalapių statytojui.
3. Pirmasis AI generavimo bandymas
Nenorėjau kurti kiekvieno mygtuko rankomis. Žinojau, kad FlutterFlow turi „Copilot“ – AI puslapių generatorių, tad jį išbandžiau.
Viršuje – žvaigždutės piktograma „Generate with AI (BETA)“. Spaudžiu, atsiranda langelis „Describe the page you want to create…“.
Parašiau:
„Kliento portalas, kuriame namų savininkai gali užsakyti paslaugas (santechnika, elektra, valymas, kraštovaizdis) ir stebėti užklausų būseną. Būtina vartotojo autentifikacija, užklausų forma su laukais paslaugos tipas, aprašymas, data, skubumas ir skydas su visomis užklausomis (laukia, vykdoma, baigta).“
Pridėjau duomenų struktūros detalę:
- Services Table: ID, Service Type, Description, Requested Date, Status, Urgency, Image.
- Users Table: ID, Name, Email, Phone, Address, Role (Customer/Admin).
Matėsi skaičius „737 / 1000 characters“. Spaudžiu „Generate Page“.
Po kelių minučių pasirodė dizainas – „HomeService Pro“:
- Antraštė „Welcome back, Sarah“ su potekste.
- Didelis „New Request“ mygtukas violetiniame lange.
- Tinklelį „Quick Actions“ su ikonėlėmis santechnikai, elektrikui, valymui, kraštovaizdžiui.
- „Recent Requests“ sąrašas apačioje su pavadinimais ir būsenos žymėmis „Pending“, „Complete“.
Galėjau perbraukti temą kairėje spalvų rate. Kiekvienąkart programa persidažė. Temų pavadinimai: „Professional & Refined“, „Tech AI“, „Readex Pro“. Spaudžiu „Insert Page“, įvedu „ServicePortal“, pažymiu „update entire project theme?“ ir spaudžiu „Create Page“.
Mano įžvalga apie AI generavimą:
Tai buvo įspūdingiausia dalis. Tikėjausi generinio išdėstymo, bet gavau tiksliai tai, ko norėjau, net su atitinkančiomis ikonėlėmis. Temų perjungimas leidžia per kelias sekundes paruošti aplikacijos stilių. Skraidžiau virš jungtukų tris valandas sutaupęs per minutę.
4. Klaidos sprendimas ir „po gaubtu“ funkcijos
Įterpus puslapį pamačiau raidę „1“ raudoname rate viršuje dešinėje – „Project Issues“. Spaudžiu:
Klaida: Entry Page is not an existing page in the project.
Supratau: ištryniau originalų „HomePage“, tad programa nežino, ką rodyti startuojant. Suradau „App Settings“ (pavarėlė) → „Initial Page“ → pasirinkau „ServicePortal“. Klaida dingo.
Tada norėjau pamatyti kodą:
Spaudžiu </> viršuje. Langas „View Code“ rodė „Generating code…“ sekundę, po to – redaktorių su realiu Dart kodu service_portal_widget.dart. Kodas atrodo švarus, profesionalus.
Kairėje dar radau:
- Firestore: kuriami Collections „Services“, „Users“.
- Data Types: sudėtingų duomenų tipų apibrėžimai.
- Custom Code: Custom Functions, Custom Widgets, Custom Actions, net main.dart.
Mano įžvalga apie klaidas ir kodo peržiūrą:
Klaidos pranešimas beginner’iams galėtų būti aiškesnis, bet jis momentinis. „View Code“ funkcija – išskirtinė. Jaučiatės, lyg kurtumėte tikrą produktą, ne prototipą.
5. Aplikacijos peržiūra ir tikrinimas
Spaudžiu „Eye“ viršuje – „Preview App“. Atsidaro naujas skirtukas su sukimosi animacija, po minutės gaunu veikiančią programėlę telefone.
Išbandžiau:
- Slinkau „Recent Requests“ – sklandus slinkimas.
- Hover virš ikonų – reagavo į pelę.
- Spaudžiau „New Request“.
- Matėsi mock duomenys: „Outlet Installation“, „Priority: Medium“, „Scheduled: Tomorrow“.
Preview viršuje leidžia keisti dydį:
- Mobile: 375 x 812
- Tablet: 768 x 1024
- Desktop: 1440 x 900
Desktop režime AI sugeneruotas išdėstymas šiek tiek deformavosi – reikėjo rankiniu reaguojančių taisyklių.
Įžvalga: Preview režimas solidus – tai veikianti aplikacija, o ne tik paveikslėlis. Kompiliavimo laikas kiek lėtesnis, bet rezultatas tikslus. AI dizainas puikus startas, bet reali galia – „vidinėse“ nuostatose, jungiant su tikrais duomenimis.
6. Galvų sujungimas: Duomenų bazės ir integracijos
Man patiko, kaip sujungti tikruosius duomenis. Spaudžiu Firestore:
Nėra Collections, tad:
- Kuriu „Services“ ir „Users“
- Susiejimas su Firebase projekto ID
- Įjungiu Firestore ir Authentication
Tada peržiūrėjau API Calls:
Galima pridėti GET/POST skambučius, antraštes, testuoti viduje. Media Assets – logo ir paveikslėliai įkeliami trauk-ir-mesk.
Tada radau Custom Code:
- Custom Functions: maži Dart kodo fragmentai
- Custom Widgets: specifiniai grafikai, slankikliai
- Custom Actions: logika mygtuko paspaudimui
Įžvalga: FlutterFlow veikia kaip pažangi paslaugų valdymo priemonė. Firebase integracija – geriausia be-kodo įrankiuose, bet ir API bei Custom Code skyriai leidžia niekada nelikti įkalintiems.
7. Saugos tinklai: Versijų valdymas ir momentinės kopijos
Bijojau netyčia ištrinti skilties ir negrįžti atgal. Laimė, yra Version Control:
„Branches“, „Branch History“, „Snapshots“. Snapshots istorija – mano darbas, pvz., „Argus“. Galiu kurti šaką, pavadinti momentinę kopiją („Post-AI Generation“) ir vėliau sugrįžti.
Yra net galimybė Connect to a GitHub Repo – kiekvienas pakeitimas gali atsidurti realioje GitHub saugykloje.
Įžvalga: Profesionalus versijavimas be-kodo įrankyje – retas atvejis. Galite drąsiai eksperimentuoti, nes visada grįšite į tašką.
8. Išleidimas į gamybą: Publikavimo eiga
Viršuje dešinėje – „Test, Run & Publish“:
Du pagrindiniai variantai:
- Test: violetinė žaibo ikona – greitiems iteracijoms
- FlutterFlow Local Run: parsisiunčiamas desktop app vietiniam testavimui
Turi įjungti web platformą nustatymuose, jei publikuosi žiniatinklyje. Po Test spaudimo:
- „Preparing cloud resources…“
- „We are setting up a testing session…“
- „This should take 2-3 minutes.“
Užtrunka apie minutę. Ekrane patarimai: „FlutterFlow Tip #10: Master Layouts in FlutterFlow“ su nuoroda į pamoką.
Test Mode rodė:
- „Current Load – Expires in 11 minutes“
- „End Session“ (raudonas mygtukas)
- „Instant Reload“ (žalias) – greitam atnaujinimui
- „Known Issues“, „Troubleshooting Info“, „Debug Panel“
- Gyvas programėlės peržiūros langas
Įžvalga: Test Mode skirta greitam iteravimui. Laikas ribotas – fokusas tikrinimui. „Instant Reload“ ir Debug panelė būtini klaidoms sekti gyvai.
Bendros išvados apie FlutterFlow
Po šios sesijos nuomonė aiški: tai rimtas įrankis rimtiems žmonėms.
Jei norite paprasto leidinio puslapio ar paprasto vidinio įrankio, tai per daug. Prireiks daugiau laiko mokantis nei kuriant.
Bet jei esate verslininkas, kuriantis mobilų MVP, arba kūrėjas, norintis dirbti 10× greičiau – fantastiška platforma.
Patiko:
- AI iš tiesų padeda: ne generinis šablonas, o kontekstinis puslapis pagal nurodymus.
- Visiškas skaidrumas: bet kada matote kodą, galite eksportuoti ir niekada neliekate įstrigę.
- Profesionalios funkcijos: versijų valdymas, Firestore integracija – neperaugtumėte mėnesį.
Atsargiai:
- Statūs mokymosi kreivė: nėra „lengvo režimo“ – prireiks suprasti mobiliųjų išdėstymus.
- Lėtas kompiliavimas: preview build užtrunka – ne taip greita, kaip kai kurie žiniatinklio statytojai.
Kainodara ir planai
FlutterFlow siūlo keturis pagrindinius lygius su regioniniais nuolaidomis. Visi planai turi vizualinį kūrėją, bet skiriasi bendradarbiavimo įrankiais, diegimo galimybėmis ir AI užklausų limitais.
| Plan | Kaina (mėnesinė) | Projektai | AI užklausos | Kodo eksportas | Komandos dydis | Tinka |
|---|---|---|---|---|---|---|
| Free | $0 | 2 | 5 (visam laikui) | ✗ | 1 | Platformos testavimui |
| Basic | $15.60 | Neribotai | 50/mėn. | ✓ | 1 | Vieno kūrėjo |
| Growth | $32 (pirmam naudotojui) | Neribotai | 200/mėn. | ✓ | 2 | Mažoms komandoms |
| Business | $60 (pirmam naudotojui) | Neribotai | 500/mėn. | ✓ | 5 | Augančioms įmonėms |
Mokėjimo detalės
- Priimami metodai: kreditinė kortelė, PayPal
- Metinis nuolaidos planas: ~25% sutaupote, jei mokate metams
- Grąžinimo politika: 14 dienų pinigų grąžinimas pirmai pirkiniui
- Slepiamos išlaidos: papildomi domenai $10/mėn., projekto bendradarbiai Growth $10/vnt., Business $8/vnt.
Alternatyva FlutterFlow
Jei siekiate sudėtingos žiniatinklio aplikacijos su backend logika, stipri alternatyva yra Bubble.
Bubble veikia kaip žiniatinklio aplikacija su savuoju varikliu. Galvokite apie FlutterFlow kaip mobiliems skirtą įrankį, palaikantį web, o Bubble – kaip web pirmą platformą, adaptuojamą mobiliesiems naršyklėms.
| Funkcija | FlutterFlow | Bubble |
|---|---|---|
| Naudojimo paprastumas | Struktūruota, valdiklių sistema pažįstama kūrėjams. Backend nustatymai sudėtingesni (Firebase/Supabase). | Galinga, bet kompleksinė. Vizualūs srautai ir DB valdymas vienoje vietoje. Reikia laiko išmokti. |
| Tinka | Gimtosios mobiliosios programėlės (iOS/Android) su offline ir įrenginių funkcijomis. | Žiniatinklio programėlės, SaaS, turgaus vietos, prietaisų skydai su sudėtinga logika. |
| Mobilios programėlės | Tikros gimtosios per Flutter. Tiesioginis diegimas App Store ir Play Store. Sklandi sparta ir offline palaikymas. | PWA mobiliesiems naršyklėms. Ne tikrasis natyvusis. Reikia trečiųjų šalių įrankių parduotuvėms. |
| Backend & duomenys | Reikia išorinio backendo (Firebase, Supabase, REST API). Daugiau nustatymų, bet lankstesnis ir keičiamas. | Integruotas backend su DB, srautu ir autentifikacija. Viskas vienoje ekosistemoje, bet mažiau lanksti. |
| Dizaino lankstumas | Valdiklių sistema su paruoštais komponentais. Mobiliesiems optimizuotos išdėstymo galimybės. Figma importas aukštesniuose planuose. | Labai pritaikomas žiniatinklio išdėstymas. Reaguojantis dizainas mobiliesiems naršyklėms gali būti sudėtingas. Daugiau kontrolės. |
| Sparta | Artima gimtajai mobiliųjų spartai. Flutter kodas efektyvus. Sudėtingos animacijos sklandžiai veikia. | Didėjant aplikacijų sudėtingumui sparta krenta. Reikia optimizuoti sudėtingus srautus. |
| Kainodara | Prasideda nuo $15.60/mėn. Kodo eksportas įtrauktas Basic plane. Papildomi komandos nariai už papildomą mokestį. | Prasideda nuo $42/mėn. mobiliems. Kaina didėja pagal apkrovą. Nėra kodo eksporto. |
| Kodo nuosavybė | Pilnas Flutter kodo eksportas visuose mokamuose planuose. Host‘ink bet kur, keisk už platformos ribų. | Nėra kodo eksporto. Programėlės lieka Bubble infrastruktūroje. Palikimas reiškia perrašymą kitur. |
Pagrindinis skirtumas: FlutterFlow remiasi jūsų pačių backend, suteikia skaidrumą per kodo eksportą. Bubble viską apjungia, bet „laiko įkalintus“ savo ekosistemoje. Nei geriau, nei blogiau – tiesiog skirtingi tikslai.
Galutinė FlutterFlow įvertinimas
FlutterFlow – rimtas įrankis rimtiems kūrėjams. Jei jums reikia gimtosios mobiliųjų app App Store arba Play Store, tai vienas greičiausių būdų nuo idėjos iki gamybos.
AI generavimas veikia, Firebase integracija sklandi, kodo eksportas – niekada neliekate įstrigę.
Bet mokymosi kreivė reali. Reikia suprasti duomenų struktūras, API skambučius, reaguojančius išdėstymus. Jei tik testuojate idėją arba jums reikia paprastos žiniatinklio aplikacijos, Bubble ar Softr padės greičiau.
Saldžioji vieta: techniniai įkūrėjai, kuriantys mobiliems pirmą MVP, kūrėjai, norintys prototipuoti 10× greičiau, arba mažos komandos, turinčios bent vieną backend specialistą.
