Event Management App using Flutter & Appwrite | Login & Signup | Part 1

hello everyone welcome back to our another video series in this video we will learn how we can build an even management app using flutter and apprite before starting as usual you should have Android Studio Android emulator and flutter and dart installed in your system so if you don't have these things you can watch my previous app right tutorial part one where I told you how you can install flutter and dart and Android Studio this is going to be a long video but I had covered several sections like creating a new account in apprite cloud and creating a login and signup UI for app and also applying login and sign up and log out Logic for our UI and we are also storing the name email and user ID on separate database in app right to retrieve the data and then we are also storing the user ID name an email ID locally so that we don't need to call the database every time when the user opens the app so now let's begin our journey let us create a new flutter app using command prompt using the flutter create command here we are giving the name of the app as event management app and now let us run it on vs code this is the demo code that we get just simply run this demo app either your Android emulator has been installed successfully or not now our demo app is running successfully we don't have any issues visit this website cloud.apprite dot IO slash register and here you can sign up for app right Cloud so it's free you don't need any credit card simply fill your name email and a password that you can remember and agree the privacy policy and click on sign up if you already have an app right cloud account you can simply sign in in my case I am going to use the sign in option now you you will be asked to create a new project let us give the name of our project as event management app and created now our project has been created and now we need to add our platform for this case we are choosing flutter here we need our app name now we also need to specify the package name we can get the package name from the app that we have created recently app build.gradle and use the app ID of our app simply copy it and paste it next we need to add this dependencies it will not be flutter pop get it will flutter Pub ad so remember this is a mistake so to add dependencies you need to go to a vs code again flutter Pub add app right Now app right has been added to our website.tml file now we can move to our next task to initialize our SDK we need this simply copy this inside the layer folder we can create a new file auth.dot and we can paste it here directly so we don't need this clients we can make it directly like dot set endpoint now our first task is done now we need now after our app right initialization has been done we need to change the minimum SDK version inside our build.gradle we need to change it to 19. and save it now our app is successfully running it means that we have initialized app right correctly now we also need this two dependencies so let us install Google fonts use the command flutter Pub add Google fonts we also need shared preferences let us add it to now when we see our pubstep.yaml file we will find that Google phones shared preferences has now been installed foreign let us use Google phones first let us remove this dummy codes and now we don't need this color scheme we are converting it to Dark theme we are also going to be adding Google phones text theme like copy it text theme here we are going to specify the Google fonts Dot and the name of the fun that we want to apply it's enter text Key so now if we save our app so the font of our app is now changed now let us remove this default home page that we get let us create a views folder first and inside it we are going to create our login.dot file which will consist of our login page now just link it with our main dot dot file now we we have done nothing so we need to design the UI of our login page now I have already created a custom input form for you guys so you don't need to worry about the UI design I have already created a custom input form for you guys all you need to do is just visit this link and copy it and inside container create a new file custom input form and paste the code from here now we are going to use this custom form in our login and sign up page so now let us design our login page first instead of placeholder we need a scaffold and inside all the things are going to align in columns so we are going to use a column so inside column we will have children's and then we need to specify our text as login then we need a sized box equals I20 and then we need to import the custom form that we have created here we need to specify our icon level and hint text so we will use icons dot email and the level will be email and hint will be under your email now let's check it so it's looking like this let us use the sized box at the top we cannot see the login text now it's okay now we need to decorate the login text let's add some decoration we have a color specifically light green that we are using it here so all you can do is that copy this color create one more folder like constants and there you can write Colors dot dot and inside there you can specify the color like K light green and paste that color you need to also import material.dot you can also specify the return type as color now now you need to just call K light green and it will give you the color let's add a font size and font to it so now it's okay now similar to our email we need to have one more thing that will be our password this will be password and here the print will be enter your password and instead of email icon it should be a icon of lock you can give it like outline we can also use email I outline now instead of size box 20 we can give a size box of eight it will be better Okay so now let us use another sized box of height 8 and then we are going to add our button text will be a forget password button we also need to add the same we will use the same textile so let's copy it will use the same text style but we will not use the same font size and font to it so now it's okay let us align it we will use a row we'll wrap it to the row and what we are going to do is we are going to specify the main axis alignment to end and it will align it to the end and we can also align this column like we can also specify the crosses axis alignment to start now it's okay now let us use a size box after a row same size box of height 8 and now we need to create the button let's make it an elevated button let's make give the text as login so we also need to change the style of this elevated button let's change it to outline button dot style form and here we will specify the four background color our four background color the main color that we are using with K light green and then we will specify the shape as rounded rectangle border and here we specify the Border radius and we will add body radius dot circular as eight so now we have got our button we can give it a much larger size so for that reason we can use evap it with a sized box and if we specify the width as double dot Infinity and give it the heighters 50 now it's okay let us now add some padding to the column let us create another size box of height 8 so after we have added the size box we need to add a text like create an account a new account here we need to change the style of this otherwise it is not visible we are specifying a font size of 16 and font weight of the w300 now we can wrap this inside row and add a sized box again of width 4 and then we can add a text again it will be sign up it will have similar style but the font it will have similar size butter font textile will be a little bit different like we will change the font width to 600 now let us check it so it is coming like this create an account and it's showing a sign up let us change the main axis alignment to Center so now we have created our login page now let us create our home page let us add some basic styles to the home page like it will be a stateful widget and it will have a scaffold and inside scaffold you will have an app bar that will have a background color of colors dot transparent and go background color also to Colors dot transparent let us link a home page to our main.dart file now in the app bar we will have a single button in the in our actions like it will be an icon button it will have the icon of person or you can say account Circle so it's blacks for that reason it is not visible let us change the color also change the size a little bit bigger now it is visible here you will only show the name of the user that high user like this it will be inside our body like it will tell text hi user and it will also add a waving emoji let's change this style to the basic stand that we are using so now we have defined our own page currently what we are going to do instead so instead of my account Circle we can use logout like this will be our home page so now our home page is done let us build our sign up page this sign up page will be similar to login page so for that reason we are going to copy the full login into that site and paste it in our sign up dot that file and from there we will modify it and here it will show sign up let us link it with main.dat file so we can view all the changes between the sine of first rule mean because we need to provide our name let us copy this part here it will be our name and it will give the hint as enter your name and it will have an icon of Icon Dot person outline okay so we don't need to forget password button you can remove it and here we don't need as we don't need to text as login we can change it to sign up and then you already have an account we are going to change the text to already have an account and then here we are going to change the text as login so now we are done with the login and sign up page now let us implement the logic of our login and sign up page now we have completed building our login and sign up and homepage UI now let us add the app right authentication logic to our login and signup UI so first you need to visit apprite Cloud console and there from menu click on the alt button and here you need to go to your settings and here you can see the alt methods that are available all these methods are available you can modify it according to your needs currently our main focus will be on email and password so we can turn this off for now we don't need this now let us go to security and here we can also limit the user's limit and session limit and everything Let It Be default we don't need to change anything now we are almost done now we need to check out their documentation so click on the documentation button now simply open up right for flutter as it is mentioned we need to add this line of code in our manifest.xml file so simply copy it and visit your Android app folder inside SRC you will have the main and inside main you will find the file Android manifest.xml and you need to paste it here just make it little bit look nice make it little bit look better and here you need to mention your project ID visit your app right console again go to overview here you will get the project ID just copy it and paste it make sure to use your project ID because your project ID will be different than mine now we need to go to the documentation again we have already added this part now to create an account we need to use this code so let us use it let us just copy it and go to our order dot file just paste it yo we need to give it inside and asynchronous function otherwise a weight will not work so let us create a function let us use future keyword and there we need to specify the return type as string create user and here we will expect the name email and password from the user so let us X so let us add the parameters it is going to be an asynchronous function so use as in now let us wrap it in try catch method let us add on app right exception it will be more better so here we are creating a new user using app right account.create method and if we get any exception we are using app right exception to catch the exception and then we are returning the message to string okay so we have done with the Regis registering user part now let us focus on the login part now let us focus on the login part it will be similar to the credit user but we will have instead of a countdown create we will use account dot create email session just create a new function here we will expect the email and password it will be an asynchronous function and then inside try catch first we are going to use user is equal to await account dot create email session and here we are providing the email and password and then we can return true and if we Face any error we can also catch we can return false so now we have also done the login part and we have also completed the registering user part now let us focus on the log out logic let us create a function log out user and it will also be an asynchronous function use a weight account dot delete sessions and here we need to provide a session ID it will be current now we have also completed the logout path now we need to check while login we need to check either the user has a current session on the device or not it means that if the user is already logged in we can check if the user has an existing session in the device or not so for that reason we will create another function check if user have an active session or not we'll use will create another function check sessions it will also be an asynchronous function inside try catch first we will check a weight account dot get sessions here we need to provide the session ID it will be current and then we can return true if we get any error it means the user is not logged in so we can use catch and then we can return false so now we are done with all the full functions that we need now let us link this functions with our UI so first we are going to create an account now let us link it with our sine of UI now we need to add a text editing controller to control the text so we need to add three text written controller and it will be name controller and we need to add two more it will be email controller and it will be password controller now in our custom input form we are expecting controllers like we are expecting text editing controllers here so we can pass text written in controller here in controller we can pass name controller and for email we can pass email controller and for password we can pass password controller now let us check it but the password that we are entering is not of secure means it's not hidden it's visible to everyone so in our custom input form we have Optical text option so we can make it to true so now it's okay password is not visible now inside our sign up button what we are going to do we are going to create an account so we are going to use the create user function so let us use create user function that we have created and here we are expecting name email and password so let us provide our name controller dot text and here we are going to provide email controller dot text and here we are going to provide password controller.txt and then so if we are getting the value as success it means that we have successfully created an user account we can use a snack bar to show to user that your account has been created and then we can redirect them to the login page and in snack bar we are going to show the text as account created and then we can push it to the login page using material page route to the login page and else if we don't get the message as success it means that we have some error then that moment we can again use a snack bar instead of showing account created we can show the value that we are receiving now let us check it so now let us try to create a new account okay it's showing us account created and now we are redirected to the login page so that's great now we can login now let us again try to create the same account we are getting the error message as a user with the same email ID is already exist it means that both the methods like error and success are working now we can proceed to the login page we can also push when the user press this button already have an account so we have not linked it simply we need to use this so we need to wrap it with a gesture detector because it's a row and now we can use the ontap function and paste it now when the user press this button already have an account it will be redirect to login page now for login page we need to do the same things like first we need to create two text editing controllers like email controller and password controller so we can simply copy it and here it will be same like we need to add the controller first will be our email controller and for our password it will be our password controller and when the user presses the login button we should use the login user function that we have created and we should pass our email controller dot text and passwordcontroller.txt and then if the value is true it means that we have logged in successful you can simply copy this pastel and we can show login successful and we will redirect them to home page and if we don't get the result as true it means that we have some errors we can show them the snack bar as we can show them as login failed try again so now let us use login it's showing login fail try again means the error one is working now let us try to login into our existing account so we are still getting login failed so let us check our upright console it's showing us some so it's showing us the different email I think that we have done some mistake in our sign up create user part okay okay so instead of using the name and email provided by the user we are using a default email and password so we need to change it please Rectify everyone so we need to change it we have not done yet so this was a mistake that we have done we need to rectify it now in our login page we can make the password as of secure to true and now let us create an account again here also the similar thing we need to wrap it with the gesture detector and on Tab we are going to redirect them to the sign up page or we can use navigator.pop okay so now let us create our account again now it's saying account created now let's refresh it we are getting the test user and the email that we have created now what we can do we can log in with our existing account so now it's showing login successful and here it's showing us the name as user so now that's correct but we can add a delay of somewhat like 2 seconds and then we can redirect them to the home page first it should show the snack bar and then it should redirect them to the home page so let us do that so here when we are redacting them to the home page we can use future.delay and we need to provide duration of seconds to and inside it after the devotion is completed we can redirect them so now it first it will show the stack bar as login successful and then it will redirect to home page otherwise it will show login field try again now also implement this feature in sign up like future dot delay and will delay for two seconds and then it will navigate to the login page so now that's done so let us restart if we restart we will not be redirected to the home page directly we will be redirect to the sign up page now let us try to login again now it's showing us login successful and a delay of two seconds and after that we are getting redirected to the home page now we have already created a check sessions function that will check the session either the user is logged in or not so we need to add this at the we need to add this at the first part of we need to add this at the main dot file and it should check me we need to add this text session function as the top widget after starting our app so we can check if the user have a session in the device then we can redirect them to the home page directly otherwise we can redirect them to login and sign up we can create a new file like check session dot dot it will be a stateful widget and inside init state we can check sessions and then so we are getting a value so if our value is true then we should redirect them to the home page if our value is false we should redirect them to the login page now let us also add a circular progress indicator and here we are going to return as in Center it will have a circular progress indicator and this will be the first page of our app and this will be the first page of our app so let us change it to check sessions so now let's restart the app now it's showing circular progress indicator and then we are redirecting to the home page so it means our check station function is working fine now let us focus on the logout user so that we can log the user out in our home page when the user press the logout button we can use logout user option log out user and we just need to call this function it will log out the user and then we use Navigator dot push and then we can redact them to the login page Let's test we are pressing the logout button and then we are getting redact to the login page but let us restart and check either a session exist in our device or not so we don't have any session and we are getting redirect to the login page first so it means our app is working successful when we are logging with our credentials it's showing us a snack bar and then after two seconds it's redirecting us to the home page and here it's showing us I user but but what I want instead of showing High user I want to show the name of the user at first while registering you are using name email and password so there I need to show the name of the user for that we need to save within a so for that we need to store the name inside a separate database in our app right so let's create another file it will be database dot dot here we need to create a function that will save the user data so first we need to go to databases first here we need to create a database that will be our event management app DB so here we are going to create a collection of user data we need to create some attributes like first attribute will be name it will be a string maybe a size of and it will be required we are given a size of 1000 and then we are creating another attribute that will be email it will be a type of email and it will be a required and then we need to store the user ID it will be a type of string it may be a size of 20 or you can give it as 30 it will also be required now go to the settings and from here you need to add permissions this is your main thing please don't skip it otherwise you might get errors so it means that who can access this user data first in my opinion I think that any user can create and read data but they cannot update and delete it so this is the permission that I am giving that while creating the account we don't know that who is creating a new account so for that reason I have given the role as any so now we need to link it with our app so before that let us copy the string database ID so this is our database ID clicker to copy and paste it then we need to use final databases is equal to databases and the variable database it will be databases and client client was the file that we have already defined in our order Dart file so we need to Simply import it now we are good to go now for saving for file we need to use the future keyword future and it will be a return type of void we are creating a functions save user data here we will expect the string name string email and string user ID we don't need to store the password and here we will await and create a new document you will use database ideas database ID and collection ID we need to provide the collection ID here this is the collection ID click here to copy paste it here and here we need the document ID you can this is the first time we are creating so it should be ID dot unique now we need to provide the data inside data we need to provide all the data that we are we need to provide all the data that we need inside our document first it will be named and you will provide our name that we are expecting then we'll provide our email then our user ID okay so after we have created the document we can use then and we can print it for now document created and we can also catch error if we have any error we can print the error now we have created our save user data function so let us use it in our sign up page when the user sign up for the first time we are going to save the data within our database so let us open our signup page here we are using create user function instead of doing it on the sign up page we can directly do it on create user function in our create user function we are creating a user variable and the user variable consists of all the data that is when taken while creating so now we can get the user ID from the user value so in our create user function we are we have created a user variable where we are creating a new account and we can use this user variable and we can also get the user ID from this user variable so it will be a good choice to save our user data we can get the name from here we can get the email from here but we to get the user ID we should use this user variable and then it will use of Dot the ID that is generated while creating an account is stored in user.d dollar ID and we are retrieving that user.d dollar ID and we are sending it to the function C user data and the data is then stored in our app right database so we have used this now let us save it so what we can do to fix this error in our check sessions page instead of Navigator dot push we can use push replacement so that we don't get if the user presses the back button we don't get back to the previous page so in our home page on logout we need to also use navigator.push replacement so that if the user logs out the user cannot login back in if they press the back button so now let's restart it so first page is to login page and what we can do here we are using navigator.pop we don't need to use navigator.pop we need to send them to the sign up page because now login page is the first page so we don't have any page in pages in the stack so we don't have any pages in the stack so navigator.pop will not work for that reason we need to change it to sign up page so now it's okay and then sign up page we need to change that to navigator.pop so please make this changes now it's working fine so now let us try to create a new account now let us sign up so it's showing account created but we are getting some upright exception like document and valid structure required attribute name I think we have done some mistake okay so we have not provided double quotes it will be the attributes will be within double quotes so please Rectify this mistake now let us run and test it so our account will be created if we check it here our new account got created so let us we'll just create another account now it says document created it means that we have successfully store our data inside our database now let's go inside database now we can see that we are able to store the data inside our database we can see that we have stored our name email and user ID so now we are able to store our name email and user ID now we need something so what we can do we can store the user ID on the device that will be a good thing to do so let us store the user ID on user's device let us go to order Dot let us first create a save data model let us create a saved data page what we are going to do here we are going to use shared preferences so let us create a class share saved data and here let us use shared preferences we are going to initialize it first it will be preferences is going to await shared preferences dot get instance now we need to save user ID on the device for that we need to use for that we need to create another for that we need to create another function will be future void same user ID here we will be expecting to provide you user ID now we need to save user ID on the device so let us save it save your user ID on device we are going to create another static function it will be a return type of future void save user ID here we will expect the ID to be provided and then we will wait and then preferences Dot set string you will store our user ID as the ID that has been provided to the function and we need to provide a null check now this is the way we are saving the ID we also need something so that we can get the ID get the user ID it will be as it will be again a static function where we are expecting a string get user ID and here we will return preferences dot get string and the key will be user ID you need to also add null check and we need to also add some value otherwise it will not work now it's okay this is the way we are getting the string now what we can do we can create two more methods like we can get the name now what we can do we can store the name and email both of them now what we can do we can store both name and email so let's create those functions save username you need to provide a name references dot set string the key will be named and the value will be name just do need to add a null check we are saving the name here we need to also use a function we need to also use a function to get username so it's simple it will be get user name and here we will get set the ID as name again we need to create two more functions it will be set it will be set email we need to save the email and here we need to save the email so now we have created four functions we are saving the user ID username and user email inside the device and when the user logs in we don't need to read our apprite database every time to get this data we are storing it locally now let us when we are creating data we are storing this data in our database and when we are login creating new user session at that time we can save users data like save data Dot we can use Save user ID and it will be user Dot user ID here it will not be dollar ID it will be user.user ID let's create another function by which we can get the profile data like email and name currently while logging the user we are only getting the user ID so let us create another function it will get user data user data from the database we are get we will get the ID from our saved data get user ID then we need to use try catch final our data will be a week database dot list document databases dot list document and it will list all the documents that the user ID has and the collection ID we need the collection ID simply copy The Collection ID from here and paste it now we need to also provide the queries like it will be query it will be a list of query dot equal and here the attribute will be user ID and the value will be the value that we are saved in the local device so now in our result we will get our data so let's just print the data that we will get for now and then let's use attachment on if we Face an error we are also using print to print the data okay now since we are using shared preferences we need to do some changes in our main.dot file like first we need to make this asynchronous and we need to use this widget dot widget flutterbinding Dot and show initialized this this will initialize all our widgets and from here we need to call save data dot init and it will initialize our shared preferences so now it's okay just now what you need to do just close the app and restart it from now stop the app and run it again because shared preferences will not work otherwise it will give error so now our app has started now let us login to our existing account so our login is successful now what we need to do in our order dot file when we are logging we are saving the data so what we can do when we are login we can call get user data and inside get user data we can call get user data and this will print the data that it has so now let us log into our existing account it's saying a general argument index dot not found so we have not yet set the index for that reason it's same we need to go to our indexes option and here we need to create an index it will be a key and we need to select the attribute as user ID because it is the unique key now it's okay so here we are saving the data now let us login into our existing account now you see we are getting the instance of document list it means it means that data is successfully loaded so what we can do when we are getting the user data we can save those data in our local device save data Dot save name so the name will be stored in data.documents Dot document 0 inside data and then it will have the attribute name and we need to save our email so it will also be in same location but the attribute will be even so now we are saving our name and email while login while login we are calling get user data function and get data get user data function is getting the data and saving it in local device foreign so now let's do one thing in our home page instead of high user in the init state we can call the name final user name is equal to Let It Be string username is equal to just for now let it be user and in our init state we need to change that username to the save data Dot get username it will not be final so now it's okay now we can use here username now let us restart here we are not getting anything because we have not yet logged in again we need to log in again so now it shows High down it shows the username so this was our tasks so we have successfully completed our login and sign up and we have also stored our data inside database like name evil and user ID and we can use that user ID we are going to be needing those user ID in our next part of this video and this is the end of this video thanks for watching

Channel: Snehasis Ghosh

Views: 6,278

Keywords: flutter, install flutter, appwrite, code with harry, todo app flutter, first app in flutter, flutter app, android app building, flutter appwrite tutorial, appwrite flutter integration, flutter app development, firebase vs appwrite, appwrite authentication in flutter, flutter appwrite CRUD operations appwrite cloud functions flutter appwrite login, appwrite cloud, appwrite database, dart, Event Management App, Flutter Appwrite, Appwrite Database, Flutter and Appwrite

Id: uOWeCc_e1RY

Length: 84min 32sec (5072 seconds)

Published: Tue Jul 18 2023