Learning FlutterFlow — Low code app builder for Apple and Google Android devices based on Flutter
Wait, what is FlutterFlow?
FlutterFlow is a low-code visual application builder that creates Flutter based apps. Flutter is an open-source software development kit created by Google for developing cross platform applications for Android, iOS, Linux, macOS, Windows, Google Fuchsia and the web from a single codebase. Flutter is most commonly used for the development of mobile phone apps for iOS and Android. Developing an application in Flutter is non-trivial. There are a lot of moving parts in mobile apps and platform differences between iOS and Android. There is also a new programming language, Dart, and the complexity of the Flutter framework to get to grips with. Wouldn't it be amazing if there was a way to accelerate visual app design and the development, so as to be able to quickly get a fully functioning flutter based app built and into the App Store and Google Play for early feedback, for a minimum viable product (MVP) or for a production quality app? — That's FlutterFlow, and you can Sign up to FlutterFlow easily by following the referral link.
FlutterFlow tech notes and demos

It is well worth taking the time to set out the entire platform for your Flutter based project with FlutterFlow before you start. The least expensive way to make an error about the structure or the naming in your project is on paper before you start. You'll thank me later.
Think about all the pieces of the FlutterFlow puzzle
You'll need a FlutterFlow Subscription or trial and to work through the Getting Started turorial of course, but there are also other tools you may need. I would recommend setting out a System Map/ diagram of your whole platform from FlutterFlow and other development tools to target platforms and devices. This is a good time to think about your project naming, and how to keep product marketing naming out of your platform naming too. Once you've done that, you're ready to get into FlutterFlow app building. Start with FlutterFlow Settings including FlutterFlow Theme Settings, and then try out an integration of Google AdMob with FlutterFlow, and an integration of Google Maps with FlutterFlow. Once you have a working app, you can think about adding GitHub integration to FlutterFlow, so that you can control the actual Flutter source code that Flutter generates. This s part of the power of FlutterFlow. It is not a no-code environment. It is an augmentation to professional development workflow.
TL:DR — FlutterFlow is far ahead of any competition and integrates with professional development and devops environments well. Having published hundreds of apps over the years, and lately having published my first app entirely built with FlutterFlow I can say it is viable for production of proper mobile apps of any scale, from minimum viable product, through to sophisticated apps of production quality. But you still need to think about the details of your project and the best way to do that is to document your work, if only for future you.
- Details
Read more: Building an app in FlutterFlow: Episode 1 – A new app

Using internet_connection_checker with FlutterFlow
FlutterFlow can be used to build even more sophisticated apps now that it supports custom functions, widgets and actions. This additional functionality helps make apps more professional. In this article we will show the end user a Snack Bar if there is no Internet. It is a nice polished app behaviour. It is not necessary to show a snack bar if we are connected, as we hope to be. We are just trying to inform the end user that they are not connected and this serves as a hint that there may be some differences in App behaviour.
The snack bar can be implemented by setting up actions on the scaffold on each page to check the internet connection and subsequently show a snack bar if there is no connection.
TL:DR — With some effort it is straighforward to make a FlutterFlow app feel more professional for your end users. Sure there's now custom code in a low code platform but it is carefully contained in specific functions in FlutterFlow and doesnt need to get out of hand.
- Details
Read more: Snack Bar Internet connection action in FlutterFlow

Flutter development requires a set of applications and operating systems components to work in concert with one another. This is often called a toolchain and thats the term I prefer since it indicates that they are dependent on one another and is generic enough to convey that the tools come from multiple vendors. FlutterFlow allows you to avoid much of the complexity of these tools by delivering much of the development environment in a browser. However for real on device testing and complex app debugging for example for banner adverts or in-app purchases you really need local debugging tools on real devices.
If you can stretch to it the Mac Studio is an amazing, powerful and almost silent desktop computer which is perfect for developers too. My Mac Studio is 64GB, M1 ultra, and 1TB SSD. It is the best computer I have ever had, replaced my obsolete Mac Pro (2013) which had been on 24 hours a day for almost ten years.
TL:DR – macOS is a great choice for a development environment provided you do things the Apple way and don't think you are running Linux. Any current Mac computer will be fine.
- Details
Read more: Flutter based app development with FlutterFlow on a Mac

Google call Firebase an "app development platform that helps you build and grow apps and games users love". There are many services available as part of the Firebase brand from Google but for FlutterFlow we are be interested in Cloud Firestore, Cloud Messaging, and Cloud Authentication.
You can create Firebase collections and their documents directly from FlutterFlow once you complete setup and link your Firebase project to your FlutterFlow project.
You'll need to setup Firebase and then complete the Firebase integration settings in FlutterFlow
TL:DR — FlutterFlow apps with authentication, sign-in and real time data via cloud firestore really stand out as professional apps.
- Details
Read more: Authentication, sign-in and real time data in FlutterFlow

RevenueCat makes in-app purchases and subscriptions possible with FlutterFlow based apps. With RevenueCat, you can allow users to purchase subscriptions and make certain features paid. Setting it up was non trivial, as it involved systems from Apple, Google, RevenueCat and in this case Flutter tools provided by FlutterFlow. I have it working in an app built with FlutterFlow which is published in the App Store and Google Play now so I know it can be done. Once everything is set up I fear it will be quite brittle and difficult to diagnose issues but thats where we are given the number of inter-connected platforms in the mobile market. It is also quite difficult to remember all the moving parts so this article is really my documentation as much as anything. Anyhow before you write a line of code or do any FlutterFlow work you need to take care of the foundations carefully.
TL:DR — It takes a lot of effort to make a FlutterFlow app handle in app purchases. This is not really a FlutterFlow problem. More that there are many moving parts from different software and cloud vendors and a whole new set of terminology to understand.
- Details
Read more: Implementing RevenueCat in-app purchases in a FlutterFlow app

Push notifications can be hard work but are powerful differentiators between apps that are just toys and production apps that deliver value.
Push notifications add real depth to your FlutterFlow based app. Push requires Firebase Cloud Messaging (FCM) from Google. FCM is a cross-platform messaging solution that lets you reliably send messages at no cost. This article assumes you have Firebase working. FlutterFlow presents a simplified approach to this which you can build upon effectively using Firebase cloud messaging. But you will still need to pay careful attention to the management of certificates and provisioning profiles.
TL:DR — FlutterFlow apps with push notifications really stand out as professional apps. Push can be hard work. FlutterFlow makes it as simple as it is possible to make it work but there are a lot of moving parts.
- Details

FlutterFlow has supported Firebase and other cloud based data stores for ages now, and more recently has added App State variable supports for data so as to make app development more straightforward. These can be used with very effective cacheing but there are many cases where completely offline and local data storage capabilities would be useful. Our mobile apps that pre-date FlutterFlow have used SQLite for years since it is built-in to both iOS and Android phones and is a small, fast, self-contained, high-reliability, full-featured, SQL database engine. SQLite is highly stable, and used in countless mobile apps you use all the time so it is a very welcome addition to FlutterFlow.
What can you do with SQLite in FlutterFlow?
FlutterFlow provide a working example note taking app that demonstrates the SQLite functionality, So this article will implement it and build it onto a real device to check out the functionality.
To get started open the example project from FlutterFlow and clone it into your own FlutterFlow environment https://app.flutterflow.io/project/note-taking-app-zto2ua
TL:DR — SQLite is an important addition to the FlutterFlow toolbox so lets build out the example app for ourselves and see how well the functionaluty is integrated
- Details

It would be quite an understatement to say that working with API's and FlutterFlow is quite hard. Theres a huge level of understanding required to get the most out of this low code tool. It is worth it though. Persevere and you have an easily maintainable mobile application, with the benefit of the source code should you need it. Fortunately there are tools which can help to make sense of it all. Lets look at an example of an API and how to integrate it with FlutterFlow. Im going to use Joomla which has an API with a complex structure. Specifically I need to get Joomla API content in the form of articles, to display in my mobile app.
The end result – Joomla Articles in a Flutter app
The end result is a very pleasing app, with great performance, and because it is built in FlutterFlow it is really easy to maintain, update, adjust, and add new functionality.
You can't test API calls in the FlutterFlow builder, so the easiest way to debug is to download the code and build and run it on a real device. As soon as you do this all the standard debugging tools for Flutter become available to you.
Below is a Google Pixel 6a which is connected via a USB cable to the host computer. It is making the connections to the Joomla site API over WiFi. You can load the Flutter DevTools on a running app to observe whats going on on your device and you can see from the network tab the details of the API call.
The Title, Image, Image Caption, Summary text, Author and Date modified in the applications user interface all come from separate elements of the API response and are repeated for each article using a listview and dynamic children. There is also a FlutterFlow custom function in Dart which turns the date returned from the Joomla API into a better readable human date to display on the Card a bit more like how it would be presented in Joomla on the website.
Joomla API in a Flutter app


TL:DR — With patience you can build powerful apps using Joomla as a backend to FlutterFlow underpinned by the Joomla API.
- Details

Material Design is an adaptable system of guidelines, components, and tools that support the best practices of user interface design. The latest version is Material 3. FlutterFlow supports Material 3, and I thought my next app should try to build some best practices and consistency with it from the start.
FlutterFlow theme widgets save time laying out your app by enforcing consistency. If you decide to change the properties of a theme widget, such as color or font, you can update the theme widget in one place instead of going through every widget on every screen individually.This also has the benefit that you won't inadvertently use the wrong property on one widget in your app making a better overall look.
I guess more of these widgets could be baked in to FlutterFlow but building them for each widget you need in your app is quite quick and effective.
TL:DR — FlutterFlow has strong support for typography, colours, icons, and theming. FlutterFlow supports Material 3, but some work is required to build each element as a theme widget. There is a case for this being out of the box functionality, but it is relatively easy to set up a theme and material 3 theme widgets. Using theme widgets enforces consistency and saves time while building your app.
- Details