close
address. Gaston Geenslaan 11 B4, 3001 Leuven
s.
All Insights

Discovering FlutterFlow: the good, the bad, and the ugly

When I discovered FlutterFlow, I was pretty excited but also skeptical. Since I like trying new things, I made an account on FlutterFlow and started experimenting. Spoiler alert: I was pleasantly surprised! In this blog, I will describe my experience working with FlutterFlow: the things I noticed, the things I liked, and the things I didn't like.

Written by
Sarah Mussen

Earlier this year, I learned how to work with Flutter. To be honest, I did not particularly like it. To be fair, I liked it more than the alternatives, but I quickly got lost in the structure. For example, you need to place text in a button in a column in a row in a container. To me, it felt like a puzzle. I had to figure out how to place the pieces and, on top of that, work out which pieces I needed to use. Until I discovered FlutterFlow.

When I discovered FlutterFlow, I was pretty excited but also skeptical. Low-code (and no-code) platforms have been popping up everywhere lately and are gaining attention. I understand the appeal to people with no or little development experience. Still, personally, I find that those platforms, while making front-end development very easy, they can also make some things very complicated. I sometimes find myself thinking: coding would have been more straightforward. However, since I like trying new things, I made an account on FlutterFlow and started experimenting. Spoiler alert: I was pleasantly surprised!

A quick note: this blog will not be a technical review of how you do certain things in FlutterFlow. I will describe my experience working with FlutterFlow: the things I noticed, the things I liked, and the things I didn't like.

Creating a project

When you start to create a project, FlutterFlow offers a lot of templates, like any other low-code platform. What I liked most is that when you hover over a template, you can see what features are used in that particular template. I double-checked, and Webflow, for example, also informs you of the features, but you have to click twice and be directed to a different page to see them. Let's be honest, you might do that to check out one or two templates, but it quickly becomes too much of a hassle. So good points on user experience for FlutterFlow!

Creating a new project in FlutterFlow
Creating a new project in FlutterFlow

Creating a page

When you start creating a page, FlutterFlow offers templates for commonly used pages like settings and log-in. After selecting a template, FlutterFlow immediately asks if you want to keep the original theme of the template or use the theme you chose for your project. This means you can create an entire page for your app in a mere two clicks.

There is, of course, not a template for every page you might need. So, I also tried making a page from scratch. FlutterFlow offers a list of elements you can drag and drop on your page. Some essential elements include text, button, image, and handy features like animations, charts, and map integrations. I spotted 'column', 'container', and 'row' in the list, and for a moment, I thought I still had to puzzle the front-end together. But no worries! You can use them if you want to, but you don't need to.

When dragging elements on the canvas, FlutterFlow will ask you how you want these elements placed: do you want them next to each other, do you want them underneath each other, … Based on your answer, it will add the correct structure around your elements. Very convenient!

FlutterFlow asks what structure to apply when creating a page
Building a page in FlutterFlow

You can edit every element on the right side of the interface. This is a standard approach, but I mainly noticed how all the buttons felt intuitive. I didn't have to think about what this icon might mean or do. For some extra explanation, you can always hover over the button. The only inconvenience I found is that you can't increase or decrease the value of a number with the arrow keys, which is a tiny issue, but it is also something I do often.

The interface to create a page, with on the left side a tree structure and on the right side edit options
The FlutterFlow interface

Adding a custom widget

One of the strengths of Flutter is the vast community of people creating custom components. I wanted to see if FlutterFlow has the same kind of community, as it is a very convenient way to integrate original and complex components. I was pleased to see you can use the packages of the Flutter community (pub.dev) and incorporate them into your Flutterflow project. You have to pay attention to two things: the packages need to be supported for the web and need Null Safety support. New packages mostly fit the requirements; old packages usually don't.

When trying out the custom widget feature, I experienced some significant flaws for the first time since working with FlutterFlow:

  • The code editor shows errors on anything imported. It clearly states you should ignore them, but it makes the actual errors less visible, not to say unnoticeable.
  • It takes around 2 minutes to compile the written code, meaning that every time you change the code, you will have to wait 2 minutes to see the change.

This does slow down the process a lot. For example, you write some code, and you forget a comma. You don't notice it since there are a lot of errors anyway. So, you start compiling the code. After two minutes, FlutterFlow tells you that you forgot a comma. So, you add the comma and have to compile again for two minutes. Not ideal.

The custom widget code editor
Creating a custom widget

FlutterFlow Documentation

While doing my little experiment, I consulted the FlutterFlow documentation several times. FlutterFlow has by far one of the best documentation I have ever seen. They explain everything, assuming you don't have any previous knowledge, meaning it is effortless to understand. Every topic is also accompanied by a couple of GIFs that visually explain what the text is talking about. And if that is still not enough, FlutterFlow also refers to video tutorials on YouTube that explain everything step-by-step. I hope they keep the documentation and tutorials up-to-date with future updates.

Conclusion

Next time I need to make a Flutter app, I will definitely use FlutterFlow. It is much easier, more intuitive, and quicker than building a Flutter app from scratch. However, I do hope the app won't need too many custom integrations because that would be a real hassle. Have you already used FlutterFlow? Let me know what you thought!

Written by
Sarah Mussen

Subscribe to our newsletter

Raccoons NV (Craftworkz NV, Oswald AI NV, Brainjar NV, Wheelhouse NV, TPO Agency NV and Edgise NV are all part of Raccoons) is committed to protecting and respecting your privacy, and we’ll only use your personal information to administer your account and to provide the products and services you requested from us. From time to time, we would like to contact you about our products and services, as well as other content that may be of interest to you. If you consent to us contacting you for this purpose, please tick below:

By submitting this form, you agree to our privacy policy.

In order to provide you the content requested, we need to store and process your personal data. If you consent to us storing your personal data for this purpose, please tick the checkbox below.

More blog articles that can inspire you

13/09/2022

A Couch Potato's Running Journey Pt.1: From Zero to V2O

How AI will help me form a new habit and reach my goal of running 10 miles. Discover my first month of AI-powered traini...

what we do

Socials

address. Gaston Geenslaan 11 B4, 3001 Leuven