Getting Started with Flutter and Supabase

Supabase is a backend as a service that allows you to spin up a serverless Postgres database with APIs in minutes. In this video, we are taking a look at how you can get started with Supabase and Flutter so that you can use Supabase as the backend for your next Flutter application.
▶ supabase_flutter package: pub.dev/packag...
▶ Supabase quick starter guide for Flutter: supabase.com/d...
▶ Official Supabase docs for Flutter: supabase.com/d...
Join Tyler from Supabase as he guides you through connecting your Flutter application to your Supabase project.
Watch this if you want to implement a backend for your Flutter apps using Supabase as Tyler will be showing you exactly how to create a note-taking app.
It's WAY easier than you think it is to set up and manage tables within the Supabase dashboard.
What you'll learn:
✅ Setting Up Supabase Projects: How to create and configure a Supabase project, and the first steps for integrating backend features into your apps.
✅ Flutter-Supabase Connection: Learn how to link your Flutter app with Supabase.
✅ Creating and Managing Tables: How to use the Supabase dashboard for table creation and configuration, focusing on a 'notes' table for a note-taking application.
✅ Implementing Real-Time Functionality: Explore how to enable real-time data changes within your app, so your users see updates immediately.
✅ CRUD Operations: Detailed steps on how to add new notes and display them in your Flutter app using Supabase’s client library.
This tutorial is a comprehensive start to integrating Supabase with Flutter, covering everything from basic setup to advanced real-time data manipulation.
Need more? We have WAY more Flutter + Supabase videos for you to watch too!
💻 Videos to watch next:
▶Watch all Supabase Flutter tutorials: • Getting Started with F...
▶ Build a SaaS with Supabase in minutes: • Fastest way to build a...
▶ How to implement Google sign-in on Flutter with Supabase on iOS, Android & Web: • How to implement Googl...
👇 Learn more about Supabase 👇
🕸 Website: supabase.com/
🏁 Get started: app.supabase.com/
📄 Docs: supabase.com/docs
🔔 Subscribe for more tutorials and feature updates from Supabase: / @supabase
📱 Connect with Us:
🐙 Github: www.github.com...
💬 Discord: discord.supaba...
🐦 Twitter: / supabase
▶ Instagram (follow for memes): / supabasecom
ABOUT SUPABASE:
Supabase is the open source Firebase alternative. Supabase provides a full Postgres database for every project with pgvector, backups, realtime, and more. Add and manage email and password, passwordless, OAuth, and mobile logins to your project through a suite of identity providers and APIs.
Build in a weekend, scale to millions.
#Supabase #AppDevelopment #RealtimeApps #DeveloperTools

[@rahulagarwal968]

Please make more tutorials on Supabase and Flutter so that developers can use this instead of Firebase. There is so less tutorials on internet that its difficult to build an app. I want concepts such as functions and triggers, push notifications, database joins and relations. Projects such as building a basic realtime chat app. I found the official article very tough for beginners as it had Bloc and Cubit.

[@Supabase]

Thank you so much for the request! We are on it 💪

[@codewithguillaume]

I am sure this video will have ton of success!!!!

[@nothing_is_real_0000]

Awesome really cool.. so easy to get started so powerful.. I guess I going to love Supabase! Thanks so much bro!

[@tananga_studio]

❤❤❤❤❤ We demand more!!!!!!!!!!!!!!!!!!!!

[@shohzodlord]

Lessons for Flutter is a great idea. Thank you)

[@jboycode422]

Hi Tyler. Good course. I wanted to use Supabase!

[@hamdiboujarra]

fall i love with supabase

[@youcefwippert]

Would be cool if you can do a Tutorial on Supabase Authentication in Flutter especially the Google and Apple Auth

[@tananga_studio]

100% right. With onAuthChange implemented as a Stream + custom router package like GoRouter.

[@Supabase]

Thanks for the feedback! We've added Google and Apple Auth to the list. In the meantime, you may find this article useful: supabase.com/blog/flutter-authentication-and-authorization-with-rls

[@anshu-jain]

@@Supabase do we have google and apple auth support in flutter while using supabase yet, and if yes, is there a tutorial?

[@AnoopThiruonam]

Wow I am going to use next one on this

[@adventurer9361]

Thanks for that I was waiting that for a year Please make many tutorials of that ans for photos or some market 🙏🙏🙏🙏🙏🙏🙏🙏🙏

[@Supabase]

Let us know what kind of Flutter content you would like to see!

[@adventurer9361]

@@Supabase Thanks for reply 🌹, I need to do like online market with flutter and supabase But my problem i don't know how to do it with supabase, There's many videos for that with firebase, but i want it with supabase, Something like stored photos and details for product And every edit on product on supabase must refresh on my application in real time And thanks 🌹🙏

[@hanno3116]

Can i download pleaes the source code somewhere, so that i dont need to type everything?

[@rubenchiquin3768]

Hey! I loved the video. Very concise and to the point. Demystifies most of the process. Question: Do you lose the types of your data? I saw that there's an official way to generate types on TypeScript, but I haven't found anything for Dart.

[@Supabase]

Thanks for all the kind words! Currently, there isn't a way to generate types for Dart yet, but there is an discussion going on here: github.com/supabase/supabase-flutter/issues/139

[@thomasmabika7291]

Hey, how to I get a stream of nested data, i.e an Artist has multiple Albums, I want to get an artist and their albums as a stream.

[@dshukertjr]

Currently, you can only use the stream method on a single table. Streams after best suited for realtime data, but does your data change rapidly in realtime? If not, you can use the select() method to query nested data!

[@thomasmabika7291]

@@dshukertjr Thanks for responding, I'm very much aware of the select() method, which can't be used with the stream method. Doesn't limiting realtime to only a single table goes against all the benefits of a relational database? A relational database means that I can have a book table, an author table, a character table and I can easily join these tables anyway I see fit, so when realtime data fetching is limited only to a single table in a relational database, I can only wonder why? How could you possibly be ok with such a limitation?

[@RiwenX]

Code generation from DB schema to dart would be awesome. Are you guys planning that?

[@Supabase]

We would love to, but are still figuring out what would be the best developer experience for Dart developers. There is a discussion going on here if you want to jump in! github.com/supabase/supabase-flutter/issues/139

[@FMR_FMR]

I have problem when using it on Flutter, show me error message (Error when reading 'lib/supabase.dart') When I install supabase_flutter by Terminal it's install version 1.0.1 when I run Flutter show me error message, when I upgrade it manually by change the version number to the latest version supabase_flutter: ^2.5.6 also not working !

[@dshukertjr]

Just to tie loose ends here for anyone reading this comment. The issue was that the Flutter app was named `supabase` as well, so there was a version conflict with the `supabase` app and `supabase` package. Always give your apps unique names and you are good to go!

[@FMR_FMR]

@@dshukertjr Thanks, your reply has been help me a lot, I'm new on Flutter just used since couple week.

[@whitedevil5825]

hello, im trying to integrate supabase to my flutter app. the dependency is supabase_flutter: ^2.5.1, and my flutter version is Flutter 3.19.5 ...the code is not showing any error but the app will not run its saying "Because supabase depends on supabase_flutter ^2.5.1 which depends on supabase ^2.1.1, supabase ^2.1.1 is required. So, because supabase is 1.0.0+1, version solving failed." how can i solve the issue

[@shrivatsakulkarni8145]

is it solved ?, i am facing similar kind of issue

[@Supabase]

Just remove the supabase dependency from your pubspec.yaml file and your app should run just fine!

[@schokobaer93]

I'm facing the same issue... how can I solve it?

[@rahulagarwal968]

How to send push notifications in flutter when using Supabase as backend?

[@Supabase]

You can use database webhooks to send an webhook request when insert, udpate, or delete event happens on your database. You can then send push notifications to your apps. Here is an guide on how to do it with Supabase and OneSignal: supabase.com/docs/guides/integrations/onesignal

[@thelocaldev]

how to relate 2 tables , for eg auth id with some database tables

[@Supabase]

You can use the foreign key constraints to associate a table with another table. supabase.com/docs/guides/database/tables#joining-tables-with-foreign-keys

[@linkonidas]

Olá, supabase na main não deixa app iniciar se não houver conexão com Internet. Tem como contornar isto?

[@linkonidas]

please

[@Teog1992]

very good looking guy

[@utkarshjaiswal0004]

How to do flutter supabase mobile otp login

[@franciscojavierruizutrilla1348]

supabase is anazing by no't have much documentation ;(

[@Supabase]

Thanks for the feedback. On what topic do you find not enough documentation?

[@moazyaseen2580]

Very simple and useful, Thanks🤍🤍

[@escopion231087]

class _MyHomePageState extends State { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( backgroundColor: Theme.of(context).colorScheme.inversePrimary, title: const Text('Visor de turnos'), ), body: const Center(child: Text('Press the button below!')), floatingActionButton: FloatingActionButton( onPressed: () { showDialog( context: context, builder: ((context) { return SimpleDialog( title: const Text('una nota'), contentPadding: const EdgeInsets.symmetric(horizontal: 8), children: [ TextFormField(onFieldSubmitted: (value) async { await Supabase.instance.client .from('notes') .insert({'body': value}); }) ], ); })); }, child: const Icon(Icons.navigation), )); } }

[@franciscojavierruizutrilla1348]

why ? i have request session city": "New York", "clientAcceptEncoding": "gzip,deflate", "clientTcpRtt": 6, "clientTrustScore": 2, "colo": "BOS", "continent": "NA", "country": "US", "edgeRequestKeepAliveStatus": 1, "httpProtocol": "HTTP/1.1", "isEUCountry": null, "latitude": "40.71230", "longitude": "-74.00680", "metroCode": "501", "postalCode": "10118",

[@msh_dev]

Is there a way to generate database types for dart.

[@Supabase]

Currently no, but it's something we are exploring.