Get started with Rowy in minutes
✨ New - Build APIs, Scheduled Jobs, Backend Workflows! Try out BuildShip ->
FlutterFlow and Rowy are a great match for low-code development because they provide together a user-friendly, fast, collaborative, and scalable solution for building and deploying full-stack web apps. FlutterFlow has a drag-and-drop interface that makes it easy for non-technical users to build any front-end client, and Rowy provides a low-code backend platform for developers to build and manage APIs, databases, and serverless functions.
In the following article, we will show you how to build a FlutterFlow app that connects to a Rowy backend. We will use Rowy's countries template as a backend example, build the frontend in FlutterFlow, and sync the two.
First, follow the setup guide to connect FlutterFlow to Rowy.
This step only takes a few minutes. You'll just need to add FlutterFlow to your Firebase users, specify your Firebase project ID in FlutterFlow, and adjust the Firestore Security Rules.
Then, we create a backend for our FlutterFlow app in Rowy, using the Countries demo. This demo contains a document schema to list countries with their name, capital, flag, and so on. In this article, we'll display the countries stored in Firestore in a FlutterFlow app.
To keep the example short and simple, we only add 3 countries to the database:
Rowy is a Firebase CMS that provides data storage, Cloud functions, and a REST API to manage your data in a low-code environment with a simple spreadsheet user interface. All the data is synced with Firebase and Google Cloud, so it's a great solution to build backend logic visually and collaboratively.
After connecting Firebase to FlutterFlow in step 1, your data will automatically be imported after specifying the collection schema to match in FlutterFlow. For example, we can import the name, capital, and flag properties of the countries documents:
FlutterFlow instantly recognizes the content of your Firebase database:
Next, we can focus on building our front-end client. We add a simple ListView component to display this data as a list in our FlutterFlow app, and then we tell FlutterFlow to query the countries collection from Firestore and use it to populate the children components:
Then, we add a first ListTitle component to display the country name and flag. To do so, you can just select a variable to display in the component properties and FlutterFlow automatically creates the sibling components for us:
It's that simple. You can't see it in the Designer view, but the data is already being fetched from Firestore and displayed in the app―we just need to build the app to see the data appear.
After building the app, we can see the countries displayed in our FlutterFlow app:
FlutterFow generates a preview link you can use to bring your friends and colleagues to test your app:
Of course, this is only a basic example and you'll need to develop more app pages and actions to navigate from one to another to obtain a complete app. But this is how it works in practice.
Additionally, there is a lot more you can do by combining the features of both Rowy and FlutterFlow.
For example, you use Rowy to easily roll in Firebase authentication in your app, and FlutterFlow to build the UI for the login page:
You can also define Rowy webhooks to run custom code against your database upon receiving an API call from a FlutterFlow action. This is helpful to implement complex features like sending emails:
For simpler CRUD features to manipulate your Firebase data from the front-end, FlutterFlow proposes built-in actions to do just that. For example, to create a new Firestore document:
You can also combine this CRUD feature with Rowy Actions to run one-time scripts and Rowy Derivatives to automatically update related data in the background.
In all cases, Rowy automatically syncs with actions inside a FlutterFlow app, and FlutterFlow apps sync with Rowy tables.
We made it! You now know how to use Rowy and FlutterFlow together to build a complete app. As you can read, the possibilities are endless. Rowy and FlutterFlow really complement each other well.
If you have any further question, ask away in our Discord channel.
