Interview FlutterFlow, a third-party visual application builder for the Flutter framework, now has custom functions for the addition of Dart code, but developers may still find it too limiting.
Low-code visual application builders do not come much easier than FlutterFlow, a browser-based environment for creating mobile applications with Flutter.
There is nothing to install: Users start a new project in the browser, and build a user interface by drag and drop, using reassuringly chunky icons and components ranging from simple lists and buttons, to AudioPlayer, WebView, VideoPlayer, or GoogleMap. Layout elements determine how components are positioned, including containers, rows, columns, grids, tabs and cards.
Bringing the user interface to life is a matter of selecting a component and setting its properties, including layout options such as colours, fonts and padding; actions such as navigation or API calls, connections to database queries, and animations to add some pizzazz.
Controls can be bound to data in order to display query results, including user authentication to manage access to the data. A preview mode shows roughly how the application will work at runtime, though currently without live data, authentication or API calls. A Run mode does a full compilation but takes a few minutes to prepare.
FlutterFlow builds mobile apps for Android and iOS
The main option for connecting to data is Google's Firestore, part of its Firebase platform, though the ability to make API calls, REST GET or POST calls to any endpoint, means that server code could call other sources of the developer's choosing, but outside the FlutterFlow environment.
Once completed, a project can be run in the browser and deployed to the iOS App Store or downloaded as an APK for Android. It is also possible to download code generated by FlutterFlow and import it into another environment for completion, though it is one-way and there is no means of importing modified code back into the FlutterFlow environment.
FlutterFlow was launched in May, but this month brought a significant new feature: custom functions. This lets developers add Dart code (the language used by Flutter) to a project, defining functions which can take arguments derived from the data bound to a control.
Pricing is free for trying things out with browser preview; $30 per month for the additional ability to download code and APKs; and $70 per month to add custom APIs, GitHub integration, which updates a repository when code is modified, iOS deployment, and management of Firebase content. One codebase supports both iOS and Android.
If FlutterFlow seems to have a Google flavour, that is not only because Flutter is a Google project, but also because the co-founders of FlutterFlow are ex-Google engineers, Abel Mengistu and Alex Greaves, though not from the Flutter team.
"We left to start a company, we were going to do an AI recommendation engine for some totally different space," Mengistu tells The Reg. "We felt we did the difficult part and then we tried to build the app in front of it." It was then that they explored Flutter and came to the conclusion that although excellent it was lacking an easy-to-use visual designer.
"Once we got designs from our designer we spent a lot of time just trying to perfect the code so that it matches the design," Mengistu says. "Code did not feel like the quickest way to do that. That was the initial motivation."
- Google fiddles with cross-platform Flutter and Dart to boost performance, tooling
- Canonical: Flutter now 'the default choice for future desktop and mobile apps'
- Google's multi-platform app framework Flutter reaches version 2, expands to the web
- Canonical turns to Google framework for new installer, but community asks why not have a Flutter on GTK?
They started talking to potential users and found that many of them had common requirements for flows such as login or other common patterns. "It's the same logic, implemented over and over again. So we thought having an end-to-end experience for these common flows should be easy. Trying to take the abstraction layer higher than programming concepts like conditionals and functions, a flow that you can drag and drop and add to your application."
Although abstraction of common patterns is nice, there is no substitute for the power of custom code alongside. Prior to the introduction of custom functions this month, the main idea for adding code was via a GitHub repository which FlutterFlow keeps updated with the code it generates. "It goes into a separate branch so it doesn't conflict with other code. "They can merge it in, and if you added some code such as for a button press, the git merge handles it fine," Mengistu says.
The FlutterFlow environment is purely for application development, not hosting of custom services. "We don't do hosting because we think Firebase does it really well," Mengistu tells us. There are plans to integrate with other services in future but "right now we're focused on trying to provide the best value we can with these early feature sets."
How can FlutterFlow compete with other low-code offerings from the cloud giants, such as Microsoft's Power Platform, Google AppSheet or Amazon Honeycode? "I think they're more focused on the enterprise space," says Mengistu. "A lot of the users we're getting are not users of those platforms. The existing tools were not working for them."
What then is the exact niche that FlutterFlow fills? "Yearly there are hundreds of thousands of applications developed and pushed to the app stores. Power Apps, for example, with Microsoft is very targeted for internal organizational units. We've seen a lot of users who want to build apps much faster."
What kinds of apps are FlutterFlow users building? "Things like educational apps, we've also had a company that was working on COVID vaccination sites. For non-profits we give free access. We've also seen people build community apps. Apps are extremely expensive to build, the median cost is I believe $100,000. So if you want a local community app it's too expensive to develop, but we can dramatically reduce the cost or increase the productivity," Mengistu reveals.
A big feature, as Microsoft discovered decades ago with Visual Basic, would be the ability for third parties to build components that others can include in applications. Is that planned for FlutterFlow? "That's definitely something we want to enable. It's hard for me to predict exactly when. Already you can build components inside FlutterFlow that you can easily reuse, but to have something that works across app, that unlocks a lot of possibilities."
Features are being added relatively quickly. Since June, the team has added the audio component, visual transitions, a PageView component, phone authentication with Firebase, Search and Google Maps, support for new devices sizes, developer team management, payments via PayPal, Google Pay and Apple Pay, conditional widget visibility, text overflow control, custom code functions and custom code function validation.
Developing a custom function in FlutterFlow
At the same time, it is easy to pick holes in the platform. The code editor for custom functions is crude, for example, and the tie to Firebase is limiting. In an enterprise context, the system would benefit from connectors to key platforms like CRM systems as well as other database managers. FlutterFlow, compared to an IDE like Android Studio, Xcode, Visual Studio or Visual Studio Code, feels limited and constrained, and the Run mode painfully slow. The one-way code export is a major annoyance for those accustomed to tools that let developers switch seamlessly between code and visual development.
The challenge now will be to improve the functionality without losing the ease of use which is FlutterFlow's main appeal. ®
