Flutter & Supabase ✨ : Seamless Authentication and CRUD Operations Tutorial

hello everyone how's it going welcome back to the channel in today's tutorial we are diving into super base an open source Firebase alternative to learn how to authenticate e and to perform crowd operations so the difference is super base uses postgress SQL while Firebase focuses on no esql data bases so super Bas make it easy to add authentication storage and also realtime features to your app and this tutorial focus on 2K aspect the authentication of to perform crowd operation that create read update and delete functional with super base so with I said let J riding so we need to install this dependency that's the super base flatter dependency that really comes in handy when you want to interact with the super base so before running the app we need to initialize our super base so I'll just grab the code over here first of all make sure you have a super base dependency installed right so before running the app we need to initialize our super base so I will import that over here and also get our URL and and also the Anon key which we get out from our super base site when you create the new project so let's head over and create a new project right so first of all let's create an instance of this super base right so I'll be creating an instance of this super base client so at the top over here I'm just ping that saving the changes so the next step is to create a new project right so head over to to the super based website and create an account from there you proceed to create a new project so once you have the project you move on to the organization name you can give it any name you want proceed with the type of the organization and also set the pricing to be zero and create the organization so once you have that created you need to proceed to give the project a name right name it as the crowd so in here the project name I'm going to name that as Crow there you go and also generate a secure password over here can proceed to choose aend that's close to you and create a new project there you go so once our project is created you can see we have access to the Anon key and also the URL right so I'll just grab that and replace it so here's the URL link so I'll copy the URL over here and in my flatter project I'll just p in where it needs to be and also you need to paste in the Anon key which is found over here so I'll just grab that over here and paste it over here so let's even change it over here so once we have our project created let's proceed with authentication so the left corner you can see the authentication tab you move on to the provided session by default the email is enabled so you can just click on that and make the necessary changes so for now let's disable the confirm email and proceed to saving the changes over here let's leave everything as default there you go so let's get back to the code and implement the sign up functionality I already have the UI implemented right so I have my controllers over here the email password and also the username with it Associated test form field right that the input so let's focus on the sign up implementation right right so in our sign up we'll be having um a try catch block so try catch so it's going to be on alt exception right so catch any error relating to the authentication so on alt exception catch then can have access to the arrow so we can just print the arrow within the catch block so let's implement the sign of functionality so in here we can just await then we call our super base instance which has the O so superb. then you can call the sign up method on it prex in the password and also the email so with the password we passing um a password controller then you can access the test field entry any white spaces and also let's pass in the email we passing our email controller so email controller. text and proceed to trim any spaces we have an additional information as well right so if I want to add this username information it also takes in the data which comes as a map of string and dynamic right so it come as a map so I'll open my C is over here and the key over here is going to be the username field and also the value is going to be the username controller. text there we go can trim any white spaces as well so that's basically it the functionality to sign up the user right so if we check if not mounted we return else we proceed to just navigate to the homepage right once we have excess for signing up of the user right so Navigator do push replacement that takes in the context and also the material page rout and the material P comes with the builder in tting the contest and returns a wiet so here returning our home widget so that's pretty much it let's save any changes over here and proceed with the signing functionality so let's proceed with the signing functionality so I'll just grab the code over here it's pretty much going to be the same thing right we need to change in the method right so instead of signing up so first of all let's import the super based instance and also instead of sign up method we rather sign in with password right so we have the sign in with password method over here so we can just get rid of the data fi over here that's pretty much it and if we check if mounted we return else we navigate to the home as well let's import the O exception over here and seeing the changes so that's the signing and sign up functionality let's give it a try so in here I'll proceed to sign up right so I'll enter my email over here qu gmail.com proceed to enter my password and my username so I'll hit on the sign up button and you can see I'm being navigated to the home screen and when we check um our super base you can see one user is being added right so let's implement the sign out button and check for the signing functionality as well right you can see we have the log out button over there so I just created um already have my homepage widget over here where they sign out functionality right so in our sign out we are wait and call our super base instance so super base. then we call a sign out method just like that and if the sign out is successful we check if not mounted we can return else we can proceed to navigate therea to the login page so here we need to change it to the signin page um I think it's name as the login page yeah there we go so a login page and save any changes so when you hit on this sign out or the log out button you can see been navigated to the login page right so let's proceed to login right we already have that implementation done so I'll go into my already existent email which is cod gmail.com and also proceed to enter my password and hit on the sign in button you can see I'm being navigated to the homepage so the authentication Works let's proceed with a crow so let's proceed the crowd functionality that's the create update delete functionality so let's move on to um super base project to the table and also create a new table from here right so the name of the table is going to be note and also disable this enable row level security this help us um have access to the right and read functionality and also enable the red time so by default we have the ID and also created that f for us right so we adding another column that's going to be the note column right so we can just rame that to the body column right that's going to be of type text so you can choose the type over here it's going to be text so once you have that you can just save in the changes so here you can see we have a note table created right so let's move on to the functionality to create a new note so in our new note we are wait and call our instance of our super base then we can call do from then the table is going to be the note table that's how we name it right so super base do from the note then we can call the insert method passing the body field and note value just like that right so that's the functionality to just create a note right so let's proceed with the functionality to implement um or update a note right so in here we are wait and call the superbase instance move into the note table so superbase do from notes then can call the update method right do update passing the newly updated note right so we passing an object with the body fold and provide it the newly updated note right so the body fold is going to be the newly updated note and to update a particular note we need the ID right so we proceed to check as well using the EQ method the column is going to be the note ID right the column is going to be the ID fi right and check if that is equal to the note ID that's been passing then you can make an update to that particular note so let's finish it up with the delete functionality and it's pretty much going to be the same thing right you move into a note table and delete the FI passing in the ID so here we need not to passing any info over here and we need to call the delete method just like that so that's it let's proceed to a new note functionality to add a new note right so I'll be creating a floting action button over here which comes with the unpress that's going to be the function that gets called when the button is pressed and it also takes in the child so the chart of the floating action button is going to be an icon a plus icon so icon into bracket icons dot then can call the add icon as you can see over there right so let's move on to the Press that's going to be the function that gets called when the button is clicked right so when the button is clicked we are going to show a dialogue right so in our press we show a dialogue that takes in the context and also the Builder and the Builder it's a function as well taking the context and returns regit right so in a context sorry the Builder you're going to reain the simple dialogue so T in the title the title is going to be a test widget with the information to add a new note and also testing the children as well so we can just pass in the children fi over here so in here going to have a test phone f for user input right that comes with the onf submited property so with UNF submitted if I could spit it there we go so this is a function that accept in the value the user end text right so on first submit Tex in the value then we can call our create note function passing in the note in this case we passing the value to it and that's it so we check if mount said we can just pop up the context of the dialogue so Navigator pop off context there you go so let's add a semic colum over here and save any changes so let's proceed to create a new note so add a note then proceed to add a note over here so new note click on enter let's check our project our tables of our notes can see you have let's refresh it and a new note is created right you can see a new note over here so let's proceed yeah so in here let's proceed to read the notes we just created right let's display the note over here so I'll start by creating a variable notes stream so we want it red time right so we'll be using a stream Builder so a variable of no stream then we'll be using our super base instance from we move into a note table do stream that is in the primary key then you can just passing the ID fi so once we have this the body of the will be rainning a stream Builder right right and the stream takes in the Stream you're going to listen to the not stream and also it takes in the Builder and the Builder is a function comes with the context and also the snapshot so in here the snapshot is what actually holds the data right and return rigit So within the Builder you can check for the state of the snapshot over here so here we check if as snapshot that has data so you can check the upsite of that so if this is false right if a snapshot doesn't has data yet we can return a cular progress indicator there you go so you can just wrap this within a center widget so here is where we get our data back right so you can create a variable note and assign a snapshot data all right the data we get by we assign to the notes variable over here so let's check for the null over here so here be returning a list view Builder right so list view the Builder comes with the item Builder and the the item build over here is a function it is a function that is in the context and also the index and returns a widget right so in here the list view build also comes with the item count so the item count is going to be from our note. length then within the item Builder we can return um so first of all let's create a variable to hold each note right I can do that by assigning the note index to a variable of the note and also let's also create a variable to get the ID of the note right so the note the single note then we can set the ID fold you convert that to a string so once you have these two you can return a list in display the note we created right so the list comes with a title and the title is going to T in the text displaying the notes from our database right so in our text you can just assign the note then you can proceed to assign the body fold within that note and saving the changes and there we go we can see our new note displayed so let's proceed to add another note and there you go you can see another not is added so when you check the database you can see it immediately reflect over there so let's proceed there this functionality so in here be having a trailing with a row right the children of this R so let's set the main as size of the r to be meain as a size do men and in the children you'll be having um an icon button right for editing functionality so the icon button comes with an on press that's going to be the function that gets called when the button is the icon is clicked and also the icon it's going to be the edit icon so here it's going to be icons. edit there you go so as you can see over there so let's add functionality to the unpress button to to edit the note right so we'll be doing something similar by showing a dialogue so you'll be showing your dialogue over here I think you can just grab this over here make the changes so I just grabb the show dialogue method and just paste in over here change in the text here to edit note and also we also find we also need to find a way of showing the note we want to edit right so let's provide some initial value to it and this initial value will be coming from our notes body right so do notes then we assess the body field and instead of creating the note function we actually need to call the update Note function right so let's proceed with that so it's going to to be an asynchronous function then we can await and call the update Note function so here takes in the note ID of which we already have it at the top over here and also you pass in the updated note that's the value over here and that's pretty much it so we can proceed to give it a try so I'll just click on that as you can see the new note or CH that to the edited note so once you have that you can just click on the enter to pop up the context and can see it imately to reflect as the edited note and you check the database you can see the changes as well right so now that you have created update let's proceed with the delete functionality So Below the icon button is also going to be another icon button with on press and also the icon right so the icon is going to be the delete icon so it's going to take in the icon icons. delete so let's sa the changes over here um so the UN press of this so it's going to be an asynchronous um and also to delete a note right so I'll be creating a variable over here that check whether the delete is confirm or not right because we'll be showing an aler dialogue right with the cancel and also the delete so the variable name is going to be deleted confirmed and you're going to await and show a dialogue so here we'll be showing a dialogue with a context and also the Builder and as usual the Builder is a function that takes in the context right so the Builder comes as a function taking the context So within the B will be returning an alert dialogue right so you're going to return an alert dialogue and in the dialogue it pass our title the title is going to be delete note we can also pass in some content over here so the content is also going to Tex in a text as well so here is going to be a text of I you sure you want to delete this note yeah I want to delete this note so below that we're going to have an actions with a test button over here so the test button comes with an unpress and also a child so as usual the unpress is going to be the function that will handle the functionality and also the chart over here is going to be a test widget with a text of cancel right so basically we are showing an Al dialogue with two test button the cancel button also the delete button right so I'll just repeat the test button one more time so let's proceed to add the functionality to the onpress of the test button right so let's add a cons for so let's start with the functionality to so if the cancel button is Click you basically going to pop up the context right so you use Navigator pop of context then you pass in a Val to it right so this value is going to be false right so this false value is going to be pass into the deleted confirm variable so we'll be doing same to the delete functionality we'll be popping off the contest with the value of true right and also based on whether the value is deleted we can just check and call the appropriate function as well so you pop of the contest with the value of true so here we check if deleted is confirmed right you can call our delete function so we are wait then I'll delete function passing the note ID right the specific note you want to delete just like that so from you can just proceed to saving the changes and give it a try so I can just proceed to delete the um let me H restart and see oh there we go you can see deleted anyway let me just log in and proceed to delete another note so here I'll start to add a note over here so add a note and I can just delete one of this so I'll be deleting the edited note and there we go you can see so that's basically it see you on this tutorial

Channel: CodeWithDarkwa

Views: 2,325

Keywords:

Id: hKLYv8SzSkg

Length: 28min 17sec (1697 seconds)

Published: Sun Jan 07 2024