Notes and takeaways on the experience
When I launched Travel Keeper (an app that helps you create maps by destination to share your recommendations or plan your next trip), I used Bubble to quickly build and test the idea.
Bubble’s no-code platform was perfect for building rapidly to validate my concept and gather feedback from users.
But as the app grew, I needed to create a native mobile experience to meet customer demand. It was the number one piece of feedback I received.
When I evaluated options for building a mobile app version, I wanted more functionality than a progressive web app or wrapped Bubble app could provide. But I also wanted to reduce the complexity of migrating to a completely new tech stack.
I decided to use FlutterFlow to recreate the front-end functionality and combine it with my existing backend database and workflows from Bubble, using an API integration.
Flutterflow’s visual development environment was the best choice for recreating user functionality in a native mobile environment without having to dive deep on learning code for Apple and Google’s app development frameworks.
In this post, I’ll walk through my experience integrating a FlutterFlow mobile app with a Bubble backend, highlighting tools I used, issues I faced, and how I solved them.
Why Combine FlutterFlow with Bubble?
The goal of this integration was simple: take advantage of FlutterFlow’s native mobile capabilities while continuing to leverage Bubble’s database and backend workflows. This approach helped me avoid the complexity of migrating to a new backend and learning new programming languages.
(Note: As of this publishing, Bubble is working on a native app solution, but it was not available at the time of this project).
Key Tools Used
Two tools were essential in connecting my app with Bubble functionality:
Backend Workflows: I used Bubble’s backend workflows to create and handle key actions initiated from FlutterFlow, such as sign-up & login, and other custom workflows for my functionality that I originally handled on both the client- and server-side in Bubble. I had to build these workflows and enable API access to them to allow my mobile app to function in a similar way.
Data API: I relied on Bubble’s Data API to manipulate data for key elements, in my case travel lists, recommendations and other items that were all already stored as separate tables in my database. The Data API allowed me to perform basic CRUD actions on these items - creating, reading, updating, and deleting records stored in Bubble’s database.
Challenges and Solutions
1. Data API Setup: A Cumbersome Process
Setting up Bubble’s Data API was trickier than I expected. You have to configure your tables and fields in one screen, enable API actions for that specific table in another, and then update privacy rules in yet another screen to define API access.
Once all that's done, any changes made need to be pushed to the live environment to be accessible from an outside project. I ran into issues more than once when I was expecting to perform a data action, or retrieve a dataset, only to realize after troubleshooting that I had forgotten a step in the setup process.
While I understand the security implications of allowing direct API access to data, the multi-screen setup felt cumbersome.
(Note: As of this project, FlutterFlow only supported one development environment, however in FF 5.0, released in September 2024, they now support the ability to access a separate development environment.)
2. Constraints in API calls
Bubble's Data API includes the capability to send constraint parameters in a call to narrow down to the data values you need. Setting up the constraint parameters on FlutterFlow's side was tricky because to send a JSON object with your constraint params on your API call, you need to write custom code to build that object.
My first approach to sending constraints involved a hack to replace the brackets "[ ]" used in defining a constraint with url-encoded values.
In FlutterFlow, brackets “[ ]” are used to indicate variables. In the API call builder, this caused issues for me because I needed to define specific items within the constraint parameters with variables from my app.
I ended up using url-encoded brackets (%5B and %5D) for the expression with specific variables defined, as you can see in the screenshot.
Later, I discovered a cleaner solution: you can create a JSON object for constraint parameters via a custom function in FlutterFlow to define the JSON you need.
3. Auth Login Setup
While FlutterFlow supports Firebase and Supabase for authentication out of the box, custom databases (like Bubble's) require manual configuration. I had to add in custom actions on my sign-up and login workflows to ensure users remained logged in between sessions. This involved adding logic for “Auth Login” in FlutterFlow.
4. Bubble Response Formatting Issues
Occasionally, I encountered format errors from Bubble’s Data API.
For example, the Invalid Login Credentials error message returned unknown characters.
(I haven’t dug into this deeply yet, or reported it as a bug, but it's on my to do list.)
5. The Biggest Challenge: Lack of API Data Logs
One of the biggest issues I faced in my development process was the lack of logging for API data calls in Bubble. Being able to troubleshoot issues as you build and release products is critical to identifying and fixing bugs. But as of this writing, one of the tools you might use to troubleshoot a call - the ability to access a log and assess errors - is not available to developers.
I discovered this issue only after launching and beginning end user testing. I had thoroughly tested my API calls using multiple accounts on live devices and simulators, however after launching my app through Apple’s TestFlight program, one of my users reported an error when trying to perform a function that used a data API call.
The user shared a screenshot of the error (luckily I had programmed a UI alert to notify in case of API issues), so I knew which call caused the error, but I was unable to recreate the issue. When I tried to troubleshoot further, I found that I couldn’t find the call in Bubble’s logs. I learned that Bubble doesn’t log Data API calls in the server log, they only show backend workflow interactions.
I reached out to Bubble’s Support team and learned that there’s currently no way to capture these logs, which is a significant limitation. They offered to look on their end at logs, but they too were unable to find additional information.
(If this limitation is a concern for you, I recommend chiming in on this forum feature request.)
Custom Functions in Flutterflow
While I love Bubble’s ease of use when it comes to creating expressions and manipulating data, I think I grew a bit over-reliant on this approach. When trying to recreate functionality in FlutterFlow, I ran into limitations.
It was only after I learned about Custom Functions in FlutterFlow and got comfortable creating and leveraging them that I found I was able to create the functionality I needed. And it was only at this point that I felt like I fully understood the platform's capabilities and power. Custom functions allow you to create much of the functionality for data manipulation that I had gotten used to in Bubble.
So far in my project, I've created 15 custom functions and counting. I think of them a bit like plugins which I use often in Bubble to perform actions. I often use the AI code generator in FlutterFlow to describe what I need and let the program do the work for me. All I need to supply is the expected inputs and outputs.
For example, if I need to calculate an output, I might simply say: "take these two inputs, ensure they are of type number, perform this calculation on them, and output the result to this variable." In my opinion, the AI code assistant is one of the most powerful features in FlutterFlow today.
Conclusion
Integrating a FlutterFlow mobile app with a Bubble backend allows you to maintain the power and flexibility of Bubble’s backend while delivering a mobile-native experience. However, there are challenges—especially around API setup, custom functions, and troubleshooting.
I hope these notes provide some ideas and guidance if you are considering a similar approach. I'm happy to answer questions or help out if I can with your project - please reach out!
Hey! I am trying to build something as you did. Have you integrate Google and Apple sign-in/up with bubble and flutterflow? For data manipulation, don't you think backend workflow are better than using Data API?