Tutorial: Offline-first FlutterFlow app with Supabase and PowerSync

PowerSync enables developers to build offline-first FlutterFlow apps that are robust in poor network conditions and have highly responsive frontends, while relying on Supabase for their backend.
This step-by-step tutorial provides instructions for how to build an offline-first notes app using FlutterFlow, Supabase and PowerSync.
Clonable FlutterFlow project: app.flutterflow.io/project/po...
Written tutorial guide: docs.powersync.com/integratio...

[@faisalkarim7392]

Awesome guys. Useful for my use case, for farmers in low connectivity area.

[@webdevelopment8760]

great tutorial, thank you very much, would like to see a similar tutorial for expo react native though, that would be awesome =)

[@emeriktremblay3881]

i previously tried to link it using the other method and was not succesful, I used sqlite only but now I will retry with this method that looks a lot easier. This solve exactly my problem as im doing a grocery list, I want users to be able to access the list but we also want to know what people have in their lists. Thank you guys great job !

[@emeriktremblay3881]

update : It work really well, it's so fast and easy. Glad I did it

[@powersync_]

Great to hear!

[@rehaanu]

Thank you 💯💯💯

[@brianmolloy9393]

pretty sweet!
hacking through and prediciting my future... any way to have a "powersync" code generator that has the .powersync already prepended? Definitely gonna much that up as this starts to get bigger...

[@LowBrowGamerZ]

Does this work using the Web Test Sessions? The SQLite Integration in Flutterflow does not support Web so neither can you test if youre on a free plan

[@MyHealthierChoice]

That's really awesome! Looking forward to start using this for my next project. Do you have any suggestion how to handle sync of media uploads. e.g profile picture in the user table? Thanks in advance

[@5sense866]

How is this different from SQLite provided natively in FlutterFlow?

[@kobiebotha9868]

This keeps the data in SQLite in sync with Supabase, and you don't need to write synchronization code.
This also works on Web.

[@5sense866]

Ok, so no need to use the SQLite natively provided in FlutterFlow?
PowerSync is doing the function of SQLite + syncing, right?
I’m only asking because I expected there to be some steps in this video about how to connect SQLite to PowerSync, but I didn’t see that and it confused me

[@kobiebotha9868]

Yes that is correct, PowerSync fully manages SQLite and you don't need to enable that.
Thanks for the question, I might surface this in our docs.

[@5sense866]

That’s great - this solves a problem that’s on my list. Will take a closer look in coming weeks