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 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!

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.

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.

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!