1. Results of the Hands-On Exercises
Exercise 02.
Second deployed example: https://booking-app-myyjbs.flutterflow.app/
the project for helloworld on the flutterflow
Bookedin helps your barbershop save time, reduce stress, improve your customer service and make appointment scheduling a breeze
booking-app-myyjbs.flutterflow.app
Unlike the first deployment, this one made heavier use of the default GUIs provided by FF, and I added a few small custom functions like "finding bookable dates" and "calculating the average star rating." This time I only set up the schema in FF, and added dummy data and extra collections by directly editing them in Firebase.
Exercise 1.
First deployed example: https://hello-my-flow-app-c1nf39.flutterflow.app/
the project for helloworld on the flutterflow
study for flutterflow basic corse
hello-my-flow-app-c1nf39.flutterflow.app
The first goal of the hands-on exercise was to implement CRUD with Firebase integration. The whole app consisted of onboarding, intro, signup, login, post list (home), post detail page, and comment list. In the end, the output came out with mostly "CR" (Create/Read) functionality implemented, and CR was only applied to the comments section for now.
2. Review
Prologue
I finally tried out FlutterFlow, which I'd been putting off for a while using overtime as my excuse.
For reference, Flutter is already a well-known framework, the one competing with React (though with recent updates, it feels like Flutter is one step ahead...). It's made by Google and can cross-compile not just Android and iOS apps but also web and desktop apps.
In the front-end development market, while Flutter and React duke it out, in the no-code market various builders (bubble, webflow, softr) have been coming out, and in that market there's a framework that's neither a pure builder nor pure development, but more of a hybrid form — namely, FlutterFlow.
Because Using It Is Different
For those who, as a product planner or as a designer, have always felt a kind of hunger — or who have felt the physical (scope-of-work) limits of their role — you'd wonder, "Could there be anything better than this?!" It has a vibe like: "You just think. I'll take care of building it!"
1. An extremely personal summary review
1) How to use it: Almost identical to the Figma interface.
2) Difficulty: About as difficult as someone switching from XD or Sketch to Figma.
3) Concept: In the end, it's a stack of columns and rows.
4) The point: A low-code-based full-of-full-stack framework.
*Multi-device deployment comes built-in,
*GUI (like Figma) + DB (Firebase integration) + SQL client (dashboard provided) + UI for creating and integrating APIs... and so on.
#GUI design - Figma-like interface
The reason FlutterFlow is powerful isn't just that it helps with the full development stack — it's that it can reflect planning and design as well. In that sense, it feels on a different level from other frameworks. Hooking it up with Firebase lets you set up the database, and the fact that you can immediately apply those configured values to the GUI is very attractive.
The screenshot below shows the ListView feature — the same role as Auto Layout in Figma (+ actual DB integration).
#Front-end : prototype as product
The prototype feature you'd find in Sketch, XD, or Figma is there of course. The real strength is that this flow isn't just for prototyping — the same flow is what actually gets built. Plus, it even produces development (deployable) files (aab, ipa).
On top of that, you can even import a design system you've worked on in Figma into FlutterFlow. Interfaces are provided for configuring dark mode, colors, display specs, and so on separately. You don't need to collect all your assets and design system elements on one page or in a corner the way you do in Figma — there are dedicated interfaces per element type. And of course, you don't even have to set things one by one — there are recommended settings and AI configuration features as well.
#Back-end : DataBase and DashBoard
When you hook up Firebase, you can set up the database from within the FlutterFlow page. Most of the core (essential?) things that SQL client tools like SQL Developer or DBeaver offer, you can set up quickly and easily in the configuration screen below. As you can see in the screenshot, you can also set up relationships between tables like post and comments. And just like an admin panel, it provides a simple interface for setting up dummy data per collection (table).
Not only that, it provides a Swagger-like interface for easily configuring REST APIs — and you can even test them on the spot — with a bit more detailed settings. And it also provides a graphical UI for handling exceptions for each API call.
#Versioning
On top of that, it also handles version control. For the record, if you don't update for a long time, it even sends you a notification first to remind you about version management.
Takeaways
Ever since Figma came out, cases where PowerPoint or Zeplin aren't used anymore have gradually increased. If FlutterFlow really takes hold, dependence on Figma too will probably drop quite a bit. Of course, the personal point I want to land on here is not "FlutterFlow instead of Figma!" It's more that, looking back at how product planners who no longer had to do PowerPoint (so-called documentation work) were able to focus on more essential things — user experience (and data), or agile coaching — I'm curious: if dependence on Figma drops on the design side, what kinds of work will grow in proportion? Extremely personally, I think that rather than staying trapped (as in the past or now) in display-(frame-)centric graphic design using Photoshop or Figma, interest and new approaches to more essential experience design (say, UX writing) will probably increase.
And that, I thought, might be the one area that is (at least for a while) uniquely safe from generative AI.
3. Official Links
FlutterFlow https://flutterflow.io/
FlutterFlow - Build beautiful, modern apps incredibly fast!
FlutterFlow lets you build apps incredibly fast in your browser. Build fully functional apps with Firebase integration, API support, animations, and more. Export your code or even easier deploy directly to the app stores!
flutterflow.io
FlutterFlow AI Gen https://flutterflow.io/ai-gen
Oh! Right! As a TMI, AI functionality is coming. That is, you'll be able to generate a GUI via a prompt — and not just a GUI but something actually ready to be deployed. Take a look at the link below and your mouth will water.
FlutterFlow AI Gen
Introducing FlutterFlow AI Gen. With a simple prompt, you can generate a stunning app design with code that is ready to implement into FlutterFlow with 1 click. Powered by the ChatGPT API.
flutterflow.io
