Exploring FlutterFlow

FlutterFlow – How good is it? Is it ready for production? Let’s find out!

Key takeaways

What is FlutterFlow good for?

If your goal is to:?

1. Build a prototype to quickly understand user interactions?
2. Quickly test new features with users
3. Create a quick proof of concept to understand how a potential widget tree could be built?

then FlutterFlow is a great tool.

If your goal is to build a production app the answer is, it depends if you can live without:?

1. Distinction between environments such as Production, Staging, and Development
2. Distinction between what platform the app is running on to cater for the user’s expectations (i.e., the app will look the same on both iOS and Android)
3. Localisation support for variants of the same language (e.g., American vs. British English)
4. Detailed debugging and a clear stack trace

If you can, then FlutterFlow is great for apps that aren’t complex. If you’re creating an app that has complex features such as non-standard animations, non-standard transitions, or non-trivial interactivity, then you’re likely to spend just as much time trying to figure out why things aren’t working or looking online for help as you would building the app in code.

Introduction to FlutterFlow

Recently Flutter has been making waves in the app development community. Flutter – built using the Dart programming language – is an open-source framework by Google for multiplatform development. It aims to create one code base for multiple platforms – namely iOS, Android, and web. Unlike other frameworks, Flutter is not a wrapper and interfaces with the native C++ frameworks of iOS and Android.

So if Flutter is a framework, then what is FlutterFlow?

FlutterFlow is a drag and drop low code interface to assist in building mobile and web apps developed by two former Google engineers. FlutterFlow builds apps by generating Flutter code. Basic mobile apps can be made without much code, but coding is required for more intricate state management (such as calculating data or transforming data based on input).?

FlutterFlow provides a desktop application to which you can deploy and test your project via a web browser and using FlutterFlow’s web services. To deploy the project to a device, one must upgrade their payment plan from the free tier and then download the code.

Why consider FlutterFlow for building mobile projects?

FlutterFlow aims to accelerate the creation of production-ready apps. There is less time spent developing apps for the same output as coding them from scratch. You can produce apps for iOS, Android, and web apps with a single code base – cutting down the time it takes to build for multiple platforms.

As a visual development tool, it is useful for rapid prototyping by quickly understanding how the visual elements change and adapt at different screen resolutions. Developers can quickly ascertain if a certain approach to building UI is feasible with given constraints.

The visual aspect of FlutterFlow also allows developers to navigate the Widget Tree and gives a quick understanding of what widgets can be redrawn when necessary. On a more technical side, because FlutterFlow generates Flutter code, which draws the UI using the OS’s OpenGLES interface, it runs faster than other frameworks.

If you are not familiar with either Android or iOS, FlutterFlow cuts down the need to understand the configuration files such as Android’s multiple gradle files, or iOS’s info.plist file.

It also handles the setup for connecting to Firebase – no more having to go to Firebase to set up new apps, download the JSON configuration files and figure out where to place them.

Do you need to be a traditional mobile developer to use it?

The short answer is no. Even a regular Joe can create music without knowing music theory.

The longer answer is you don’t have to be, but it would help to understand the limitations of mobile and how a user interacts with one to create great mobile applications.?

As alluded to before, a FlutterFlow developer will eventually need to dive into coding if they desire a more than basic app. FlutterFlow does provide an AI helper to generate code, but it doesn’t always get everything right, and you cannot rely solely on it to create a mobile application.

For example, let’s say you have a subscription payment where the user can pay per week, month or year. You will want a drop-down list or toggle to switch between the frequencies and display the costs in comparison. And you will need to perform calculations to get the final amount.

What are the strengths of FlutterFlow?

Speed

As mentioned, FlutterFlow is good for quickly visually building a UI with minimal coding and doing away with boilerplate code. You can turn clusters of widgets into components for easy reuse, and giving them parameters is easy. You can create stylesheets for fonts and colours and even import data from Figma to quickly create such data.

Setting up a basic app with a database login is super fast, and if you’re new to FlutterFlow and know nothing about backend development, then you can easily integrate with Firebase Authentication.?

Low barrier of entry

FlutterFlow on the free tier is enough to learn how to use Flutter and decide if it’s worth the time and effort without committing to a payment plan. The fact that the tool itself has a web interface and optional desktop app makes it usable by anyone with a browser (Windows, MacOS, Linux, ChromeOS). The low barrier of entry opens the tool up to anyone curious and can help train potential new developers.

Easy to integrate In-App Purchases and analytics

FlutterFlow allows for easy integration of Braintree (PayPal), Stripe, Google Analytics and Ad Mob with detailed documentation. This skips all the requirements of importing libraries, dealing with updating libraries and library conflicts.

Storyboard view

FlutterFlow lays out all the pages into a storyboard – much like Xcode – allowing developers to quickly take in and understand the flow of screens and what causes new screens to appear. This ability allows for debugging where a flow might have gone wrong.

No boilerplate code required

You won’t be spending your time writing the same code over and over again with minimal difference. Time can be better spent concentrating on making the UI look like the designs from your UI designer and making the UX behave the way the designer outlined.

Creating the network layer is easy as much of it is done for you. All you need to do is create the API calls in an interface similar to Postman's.

Responsive rename refactoring

As you build the app, you will come across times when you want to rename a custom widget or code function. Upon doing so, all references to the widget or code function will also be updated.

Makes Flutter more elegant to work with

Flutter is notorious for the “pyramid of doom” in coding UI. This is because Widgets are made to do one thing and one thing only, e.g. a Text widget can only display text, and a Padding widget can only define padding around its child widget. FlutterFlow obscures the “pyramid of doom” and makes it look like the widget tree is smaller than it is. This is great because you don’t have to worry about filler widgets such as padding or where in the code you need to add a colour or change the corner radius of a Container widget.?

Community support and documentation

While FlutterFlow is new and has a small community, it is a well-documented tool with many people willing to help. Because it uses Flutter, it also benefits from the Flutter documentation for “custom” code as well as all the libraries that have been developed by the Flutter community.

Where does FlutterFlow fall short?

No distinction between platforms

This is an important shortcoming to note if you want your app to look like a real app. Very early on in using FlutterFlow you will notice that the “App Bar” – the bar at the top – can only have one style. That style remains the same regardless of the app running on iOS or Android. This means you can only have one type of back arrow, and the title must be either in the centre or the left.?

Lack of localisation support for the same language in different variants

While FlutterFlow can use localisation, it can’t distinguish between different variants of the same language.?

Equally, unlike native iOS, Android and even Flutter development, there is no central place for strings. So if you want to change the word “OK” to “Continue”, then you will have to go through every screen looking for every instance where the word “OK” should change to “Continue”. There is no global search feature, so unlike Xcode, Android Studio, or Visual Studio Code, it is difficult to look for where a string is used if there’s a typo.?

Deployment and testing speed

Where speed of development is concerned, FlutterFlow is great for quickly laying out the UI. However, the speed it makes up for can be perceivably lost by waiting for the FlutterFlow server to build the app.?

When deploying the app for the first time, resources are allocated on the FlutterFlow servers to compile and build the app. That process takes up to 3m. Once that is completed, a 12-minute session starts, after which the application needs to be rerun and resources reallocated.

The “Instant Reload” feature refreshes that session and reduces redeployment time. Unfortunately, unlike Flutter’s “Hot Reload” feature, where saving your work causes the app to reload itself with the changes while staying on the same screen, the app reloads from the beginning, which means you have to navigate back to the same screen.

Fortunately, if your app requires your user to log in, the app will begin from the landing page after first logging in. Despite this, the amount of time waiting for the app to initially fire up and for the “instant reload” is non-trivial and can feel like a bottleneck in viewing changes.

No distinction between environments (Production, Staging, Development etc.)

This is quite a huge downside from a technical perspective. Unless you’re willing to duplicate everything from one FlutterFlow project to another or manage multiple development branches for each environment in your repository, there is no natural support for different environments.

Using the visual interface

From a non-developer perspective, there are a few niggles with the UX that can create points of contention. Such UX choices include not being able to select multiple similar widgets at once, not being able to reorder widgets in a widget that supports multiple widgets (such as list, column, or row), and not being able to use the undo stack effectively. If you do need to change the order of widgets then you need to drag each one up to the top of the list in reverse order and if you make a mistake you will have to repeat the process.

Debugging and problem-solving

The creature comforts of debugging – setting breakpoints, detailed stack trace, printing to the console and viewing a screen in 3D for iOS – are limited to only being able to print to the browser console and limited stack trace. This is down to the app being built on the FlutterFlow servers rather than locally.?

In a paid plan, you could push your code to Github and run in your IDE, but that adds to the development time. Additionally, since the Github, FlutterFlow integration is one way, all changes need to be made in Flutterflow.

Concluding thoughts

FlutterFlow has a lot of potential. It’s useful for prototypes and quick proof of concepts. Despite its limitations for production-ready applications, we can’t wait to see how it evolves and becomes the de-facto tool for building mobile and web applications.