FlutterFlow: A New Low-Code Tool That Generates Mobile App Code
The Growing Shortage of Professionals Must Be Addressed
📅 2021.06.06 - 👤 Borbély Viktor
source: www.flutterflow.io
This year, Google’s grand annual event, Google I/O, returned. It was held between May 18 and 20, this time in the online space. However, we are already used to this. There was no shortage of innovations, the online tool called FlutterFlow debuted, which is a low-code (requiring little coding) tool. I tried it and am sharing the experience.
I follow low-code tools and try them because they already make up for the shortage of professionals present in IT. I have already written about the UICode solution, which brings the Figma designers and app developers camps closer together.
Where I’ll get with the FlutterFlow example
I looked at what it can do through a simple example. This is the final result. In this case, I launched it in the Chrome browser because Flutter’s Web support is first-class. It would look the same on mobile.
The final result is completed.
Preparations for trying FlutterFlow
The online tool is available at www.flutterflow.io, where I registered with a Google account and immediately accessed the interface.
It immediately guides you through setting up a project, which consists of giving a name. Let’s give it a name and we can start creating the interfaces. Before that, it offers to prepare a solution based on an existing template, or to start with an empty one with completely free hands.
In the example, I started with an empty project because I was curious how complicated it is to play with it. Of course, learning videos are available, which greatly help if we get stuck.
In the left menu, we can see the list of selectable widgets (small graphical components). There are plenty of them, I could choose to my heart’s content.
Just drag and drop the component onto the pre-made Home screen. Here I specified a list where each element is a product image and its name.
Editing screenshot is very simple.
Then I created another screenshot, similarly simply, where the app navigates when we click on a row.
This became the Details screen. At the top is a large image, below it with different formatting its name, description, country of origin, price. Formatting works with the usual comfortable settings: font size, bolding, italics, color, alignment. Simple.
The product details screen.
Where FlutterFlow low-code really shines
So far we could say it’s not bad, but show something really cool!
This is none other than the fact that we can connect our existing server (BackEnd). This can be our own existing interface, or even Google Firebase cloud solution. In the example, I tried the Firebase integration, which does require some expertise but is not an impossible mission. Basically, the usual settings need to be done, and it worked for me the first time.
I won’t describe the steps, but the point is that we can specify the structure in which data arrives from our server. For this, we create a data type and use it everywhere later.
On the home screen, we fill the list with data coming from the server. We already take the product image address and name from this data type. If we select an item, we remember which one it was, and on the details screen we display more detailed information about it. It’s that simple. All this while it doesn’t hurt if we’ve seen code before, but we don’t have to write code. Rather, we just fill in tables for it.
There are many things in FlutterFlow’s basic toolset, for example, in preview we get a clickable wireframe, which is good for getting a sense of the final product. Often this is enough for users to figure out what the app does.
The rapidly growing IT professional shortage makes it difficult to start or finish projects in many areas. Low-code, no-code, or cross-platform solutions can alleviate these burdens. With these, developer positions can be filled, which a CEO might have to wait years for.
Free or paid?
I started with the free part, where I could try out its main function of creating screens. Then I wanted to download the code to try it out.
For a monthly $30 USD, we get the code, which means we’re spared many hours of coding.
In Pro, we have to pay $70 USD per month for it, which could be useful for a mobile app development studio.
In any case, the first 14 days are free, so we can decide if we would spend on it?
For now, it’s still a fresh, first version, so there may be many bugs in it.
Conclusion
In summary, about the FlutterFlow low-code web application, it can be said that it was worth trying. It can do many features already now, which will expectedly expand further soon.
The appearance of this and numerous tools launched in recent times clearly proves that the Flutter UI framework faces a great future. Not just mobile, but it’s also conquering web and desktop platforms.
If you have further questions about this tool or mobile app development itself, I’m available on my contact page or on LinkedIn.