A FlutterFlow CMS With Rowy: Installation, How-To & Example (2023)

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.

1. Getting Started

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.

2. Database Powered By Rowy

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:

the countries table with 3 countries to display - 0.jpg

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.

3. Front-End Development With FlutterFlow

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 schema - 1.jpg

FlutterFlow instantly recognizes the content of your Firebase database:

FlutterFlow database match - 2.jpg

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:

FlutterFlow list view - 4.jpg

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:

FlutterFlow list title - 5.jpg

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.

4. Testing The Final Result

After building the app, we can see the countries displayed in our FlutterFlow app:

FlutterFlow app, final result - 3.jpg

FlutterFow generates a preview link you can use to bring your friends and colleagues to test your app:

FlutterFlow preview link - 6.jpg

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:

FlutterFlow authentication page - 8.jpg

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:

FlutterFlow API call - 7.jpg

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:

FlutterFlow CRUD - 9.jpg

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.

Join Rowy On Discord

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.

Get started with Rowy in minutes

Continue reading

Browse all