Build a simple mobile app with login, logout, and upload image functionality in FlutterFlow

okay hello guys welcome to another uh video tutorial by no code Africa and uh in this tutorial you're going to be learning how to implement the login and logout functionality within Florida flow uh with the latest updates right so um floater flow is improving really fast right and um the interface changes uh you know frequently so um the previous tutorials that I made right uh you might have found it like really difficult to navigate through it and that's the reason why I had to create this new tutorial so that you can understand how to find different things that you couldn't find in the previous tutorial so I would try to make it really quick we will be building um a login logout functionality like an application that allows the user to create an account to uh to create an account and to sign into the application right so inside the video I will also show you how to create some other features um let's say some I think the the very first two two parts of crude which is create and read so we will we will do that and uh maybe we will also try to do update right yeah so we will just do that also and then of course we will do uh how to upload images right into the application so our sit back and enjoy what is happening here okay so let's start so uh flutter flow helps you to build application faster than ever so if you don't have an account just take the uh the description of this video and you will see a link to click and then create an account for yourself all right and meanwhile if I told you not subscribed to this Channel please just help me hit the Subscribe button and of course give this video a thumbs up and then turn on the notification Bell it will help remind you whenever we have like a tutorials okay all right so let's do it um we will just be creating something really simple and basic but now we wouldn't be using templates right so yeah these are some of the applications I've created so I will just go ahead and then just click and create new then I'll call these uh logo log I don't know what to call it let's say login oh yeah I like using login right okay well guys let's just use login oh let's just add like that I'm not super creative right now okay all right so uh This Is It uh then click on create blank and uh quickly you're going to have to provide some few details after this particular screen so well if you don't want to connect or set up your Firebase right now you can skip but I would recommend that you can go you should go ahead and then connect via these at once all right so let's click on next step and then you expected to provide your Firebase project ID Firebase is where you get to store the different files for your project so you need to provide a Firebase product ID which will allow Florida flow to know which of the projects to connect to that is on Firebase right so that's like the idea so we will just go here to firebase.google.com this is it all right so if I told you already logged into your Gmail account you need a Gmail account to have access to this so if at all you're already logged into your your Gmail account uh all you just need to do is go to firebase.google.com and then you will see this particular uh link that says they go to console so you just click on go to console and it will take you to console yeah so this is console all you just need to do is add your own project a new project so I will just click on ADD project and then I will give the project a name so like you know four right it's just four okay so uh then I'll click on continue all right I'll turn off the Google analytics because I don't want to waste the resources I will just click on create project wait for a couple of seconds for this to finish creating the project and then I will go ahead and do the entire setup all right so uh Firebase is currently provisioning resources for my product more like creating some small tiny bits of files to make sure that I get what I want okay good we are ready so we click on continue and it brings us into this panel here where you get to see different things so what are we looking for here we're looking for uh Firebase project ID right so we want to be able to put our Firebase project ID here and click on connect okay so we will come here and then we will click on this big settings icon it's not so big but it's okay so you click on it and then you click on Project settings and then you copy the project ID now this is what you copy not project number not project name you copy this okay so when you've copied this all you just need to do now is go back to uh your application and paste it now we're going to encounter an error which I want you to encounter it with me so that you know how to fix it so you click here and then photo flow is going to tell us ah this is the error photo flow does not have access to this Firebase account please add Firebase at Florida flow.io as an editor now this simply means that you need to come back here to Firebase project click on users and permissions and click on ADD member and then type in here Firebase add floor to flow of folder IO that's it guys so you click on that and then you click on here chain changes to editor and click on done and add member like this noun you've given photo flow like active access to this Firebase product this is like super important okay so I will come back here and click on connect and then add voila it worked so we have this green check showing that everything works out very well so what we just need to do is click on auto generate config files it's very important step now this particular step click on generate files is going to provide uh your flutter flow project with some configuration files small tiny bits of files that it needs to be able to run smoothly in the background do you understand I believe you do all right so we will just wait for a couple of seconds and then this will run smoothly and we are good okay so it's done and everything works it says connected uh Firebase wait for the flow check all right good so um this is what we now need to do is go ahead and click on create user collection well turn this on now when you turn this on the only thing that you see is these right okay but this doesn't turn on now that's those are like the new things that is found inside Florida flow I will just be trying to spot point out some things you might have been clicking these over and over and over again right but before now you could just turn on that I need to turn into these purple turn on button all right so but it's okay what you need to do is you have to set your entry page and your logged in page before this search turn on so I will go ahead and then click on this what is your entry page your entry page is the page that the user gets to see before they are logged into the application then the logged in page is the page that the user sees after they have logged into the you know the application right so let's click here and we are not using our templates so we will just create scratch and we're not going to be paying attention to design just the functionality right after these um subsequently also you can check the description under this video to a link to um how to create front-end designs with Florida flow yeah so just you also check that and you see it okay so we click on create blank and we will call these uh login we will just call it login all right the other one we will call it home all right so we've done this is login and then here we will just call this home so we are creating blank we're not using templates we will say uh home all right so this is home or dashboard I think anyone works so home is good I like home so now you see the button is turned on all right so it's good now so you can click and start building and ladies and gentlemen we are ready to start building I would just click on this app bar like this particular one is called an app bar how do you set it you click on here and you see the different settings for it so sometimes you might want to use these or these or these depending on how you're feeling that day well I mean depending on what you want to really achieve okay so but I don't need this title back do I need it do I not need it yeah I think I need it so I need a I need it but I don't need it I don't need the back button so I will go with this one that says page title right so good so I will just come here and change it to home or preferably dashboard okay so dashboard so I think I like dashboard it makes most sense like that okay so uh this is dashboard and this is your widget tree so I will click here we will be using this widget tree a lot we use widget tree we will use the firestore here and then we will use more of these as well settings and Integrations we'll do some things here and then if I told you have a specific font you want to use for your application you have to come to team settings and then you can come to typography and icons and then click here to change your primary font family I like to work with work Sans it's good it's a Google font so you you can enjoy it so I can also put here that my second secondary font is also work sense well that's it well you can choose anything that you want you don't necessarily need to choose a font well it has a default font which it pop which which was Poppins all right so and then you can also change some colors here if you want but we're not really going to those part we're going to just be focusing on widgetree and firestore and then we will come here to this pad and I will show you how to deploy it to the web such that you can see it okay all right now we are here and the next thing we need to do simply fast is that we need to go ahead and then put some some settings for this part that has oh this was login no no no this is not supposed to be dashboard guys so let's take this off totally there's no app bar here because this is a login screen this is a home screen so here we can actually say uh we click here right this is the app bar you have to click on the title right so the title is a widget inside the app bar so you click on it so that you can actually get to change the content of that Widget the text widget so here I will say dashboard okay good our dashboard well let's be consistent right so let's say home good sorry I'm making you change that a lot okay so um here it is and the next thing we need to do quickly here we have to go back to login this is where we start from now this is login yeah we need to just put some uh maybe a text widget here that says right so that's the name for application look you know then we need to put some text fields and then put another one then put a call to action button all right um and then yeah so this is going to be login then sign up okay so I get it now so let's see let's start so here is a column right this first one here is called the scaffold right this is a scaffold of your project this is more like the what you build the application on top of okay so you need to let the scaffold go but if you want to rename the page this particular page this is what you click before you can rename you can only rename the scaffold okay you can also rename the columns and all of these but um preferably I believe that well you can rename the column if you just click here you can see the name of the column here you can rename it but if at all you want to rename them the screen's name the Page's name you have to rename it from the scaffold okay which is the first one here all right so that what we need to do here is quickly we will click on this button here it says ADD child to widget it's a position or something yeah good add a child to this widget what is a child now the whole idea of child is gotten from flutter framework all right so every single thing that you add to the main thing it's called a child right so the main thing is called a parent so these are more like the parents right parent so you want to add a child to this widget this widget is more like your parents now let me look grandparents and then parents and all of that so that's it so uh let's go ahead and add what are we adding we want to add a row right so I'll click and add a child to widget I want to add a row here noun inside this row I'll click on this row now to add a child to this row now so this row immediately becomes apparent so I'm adding a child the child is a text so you see here the text is here and for me to manipulate the text and change the content of the text I have to click on here the hello world path that's on the right hand side and then I can now change these to login right okay so good I have done that I have to come here and then maybe change the font weight to 700 change the font size to 36 right make it really big and then um I think this is okay for me really I can now go ahead and then click on Roll right this is the row that the rule that is inside the column so I have to click on it because I want to Center align these text widgets that is inside the row so I click on the row and then click on D Center this is where you get to handle the alignment in your project right all right so now we have login okay good and then uh well I think this should actually be uh let's change this primary text color so I'll click on this and change it to this all right let's just have this feel it's okay good and then uh also look at this is lapping towards the top a lot I want you to like maybe come around this particular point so I will click on the row itself and give the row a padding so this is where you get to give a padding padding is basically spaces around a widget in in your project right so there's you you can actually get to add a space on top on the right on the left and the on the bottom right now we just want to add on the top so I'll just say 50. well this is good I want 150. okay good so now it's 150 and then that looks like a good position the next thing I need to do is I'll click back on the column which is like where everything is inside all right not the scaffold so everything exactly inside the scaffold at the end you know scenery but I want to put like right now things are only inside this column so I just need to click on the column and add something else what do I want to add I want to add a text field so I click on it click on added child to this widget and then I search for text field okay so I will see a text field here I will click on it and it appears but now the text field requires you to do some adjustment so you see here ah I wouldn't like my text field to lap like on the walls like this on the edges of my screen like this so I'll come here and then change the widgets to maybe 360. okay so the widget is 360. now that works out because the main size of my screen the main width of my screen is 390 all right okay so this is where you get to change the the size of your screen you can click here and then you see different sizes for your screen if it's mobile view you can click here and change it for tablet and if at all you're building a desktop application you can click here to change the desktop part good all right so we will do this and then what we need to do now is look at it see it it doesn't make so much sense we wanted this to be um we want this to be uh maybe we can just uh we want it to be what we want it to be maybe uh email and password right so um let's go ahead and set that up quickly so we want to scroll down here and come here so on the insects we will just change this and say start typing we want the user to start typing something this is more like directing them and saying okay guys start start typing all right so uh the level text I will put here and say email right so email now how does it appear this is how it looks like well it's not so cool right now so click on this and scroll down we're going to have to do some settings so you come here to the input decoration properties that's what you get to do to make sure that the application is nice and have some form of very cool border so I will click here and change it to outline let's look at it it gives us it's supposed to give us like a line underneath but it doesn't because the Border doesn't have a color so we will just go ahead and then click on here to put give the Border a color I like to use these gray and now it has some sort of border all right so now we need to go ahead and then make our border beautiful so how do we do that let's give some uh border radius to it so we'll say 14 and this is it our border looks cool now so let's go ahead and make things even more beautiful let's scroll down and we will come here to content padding contents padding here is basically like shifting things around if you wanted to go to the right I mean the content inside the text field so right now I want to be able to push some things to the right hand side of the scenario like this the screen so I want to say 14 for pushing here so I think preferably I'll say 16. well see now things look a little bit neater but not so neat yet so I will use 64 I think no not 64 24. okay great I think now it looks even better but now you see the login application looks like it's lapped here I don't want it to be like that so I will go ahead and then uh click on these and add some spacing below like padding below so I will say 24 below great so laguino um so well normally you're supposed to add an information for the user to know that okay this is the screen where you create an account right well not necessarily not necessary if you have the button that says create account well true so let's say uh let's click on these and I wouldn't like us to do this all over again so we would just duplicate this screen and change it change the details to password so how do you duplicate you click on the text widget and say Ctrl d That's to duplicate so now we have these now and I need to put some padding here I would say 16 padding I just give some padding at the top so that there will be some space here I'll click on this text field now and then scroll down go to the label text and change it to password all right so it's now in password and then I will come here this is fine it still says start typing but now there are some properties for passwords that you need to uh put in like um when the user types in something it should be hidden right and then there should be some form of Icon here that can help you to toggle to show the password and to hide it right so let's let's do that how do we do it if you scroll down you will see some properties that tells you some things uh let's see let's see let's see where is it so here it is it says password field so if you click here for password field you turn it on it has been turned on but nothing is still happening here now you need to go ahead and give your uh the toggle icon let's start with toggle icon first the toggle icon you need to give it some sort of color so I will click here and give it this gray color it's always like gray and then nothing stick happen because you have not set the size of the icon so I will say 24 good 9 insurers and then I I wouldn't stop there I have to come here to the keyboard type and change it from text to visible password all right so that's it and then uh what else do I need to do here the next thing I would like to just show you quickly is the icon properties the icon property here is maybe you add an icon in front it's more like a trailing icon in front of the maybe somewhere around here so let's say since this is password we can click on this and say uh security uh no this is not going to work out let's say padlock you know um what do we say here [Music] um padlock yes it should be padlock okay not padlock uh lock right so yeah lock so we can use this as a icon we can use this so I think I will use these and then I will change the size to 24. right I just fix it and then that's how you put an icon here I can do the same thing for email I can come here and say click on the icon properties see here this particular one tells me that it's going to be trailing or leading right but here you can put you can't um make it a trading or leading right because it has something here already we have turned on the toggle password toggle icon right so we will just need to go ahead and add a leading icon here and we will say email right so email I will use something like this okay and then I'll put the icon size as 24 as well all right so it looks good looks neat right so that's it now and I don't really like the the Border radius of these icons of these text Fields so I will change it to 8 instead of 14. it's just too much so here I will come here and change these to eight as well okay it's finally just telling me saving project saving timeout it's okay so I will just go ahead and then come here and add a I'll click on this so add a charter widget I want to add a bot I want to add a button to it and um what I'm adding right now is a button and let's go ahead and then do something even cooler here on the bottom I will make the width of the button to be 360. good and then I need to go ahead and this is fine it says button well I want it to not say button I want it to say create account so I come here and say create accounts I hope that you're watching okay then I have to go ahead here and give it some padding on the top let's say uh maybe 14. this is okay all right guys so I think here let's come back here and just give it some more padding for the bottom and say 50. okay something like this this is good now so we have our basic settings for creating accounts and then um yeah creating an account so I don't know does it come does it uh you know bother you that this says login all right so yes it does bother me so I'll click on this and change it from login to I click on here to change it I'll say create account create right so create account maybe put an underscore create account all right and that's it so this is non-create account I will duplicate the screen Ctrl D well Ctrl D doesn't work there you have to right click here and say duplicate page all right so I'll click at this and then change the name from create account to login okay so good it's login here now and then well the same details that you use in creating an account is the same details that you use using logging in so let's come here and change it to login change the text on the button that says login okay so now we have login and we have create good now what we need to do is now we need to do some other basic settings like let's come to home and do some settings what do we want to see in the home here I want to add a picture here I want to add a picture and then I want to add some details of the user here right some details maybe their their email right I want to yeah I want to add their email and then I want to add a form here for them to use it in updating their profile and of course I need them to also be able to update their image so let's do that simply uh and quickly okay so what I need to do now and I'm going to click on these and then add an image right so this is an image and um uh preferably right I would like to put this wrap this widget this image widget in a row so I I should have created a rule first but since I didn't do that you can just right click on the widget and say wrap widget okay in a row great now that works now why did I do that I wanted to be able to Center align the image so this is it I've done that and then this image I want it to be secular so I will increase make the butter radius maybe 360. so this turns this picture into its cycle now I don't want it to lap uh so much like that try to move a widget into its descendant uh okay so I I don't want it to lap here so what I just need to do is give it some tap here okay so um I want to be able to give some padding on top here and say 16. yeah something like that is good and then um what do I need to do now I'll click on the column again and click on add a chart to widgets add a row what do I want to do with this row I want to just add an email the email of the user maybe not just the email their name let's start with the name so I'll click here to add a text inside that role and this text is going to be their name so I will just say let's use a a default name yet which is my name all right so I will come here and change it to 700 and it's bold I will click on here and then Central align it okay so what I clicked on was the row and Center align the text that was inside the row well this name is quite small and I think I will make it 36. uh yeah big enough well I think 24 would be better okay good so here I click on the row again and give it some padding here 14 uh preferably let's use something that is conventional 16. uh then here I will just click on the row again and duplicate the row and then instead of the name this time around I will say email so let's say uh no code no let's just use my email okay so that's it all right uh here you have the email I just need to go ahead and reduce this from 700 let's say 400 by 14 good stuff and then here we don't need this kind of huge padding we just need maybe something like four okay good so we have the name we have the email address we will be getting this thing directly from the database okay so no problems so um here the name let's see what we need to do now is to put some form Fields here like a text field and then make the user to be able to update okay so um let's go ahead and do that uh what do we do what do we do now I wouldn't want to go ahead and then start creating those text Fields again from scratch so I'll just come here and copy it I'll just copy this text field this particular one and go back to the home and then click on the column I'm showing you how to copy and paste things components that you have created so just click on Ctrl V you paste it here all right so that's it and then I can give it some padding here and say 14 good now here is going to be um the email right so email let's start with the name here so let's just Ctrl DDS that's to duplicate it so this first one here will be the name right so let's uh where is it let's say this is going to be a name yeah name and then uh we want to remove this icon for email right so let's maybe say profile I don't know I just still want us to still have some form of Icon there so name right so that's a human being email and we don't need to update their password so that's that's a different process entirely but we can still do it here but let's go ahead and just add um a particular image here for them to maybe an icon for them to click to upload their image right so um is it an icon let's do it like this let's click on this and add a role in the row we will add an image right so let's add an image okay good we add an image let's call let's make this image around so 360 for the Border radius and um and then let's make it smaller so let's say maybe uh 50 no no it's 50. yeah 50 is good 50 by 50. all right so the width is 50. good then it has some padding here I think this should be like 14 so let's say 14 great and then what I need to do now is I just need to click on this row and then click and add a child to widget and say text field well not really text field let's add an icon I want to add an icon that says Plus right so they can add an icon here and then come to settings outline that sorry come to the icon settings so you click on here and search for ADD so you have a button here and it's something that has some sort of rounded edges no I think I can use this so it says plus which is basically add so um I'll give some padding here let's say um let's say what should we say maybe uh 14. I think 24 will make even more sense so 24. and then let's click on the row here and then give it some padding on the top uh 16. all right so we have this and then let's put in the last thing this button is going to be to add an image like you click here to upload an image and then what we have uploaded we will show here and then after that we will click here to upload everything that we've done here to our database to basically update Okay so we will come to here and add a button so this is our button give some padding here and say 16. come here and say 360 that's the width of the button and then come here and change the text on the bottom to update profile okay so great we have this scenario now we have everything and it works what we need to do now is we're going to end up uh you know doing some basic settings here so guys we're done with our the design so for create account for login and uh that's it so um I think this is just gonna be like their the features of this application right so let's see what we can quickly do next like uh let's go ahead and um let's come to let's go to our Firebase and then start creating something but before we do that I want you to observe that um we have uh details email and password right this is going to be going to our users account now when you when you created the project right and you you requested for Florida flow to be able to create accounts Firebase should be able to create account it gave you some things for free so let's go to firester and see what it gave you it gave you the user's collection for free all right so the details already here email display name photo URL unique ID created time phone number and all of that so what we need here is we need we don't need to go ahead and and and do that so when an account has been created these will also be created for us in the back end right so that's in in Firebase so we don't even need to do that yet so the image will come into the photo URL and that's it okay the display name will come in here the email will come in here so uh on this particular scenario you don't need to create anything in Firebase all you just need to do is come to build go to authentication this is where you get to set up your authentication for your application and then you click here to get started and then wait for a couple of seconds and then you expected to pick these as your native like your your authentication provider so we want to use email and password as authentication provider click on enable to turn it on and click on Save and that's it we're up and running then the next thing we need to do is click on build again go to click on firestore database this is where you want to turn on your database to be storing the information that has been created inside your Florida flow application so you click on create database and we're gonna have to start in test mode right so uh we start in test mode for now the production mode requires you to just do some security rule settings so let's click on next and then click on enable all right after this we will do just one final thing which is to turn on the storage okay and that's it our application will begin to run smoothly all right so um we're waiting it shows up here if it didn't show up let's say something happened just refresh the page okay so let's click on build again and go to storage this is the final thing that we're going to turn on and and I would advise you to do these things according to how I'm doing it turn on authentication then fire fire uh firestore database then storage okay otherwise you'll run into some issues click to start in test mode and then click on next and click on done and you're ready to go all right so after these we will just go ahead and then do some basic uh conditions like settings inside flutter floor and we're ready to run our application fully let's go guys good I think this is almost done it's setting your security rules and we will be up and running in a second a second is fast two seconds has passed three seconds has passed four seconds has passed five seconds why what's going on all right I think it's network uh something okay so this is it it's good all right so uh let's come back to Florida flow and uh let's go back to our widget tree I like to go to the tree because it's always really nice let's come here and what do we want to do first of all the first thing that you need to do is we want to be able to add some action to this button so when a user clicks on this button what happens what should happen so these are the things that we need to like set up quickly so um uh but before then I want us to do some changes all right so let's click on here this is for login account let's start with the create part so I'll click on this text field you see all these text fields are called text field so text field text so you don't know which one is password so you have to rename it just for convenience so I'll click on this first one which is for emails I'll say uh uh let's say create create account email right so let's just say uh um well create account maybe create accounts then maybe email right so you just know that this is the email for creating an account and then here is going to be their email for um the password so create account or underscore uh password okay so here you go all right so now we have create account email create account password let's go to login so so we would say login email all right log in email and then we'll click here and say um login password okay okay great let's go back to create account now and set things up so we want to create an action for these buttons so whenever you use a clicks on this create account button we want something to happen we want the user to be able to create an account in inside a Firebase all right so we will click on this and come to this beautiful icon here that says actions so we will click and add an action we will go straight to untap this is already selected by default so we believe that when you use a clicks on Tab like Taps on the button this is the this is where you get to like do something about it so what we want to do now is when the user TAPS in this action right we want them to go to Firebase authentication like not necessarily they're not seeing all of these but this is what what we want to happen this is like back-end engineering now so you come to uh that and then you say Firebase authentication create account so click and create account so uh the authentication provider we would pick email the email field it's create account email now you see why this is very necessary so create account email otherwise it would have seen text field do you get it and then for password we would say create account password that's all guys we don't need to do anything else okay and then um well we can add a snack bar and all of that just to show that we but the thing is you don't really need to do all of that right now so we have created an account scenario let's go here to login if you click on the button to login and then go to add action right you just need to go to firestore database firestore and say sorry not firestore we're going to Firebase authentication and we say login that's it so the authentication provider again is email the email field is going to be login email all right the password field is going to be login password if you interchange these things you're going to run into some issues right so be careful okay so that's it and then with this we can log into our application and it will show what we have here now uh it does take some time to before it runs so what we need to do now is just come here and click and run right so I'll just click on run and it will run the application for me it takes a couple of uh minutes maybe two to four minutes we don't want to do that because uh we would just allow it to run on its own so that you see the different versions of this application so this is a part where uh when we can log in right but there's some things that wouldn't change yet like now this picture has been changed this name will be static a lot of things will be static here so let's go ahead and make it such that when we run again we will still check this when it's done when we run again things will change here so what do we do here let's click here and change the text field to name right so we'll click here just like we did before change it to name okay then here we will change it to email uh email good just for you to remember then um this is already image and then this is image it's okay we will figure it out now what do we want to do we want a situation whereby when the user clicks on update when they type something here and type something here and then they click on update profile it should be able to update the details of the this particular user in the back end so let's click on this let's start with some things first this is done this is fine now we want to start with this image now uh okay now we want to start with this button here meanwhile this button should be bigger Maybe 36. yeah so now great when they click on this button right now we want something to happen so let's come here click on this add action this is what is going to pop up their gallery on the their phone for them to pick a picture and then upload right so we will just scroll down here and you will see something that says upload data all right so you click on upload data you want to upload or save in media so you pick this particular one and then you come to Media Source change it from either camera or these to maybe just Gallery okay that's fine and then we will come here to change the upload type to Firebase all right so that's very important and then um what we need to do here is uh I think we don't need to do any other thing for now okay so we need to do something here so it says shoot snack bar yes we need to turn this on that means when the upload is complete it should say upload complete okay so then um what else do we need to do so these are the basic things you just need to do um something is happening here it says Firebase setup setup Firebase storage tap to view Firebase blah blah blah so yeah it's very important for you to be taking note of the errors that you get so I will click here to deploy the the Firebase storage settings here so I'll just click here to deploy it and yep it will just tell me deployed and I don't have that error again good guys let's go back to our widget tree and we're done for this particular scenario Let's uh okay application is done running we will check it out so what we need to do now is let's click on this image what does this image need to do for us we want this image to show what has been updated right so we don't want to just go in going blind right so we want when you upload an image it should show here so let's click on this image and scroll down let's come to path now this is the this is the uh the the link that shows what we have here as a default image right so what we need to do is we need to go ahead and then click on this uh button all right so this icon here and then we will say click on this and we will say go to widget state we wanted to show the uploaded file right so it has uploaded the file like when we click it to upload something something enters into uh so into Florida flow technically right so it's gonna show here the image that has been uploaded so we're good now now what we need to do again now is we will go ahead and for this particular image right uh this is when the user has the details has been updated so we want to be able to click on this role and do some querying but before then I would like to do this step by step so let's go ahead and update this detailed inside but I think so we should do this first so now um this particular picture will come from the database that means uh we have to click this button first before this shows so how do we do that so we need to query the back end so for you to query the back and you have to select a particular widget that the element the with the component that you want to use is inside so here I'm using the row I'll click on here to add a backend query don't worry with time you really understand this so click to add a backend query go to query type and select it as a query collection and then I'll come to collection I will say users all right so um I don't want a list of documents I just want one document all right so then what I need to do is click on confirm and that's it so now in this particular picture now I can now go ahead and then determine where the source of the picture will come from so I'll click on this icon again I'll click in here and go to user's document if I didn't query this particular place I wouldn't say this user's document I would just see authenticate the user page parameters and other things so here I'll click on the user's document I will see photo URL now this is the the the the this is where the the the file of the uploaded image will be saved in in your Firebase so we call we put that as photo URL and we are good now and then for these name parts we need to say um we need to just come here we don't need to query for it to show us so it's just going to be authenticated user so we'll click here authenticated user display name all right then for here we will say uh authenticated user uh email all right so we're good now so everything is going to work out fine now but we want to do just one last thing so we need to when the user types in something here and types in something here and uploads an image we want to be able to Now update this profile inside the database so let's go ahead and add an action to this profile so we click here to add an action click here click on add an action and then we will go to firestore now um here we want to update a document updated document so we click an updated document and uh we want to basically update the authenticated user document so we'll click on these you know we have to select a reference update so we click on on search go to authenticated user and we'll say we'll pick the user reference and we will confirm so that's it that's how we do it and what we need to now mention like list are the things that we want to update so we click here and so that means email is here we want to update the display name as well and then photo URL we will stop there the other things that we can update but we don't want to do this once so we'll click here to for the email part and it saves a value Source where do you want to take the the information you want to update from is it a specific value okay if it is type it here we don't want the specific value we want it to come from variable so we'll click here and click on the set all right and then we will say uh we will go to widget State and we will pick uh what was that email so pick email okay good then we will come to display name and do the same thing it's not a specific value it's from a variable we click on set go to widget State and say name good then the last one is going to be the photo URL the same thing so we'll save from from a variable we'll click on set and say widget State it's going to be uploaded file URL good now we have these done for us and so when when it's updated we want to just put up a snack bar that says uh profile updated so let's click on open Action flow editor and then add another action here and then we would just say snack bar okay so show snack bar and what do you want the snack bar to show we say profile updated okay so we're good with this all right so now this is perfect and super perfect sound now with this all of this you can now you know enjoy your application so if I told you have not subscribed to this Channel please click on the Subscribe button and you know subscribe to this channel and uh give me a thumbs up if you like this video I believe you like it I like it too and then of course click on the notification Bell so that you will always be reminded when I put out a video okay so this is it I will just click on run again and this is going to be the version to technically well I have not changed the versions this is where you change the versions but I haven't changed it but uh now it's gonna run but let's look at what we did first this was the very first one we did uh let's wait for a second and then photo flow is going to load up all the widgets so that we can see it good so this is it so beautiful guys I like what we're doing here so here we want to create an account so we will say um uh what do we say what did we say what do we say what did we say we want to just put in some information here I want to say no code yeah I want to say um yeah let's say no code Africa HQ at gmail.com and I will just copy it because I need to use it at some points let's say I'm going to put a password all right so the reason why it is not showing you what I'm typing is because we change this text field to password all right so but you can toggle the feature here so you can see the password so I'll click and create account in a couple of seconds my account will be created my account is created now don't forget these details here David Rock and email this will default before we did not update this particular this is the very first run that we did and all of this is not working yet so none of this is working yet okay so we will check that out in the next one when this one is done running so I think it's done running so we need to just go ahead and then try it out okay so um oh the thing is this it's we have already logged in so it still shows the login scenario here all right so what we need to do now is to see there's no picture here there's no picture here because we did not put a default picture for it and uh this particular email Here is known from our from the database it's the email that is coming out from our database the name is not here and there's no picture so we will have to do some basic settings and we need to actually put a logo icon or a log out button okay and what else we need to put something in front for the login pad so that they can sign up they can switch between uh sign up and login okay so let's just go ahead and then put some basic things here we don't even have a picture here but it's okay this one is not necessary let's say David all right so David Rock and then let's put let's change it to another email uh no let's just leave it uh let's just type the same thing I had copied it so let's go ahead and then click on these to pick a picture okay so um I do have a picture myself here I have to just like quickly find it okay this is me so I'll just pick up the picture it's gonna show here uploading file it's a success it shows the file that has been uploaded beautiful and clean right and then I need to go ahead and then click on update profile and everything shows it says profile updated beautiful isn't it it's beautiful right so now we don't have a logout button we should be able to log out and all of that so let's come here and click on this and add a button let's call it button let's say 360 and let's make it red um and then let's say log out Okay so we've done login let's do logout so let's uh scroll up give some padding here 16 and then what do we do here we just need to click on the button and add an action come to add action and say uh Firebase authentication will log out so that's it we're done it's going to take the user back to um I wanted to take the user back to either of the pages create account or anything so but now let's do something to this create account so if I told you I brought to create account and they already have an account they need to see something that says login right so let's go ahead and click on this column add a child to widget we're adding a row in the row we're adding a text and the text says login uh sorry this is yeah the text says login okay so we can just uh let's click here and then Center align it and give it some padding say 16 okay so log in here and then I will just copy this quickly and take it to login and say maybe they they come to login somehow and they don't have an account we will say create account so I'm not really paying attention to the design but I think what we have here is pretty sweet so what do we do now so we need to give like give some action to this you know button this text so if they want to log in we just need to say add action and say on tap navigate to uh login okay that's good come to login and if they click on create account we add an action add action on tap navigate to create account and that's it guys we can run our application again and we're good this time okay so meanwhile um one of the things that you could have done here is come to home and here on the image part let's go to Google and do some things let's say default uh image default profile holder profile picture something like that so you see some of these options here I will just pick one of them I think I will pick maybe this one is it sharp it's not so sure I need something that can be used for both gender this might work no it's not so clear this might work oh okay yeah this is good so all right click on it and copy image address and then I will go here and this is the image so I will just click on here and add default variable here so I just add it here and click confirm so this place will no longer be blank even if they have not created something it's a show here and then for this display name so I'll click on here and just say first first all right let's just say name here all right name here something like that so they will see something that says name here instead of anything else instead of it being blank okay of course they will always see email because they signed up with an email and so that's it guys so we can go ahead and just click to uh you know run run oh I did run it again right did I no I didn't so this is like the last running and I think we're done while we're waiting for that one to finish running let me just show you how to publish these to the the web so that you can like maybe send it to your friend to look at it or your clients if at all you're working for a client so let's come here to um this is where you actually do it but it requires you to go to enable web support before publishing so you click on these and turn on this button that's it you come back to web publishing and that's it if you want it to be unique you can create like rename this all right so but I don't really want it to be unique I just I'm gonna go ahead and click on publish here wait for a couple of minutes it will generate a link so we will just wait while we're still waiting for these to finish building um it says it's gonna take two to four minutes it might take way shorter than that because we've already ran some applications so um this is gonna take some time to so let's come here to uh Firebase and see what has happened let me show you the things that has happened our user collection has been created we have a user document that shows here so it shows here the created time the display name the email and uh the photo URL and a unique ID all right so then we can also come here to the authentication part of things and see the name that the identifier right so this is it guys this is it okay so um that's it uh the the password for the user doesn't get to be shown here uh Firebase handles that security like delicately okay so let's come here this has not finished yet but our application has finished running Let's test it let's just test our logout button so here we have everything it's working out fine log out okay and then we can just uh this is for login it switches between create an account and login right so that's it so we want to create a new account let's create a new account with uh uh let's say um well you can actually always use anything any email for now uh let's say Davido Davido gmail.com something like that and then password one two two three four five six you can toggle it and all of that and then create account so now this is a new account this is a new account uh and then but the thing is this it still shows this particular user all right it still shows this picture of myself right I needed you to see this particular error so that you know how to fix it now the reason why it shows this particular user is because I didn't filter what should show here right so you're just showing the available picture in the database right it's not showing the name because the authenticator user doesn't have a name yet so it shows the email of the authenticated user because that's okay uh and then we don't have this correct picture we should be seeing a default picture here so let's go ahead and then correct that quickly so but first this has finished so if you want to send it to your client to view it this is the link this is where you click to view your application so it's going to um show up very soon and it's going to show you in a mobile mobile perspective so this is it this is how it shows right so if you wanted to show a bit nicely you can say F12 on your keyboard and it's a show like this okay let's come back here and fix a few floors let's come here I needed these tutorial to be detailed so that you can learn a lot of things so here on the road this was what we queried right so we would just come to edit the backend query what we want to do is just add a filter so um the we're going to say we can just say that what we want to see here right so we want to say filter by email filter by email of the user okay and the relation we want to say is equal to that means the email of the user is equal to what is going to be quoted authenticated user email all right so that's it so we confirm so now if we run it okay if we run it we will see this thing that showed like this it's uh it's going to announce through the default image so we can close all of this for now uh okay and wait for this to just quickly run and then that will be the end of our tutorial so meanwhile I'm very sure you enjoyed this tutorial uh using photo flow to build applications that are fast and of course you're building it faster than ever okay so um let's wait for a couple of minutes for this to completely run and then we will take a look at it and see the updates we have made to the application meanwhile please just subscribe to this channel click on the like button to like this video and click on the notification Bell so that when you when I make a video like this you will be able to like see it and enjoy it all right so you can drop comments for me too if you have something you would like me to change updates adjust recommendations are highly welcomed thank you very much okay so the the view is a bit long because I wanted it to be like super detailed so that you can like really really understand so it's good Let's uh take a look at uh like what is going on okay so this is it we're just waiting for these to completely run so that we can see our application and that's it meanwhile I hope you really enjoyed this because I did I enjoyed you know talking and teaching okay so um in a couple of minutes or seconds now we will be seeing our application running properly in the subsequent tutorial I will show you different things like how to download your uh application as an APK how to do a couple of things I would just show you a lot of things like different things so just uh you know anticipate the tutorials okay so we're done it is finished running we'll come here and then see our application so we're still logged in so yeah it just show us the logged in uh pad or application but now things will appear a little bit different okay so now you see it's not showing me the picture of David anymore the other profile it's showing me uh you know the default picture so let's go ahead and say first name is Davido okay so and then here can just be uh what did I use here yeah so there we go and gmail.com and I need to add a profit picture I'll just pick a random picture here let's uh okay so this is my picture but I think it's quite large but let's see it's quite large actually but um it's done success and it shows here so I can push these now it's updated beautiful guys so now I can log out and log in and everything is good all right guys I hope you enjoyed this tutorial see you in the next video bye for now

Channel: eelspace

Views: 10,780

Keywords: flutterflow tutorial, flutterflow tutorial for beginners, flutterflow firebase, #nocodenerd

Id: mcyYB5LvAO8

Length: 61min 18sec (3678 seconds)

Published: Sat May 06 2023