Using FlutterFlow to Build High-Powered Mobile Apps

By Yelyzaveta Danilova

Hey, my name is Liza and I’m a Flutter Developer at Customertimes. For more than 8 years, I have been engaged in mobile development, closely following the development of technologies in this field. I switched from Android to Flutter development 3 years ago, and I don’t regret it. 

Every year, new tools appear that allow users to optimize the development process, making it more accessible to a wide range of people. Today I’d like to share what it’s like to use FlutterFlow, a low-code platform for developing mobile applications. 

What is Flutter? 

Flutter is an open-source software development kit created by Google for building multi-platform applications using the programming language Dart, optimized for fast apps on any platform. It is used to develop cross-platform applications for Android, iOS, macOS, Windows, Linux, and Web applications from a single codebase.  

Flutter was released in May 2017, and to date, more than 400,000 apps built with Flutter have been shipped to hundreds of millions of devices. 

What is FlutterFlow? 

FlutterFlow is a powerful low-code platform that can be used to create high-quality mobile and web applications based on the framework Flutter. It has a drag-and-drop interface that allows users to create user interfaces and workflows without having to write code from scratch. Additionally, it provides access to a variety of pre-built components and widgets that can be customized to meet specific application requirements. 

FlutterFlow is a browser-based tool that allows you to build fully functional, scalable applications with Firebase integration, API support, animations, localization, push notifications, payments, and more. You can also build custom functions or widgets with Dart to extend the existing functionality. 

However, it’s important to note that while low-code platforms like FlutterFlow can be useful for quickly prototyping and building applications, they may not be the best choice for creating complex or highly customized applications. In some cases, it may still be necessary to write custom code to achieve the desired functionality. 

Who is the ideal Flutter user? 

FlutterFlow is a tool for non-technical users to create software applications from scratch without knowledge of programming languages. It can be used to create various types of applications starting with MVP demo projects and ending with a full-fledged mobile application oriented towards a wide audience. 

Users can create a multi-platform mobile application without a single line of code. FlutterFlow provides a convenient drag-n-drop interface with the ability to switch to the Widget Tree and not mess with the layout.  

To get the maximum benefit, an understanding of fundamental development approaches would be a plus, but even with only a basic understanding, you can still get a great result.  

Pricing 

FlutterFlow provides 4 different plans for users.  

They offer a free plan, which allows users to try out the tool before purchasing it to see if it’s a good fit for their organization. If you’re using the free plan, you won’t have access to APK files, but you will be able to run your application, test it, and take a look at the code.  The code download option is disabled for free plan users, but you will have access to all files.  

If you want to collaborate with a team on a project or want to be able to download or publish APK files, you will need to purchase a plan. All pricing options and features are spelled out on the site.  

FlutterFlow also provides a list of experts who can help you build your solution, or you can reach out to Customertimes, and our team can quickly help you navigate your development process so your application can be launched quickly.  

How it works  

FlutterFlow allows you to choose from several pre-existing templates that make the development process even easier, or you can create a blank app and build your UI from scratch.  

As an example, we used an open public API, CoinStats, to get and display the dynamics of daily price changes from the market cap. The user interface has a ListView with items, which builds dynamically based on API response. Up and Down icons have conditional visibility based on price change, and appear on the screen with primitive rotate animation.  

You can write custom functions, widgets, actions in the Custom Code tab, but you cannot modify the code generated automatically from the UI builder.  

Click here for an example of autogenerated widget Dart code.

How long does it take? 

How much time do you need to implement such a simple project?  

This took me less than 20 minutes, but before my first attempt, I spent 1-2 hours learning where I should put my API call, how to name some of the variables, where to create these variables, etc.  

If you are an experienced developer, you’ll be able to build something like this manually using IDE in a short period of time, but to build something for the first time in only 1-2 hours? It sounds incredible because it really is.   

And with FlutterFlow, you don’t need to write boilerplate code again and again. Working with drag-n-drop interface is fun and much easier.  

Did my knowledge of Flutter on Dart help me get this done faster? Yes, for sure.  

Is it important to have that knowledge? Not really.  

Simply create a UI with a convenient interface and write a minimum of code for small tasks. Non-technical users may not be able to do it in the same 1-2 hours, but it will certainly be faster than learning a programming language.  

Tips for beginners 

Before you get started, here are a few tips to help make your project easier:  

1. Choose your recommended browser. As mentioned in the documentation, Google Chrome is the preferred browser for FlutterFlow. I’ve tried other browsers, and I definitely experienced some performance and usability issues with the build. I ended up switching to Chrome in the middle of the project, so it’s better to just start out using Chrome from the beginning.   

1. Do not skip the tutorial. It is pretty short, but it will help you learn the main functionality of the tool. It was a bit outdated, but that won’t keep you from finding all the necessary tools and familiarizing yourself with the platform.  

1. Do not skip the Firebase setup. When you start your project, you’ll be asked to add Firebase. It is optional, but if you don’t connect to Firebase, the available features will be limited, and you’ll most likely end up adding it anyway. Just set it up at the beginning. It’s simple to do, and it will pay off in the long run.  

Conclusion 

If you’re considering using FlutterFlow for a production application, carefully evaluate your requirements and determine whether the platform can meet your needs. Consider factors like scalability, security, and performance, and if you’re still unsure, consult with an experienced developer to get their insight on your specific use case.  

In my experience, FlutterFlow is an easy-to-use tool that can help you turn your ideas into a viable software application. The platform is developing quickly, and though they’re still fixing some bugs, they’re updating it quickly to make the product even better.