Getting Started with Flutter and Supabase

hey there Tyler from Super Bass here in this video we're going to take a look at how you can connect a Super Bass project to your flutter application so that you can have a back-end for your photo app let's dive in we'll be building a note-taking app together the first thing you want to do is set up your Super Bass project I wrote The Creator one but if you haven't yet you can go to superreads.com to create one now that we have a fresh new supervised project we can head over to creating our tables there are two ways you can set up a table in Super Bass do this table editor or the SQL editor but today we'll be using the table editor to create our tables let's create our first table let's give it a name let's call it notes since it's a note-taking app that we're creating today we can untick this row level security checkbox this enables us to protect our databases from malicious attackers but today we just want to get something up and running so we can untick that and we can enable real time because we get to play around with the awesome real-time capability of Super Bass now if you scroll down you'll see a few columns ID and created out I think we can leave them the way they are and we can add a new body column that'll be type text that will hold the actual note body we can leave it as a default null and let's hit save to create our first table awesome now that we have a table set up I think it's time to dive into some flutter code here I have an empty flutter app as you can see it only has a scaffold with an app bar and a container let's start out by connecting our Super Bass project to this flutter app head over to pub.dev and search for supervised flutter we can copy this code over 2R public.yamo file and hit save to run pub.get now head back to main dot diet file and let's start out by uh connecting our environments you can do so by copy and pasting this initialization code let's copy this portion right here into our main function and we can make this async we can import all the code that we need now we are required to have a supervised URI on supervised anonkey we can get them by visiting our supervised project head over to settings API and here's the project URL so that's the Super Bass URL and we have the Anon key these keys are meant to be exposed to the clients and the way you can secure your app is through the rollover security that we touched a little bit earlier but um we just want to get something up and running today so we won't worry too much about security but that's it our app is connected to our supervised project and we are actually ready to interact with our tables let's start out by adding a feature where user can add a new note I'm going to drop in some code here so we can start up by adding a new Floating Action button and then pressing that button should open a new dialog this dialog has a text form field so the users can add whatever text they want to and then submitting that form field should insert that data into our Super Bass instance let's take a closer look so we have the supervised instance.client this is how you can access your supervised client that was initialized then we have the from method this means that we're accessing the notes table and then we are inserting a value whatever value the user enters into this text form field in passing it uh to the body key that we created the body column that we created earlier let's take a look at how this turns out use the skin tap add a new note something interesting and hit done let's take a look if this created a new note we can go back to our Super Bass project and hit refresh in our table editor as you can see we have this something interesting note created now that we can create a new note from my app let's see if we can display those notes in our app let's go back to our app code and let's create a stream Builder to listen to real-time changes we're going to start off by creating new stream let's call it node stream and we are going to access the same super based instance so superbase.client instance.client we're going to call the from methods to access our nodes table and we are going to utilize this stream feature uh where we can get real-time changes of our databases now that we have our stream in a variable we can create our stream Builder so let's create the stream Builder uh the data type of this stream is going to be a list of map of Key of string and then I'll type that name Dynamic and we are going to pass that stream right here and then we can create our Builder methods this is just some standard stuff if the snapshot doesn't have a data we're just going to show a progress bar and if it has a data we're going to extract that data into this notes variable note that this is type of list of map now that we have this available handy we can create a list view Builder so the item count is going to be however many notes there are and then item Builder we're just returning a simple list tile with the text widget inside and the body is the main title field let's hit save and see what this looks like it looks pretty good uh let's try to add a new note so we can say something like some something more interesting because I am very creative and let's hit done and see that we have a new note created in our app let's go back to our table editor hey refresh and see that there's something more interesting is right there inserted in our table and that's how easy it is to get started with fluttering Super Bass be sure to subscribe to our YouTube channel follow us on Twitter and join our disco community thanks for watching and I will see you next time with more fluttering surveys contents [Music]

Channel: Supabase

Views: 17,304

Keywords: Supabase, Flutter, Mobile App, Serverless, Database, Postgres, PostgreSQL

Id: F2j6Q-4nLEE

Length: 6min 58sec (418 seconds)

Published: Tue Jan 24 2023