🔥📱 Firebase x Flutter Masterclass: Auth / Firestore / Storage / Hosting

hey what's up welcome to the flutter and Firebase Master Class if you don't already know Firebase is a backend service we can use to give our flutter apps a bunch of really important tools and functionality so in this course I'm going to be teaching you four main areas that I think are essential when it comes to building apps so we got fire store just to store some basic type of information like text and numbers then we got storage to upload and store files such as images and of course authentic ation so like email and password so I'll show you also how to do o or such as Google signin and the last one I really like is also hosting so I'll show you how to host your app on the web so you can just share the link around easily without having to download the app so I'm going to be teaching you these four topics and we'll put it all together at the end I'll show you how to code up some real apps using Firebase for the back end so just real quick the overview of what this course covers I'll start by showing you how to set up up so just to connect your flut app to your Firebase console and then we'll start off with fir store and a good way to learn fir store functionality is to just make a basic crud application which is pretty much a Notes app and then we've got authentication with email as well as o or like Google sign in and once we got all that kind of theory out of the way let's make a social media app with all of that authentication and things like that so we got profile and users and also a chat application and also a e-commerce type of application so all of this using Firebase for the back end and then we'll move on to the storage and I'll show you how to upload images using your phone and then we'll move on to hostings where we can upload our web app to Firebase and then we can just share a link around so there's a lot of good information packed into this course so take your time digesting all of it and make sure you also code as well yourself to really learn this stuff but without further Ado let's start from the very beginning welcome to the flutter and Firebase master class in this one I'm going to teach you the four most important operations when it comes to databases and I'm going to show you by cing up a super simple notes app where you can create a new note read the notes from a database as well as updating and deleting so let's go to your Firebase console and let's create a new project I'm just going to call it crud tutorial and I'm just going to create this [Music] now cool so now what we need to do is we need to connect our Firebase with our flut project so I've opened up here a brand new flut project and let's open up the terminal and if you've never used the flutter fire CLI before then you're going to need to install this one but I've already done that so I'm just going to skip that step and the first thing we need to do is to say Firebase login to make sure that you're logged into the same email as the Firebase console then let's say flutter Pub Global activate the flutter fire CLI looks like we have a little error thing I'm just going to copy this and paste it in sweet then let's say flut fire configure and let's look for our Firebase project that we just made so there it is crud tutorial and I'm going to choose Android and iOS let's say flut Up Pub add Firebase core awesome and then we always need to add this little code in the main function just to set up so widgets flutter binding ensure that it's initialized and then let's change this to an asynchronous function and await Firebase initialize app cool and I always just kill the app and restart it just to make sure everything's working fine and there it is and if you come back to your Firebase console and you refresh it you should be able to see we connected the two apps so the Android and the iOS awesome now the first thing we want to do here is go to the build we want to have the fir store database and let's create a database hit next and you can choose your location but I'm just going to leave it at us cool and then if you come to the rules you can see it's allowing the read and write I'm just going to change this the write to be true and this just means we can now save data into it sweet now let's come back to our flut project again and let's add in this package for the fir store so flutter Pub add Cloud fir store and now we can access our database so I'm going to delete everything below the main function and just create this from scratch so I've got my app and then our material app and I'm just going to call it a homepage and it's always good practice to put your pages in a separate folder and this can be a blank scaffold and let's come back to our main do Dot and then let's import this cool so we should just have a blank scaffold sweet and let's just set up this app just the basics of it so the app bar and I just want to have a floating action button so that's the thing on the bottom right let's give it a plus icon cool so now I'm going to create a new folder called services and I'm going to have fir store do do and so I'm going to put all the operations into this file here so class fire store service now the very first thing we need to do is to get the collection of notes from the database and then we're going to have the four things so create read update and delete and specifically for us in this app we're going to say like create means adding a new note read is getting the note from the database and then we want to update notes and same thing is deleting cool so if I start with the first one here let's get the collection reference of notes and let's call The Collection just notes if I just quickly code just the first function here for the creating we want to have a future and this is for adding a note so I'm going to accept a parameter just a string for what the note is and the bit of code you need to know if we go to the notes you can see after the dot the add method and in these curly braces you can also have multiple Fields so let's say in the note field I want to give it the note but let's also have a Tim stamp cool and so let's try to test this out with our Floating Action button so if I click on this button here I want to open up a small box to get the user to type something in so if I create a method here real quick let's open note box and let's show the dialogue and we're going to need the context so I'm actually going to change this to a stateful widget so if you hover over this stateless widget and you press on Mac it's command Dot and you can see you got this option here I think on Windows it might be control dot we can now build this dialogue and let's just start off with a blank text field so just to test this out if I save this I click on the plus and sweet here's our little dialogue box and then you got the text field inside where we can type in so how do we access what the user typed well we need a text controller so you can see in the text field we can give it the text controller and then now we need a button so in the action let's have a button to save so I'm just going to use a elevated button and let's say add cool so we want to type a Noe in and then we want to hit add to save it so currently it's executing nothing so inside these braces let's add a new note and we want to access the methods from this fire store class right so at the top here let's get the fire store service object at the top and then now we can say F store service and then we can access all of those methods so do add note and we want to give it the note so that's going to be the text controller cool and then just a couple UI things we need to do so after you add the note we want to clear what's in the text controller and just leave it blank after it's added in and then we also want to close the box so let's try this first note and I add it and nothing's happening on our app because we are not reading it yet but if I come back to my console and I refresh it you can see there's our notes and we got our first document and there's our first note there so that's the natural next step we need to do right we need to be able to read now that we can create so let's fill out the read method here now read we're going to use a stream and a stream Builder to sort of continuously listen to any changes in our database so let's call this get notes stream and we want to get the notes and we can now order them by the Tim stamp so descending let's say true meaning the newest one is going to be at the top cool so if I come back to my UI in the homepage in the body of the scaffold we want to use a stream Builder and you can see inside here we have to give it a stream and so we can give it our get notes stream and so that's what it's going to be listening to and then we can build the UI so firstly let's just check if the snapshot has data then we can get the docs so let's create a list here called notes list and we want to display it as a list view cool so just to have a bit of plan about what we're doing so the first thing is let's get the individual document and then we want to get the string of notes from the document and then let's give that to a list tile to display nicely in the UI so the first thing is let's just get the individual document so we're going through the index of the notes list and one bit of useful information for our other couple methods coming up is going to be this document ID just to keep track of the notes so I'm just going going to use this a bit later on now let's get the note from each document and store it in this data variable so what we really want is just a string for the note text and in the data we can get this particular field called note sweet so now let's displayed as a list tile for the UI and everything's all good except we can finish off this if else and so if there's no data then let's just return no notes cool and looks like we have some range error oh that's because we didn't specify the item count so that's just going to be however long the notes list is sweet so let's just save this and rerun it and you can see now we can read our database and we got the first note which means we should be able to create a second note and there it is cool so we can create and we can read now the last couple is the update so this one we need to know the doc ID so we need to know which note we're updating and we also need to know what the new note is going to be so for this one if you go to the notes let's go to the particular doc ID and then let's just update and you can just update the fields so so if I come back to my UI let's just go to the trailing and let's let's have a gear button so it's going to have an icon button here and let's have a settings icon yeah it's probably good cool there's a gear and so if I click on this currently it's executing nothing so what I want to do is I want to open up another box so that the iser can type something in now let's see if we can recycle what we already Ed just to be efficient with our code so we already have a open note box method here for when we add a new note now let's just add a parameter here for the document ID and I'm going to put a question mark here and what that means is this can potentially be null I made a whole video about null safety so check that out if you need so when we call this method and we're giving the parameter document ID we want a string but it could also be a null value so the reason why I'm doing this is because when we hit the button to save let's put a little if statement here so if the document ID is null then we're going to add a new note and then otherwise we want to update an existing note okay so if I come down to my button here then we can just open the note box and just give it the doc ID let's H the gear we can now put in a a new text and you can see it got updated sweet which brings us to the last one which is the deleting same thing we need to know which note we're deleting so let's accept the document ID as a parameter and once we know that let's just go to that document in the notes and just delete and then in our UI we need to have another delete button so in the trailing let's just put in a quick row here and have the button so one's for the update and let's just copy it to create another one for the delete and for the unpressed we just want to call the delete note and switch up the icon cool and by the way if you save this you're going to get an error so you need to specify the main access size to be minimum cool so if I try this and if I delete it and then it will get deleted and that's it that's how you use the crud operations now we can use this to make some other cool apps using flut and Firebase so thanks for watching and I'll catch you guys in the next [Music] one in this one I'm going to teach you how to create a minimal social media app we're going to start completely from scratch and start with authentication and then once you're logged in you can post a message to the wall we'll have some additional Pages like the profile page and I'll also show you how we can make it using light mode as well as dark mode so I've opened up a brand new flut project and I'm just going to delete everything below the main function just to start this from scratch now the very first thing we need to make is a login page so I'm just going to create that in a separate folder called Pages just to keep our code nice and clean and the login page for now we'll just start off with a blank scaffold and let's just come back to our main function just to import it and sweet if you save everything we should just have this nice White Blank app so this is where we'll begin now for this app I want to take consideration for light mode but also dark mode so I'm going to create a new folder here called theme and let's create a light mode file and let's fill out the different colors for light mode so the brightness I'm going to make light and the main thing here is the color scheme so I'm going to fill out the background primary secondary and also inverse primary is pretty helpful so these are just different Shades of Gray that we're going to use cool and maybe let's have another one for the text we can have a body color and a display color cool and then let's just do another quick one for dark mode and so for dark mode I'm just going to copy and paste this in switch some of these values make the Grays a bit bit darker and some of the text we can make lighter cool so you can obviously choose whichever colors you want but I'm going to go with this now in our main file in our material app you can specify the theme to be light mode and then we can also specify the Dark theme so we'll give dark mode cool so if I just show you right at the beginning if you go to the scaffold we can say theme do of context and we can go to the the color scheme if I just set the background color this will just change depending on if it's light mode or dark mode So currently it's in light mode and let's start filling out the body so in the middle I'm just going to have a big column and let's have a bit of a plan here so I'm going to need a logo and then maybe an app name and then we need two text Fields so one for the email and one for the password let's have a forgot password as well and then main thing here is the sign in button and at the very bottom we also want this little text saying if you don't have an account then register here so that we can go to the register page cool so let's start filling this out starting with the logo you can place whatever image you want I'm just going to start with a very simple person icon and for the color I'm going to give it the inverse primary so it'll be a very dark color that we specified in the in the theme cool and you can see there it is at the top now for the column I'm just going to Center this main access alignment and if I just to with the appearance and I change it to dark mode you can see that the colors change nicely so let's just continue on now after the logo I want to have a little Gap so let's use the size box and then this is usually where you would put your app name so I'm just going to say minimal and when it comes to the text Fields I want to create this in a new folder called components just so that we can reuse this later on so I'm going to create a stateless widget here called my text field and here are the different properties that I want to change between text field to text field so the variables are going to be the hint text are we going to obscure the text like for the password and also what is the controller and the controller is used to access whatever is typed into the text field so let's just require these when we create this text field and just to show you real quick what's going on if I just return a blank text field and come back to the login page you can start typing my text field and you can hit enter to Auto Import and now we can just start filling these out so controller we need to give it a controller so let's just create that at the very top we have to create a text editing controller so the first one's going to be for email and then we want to another one for a password controller so if you just save this you can see there's a little line there there's our text field and we can just start typing stuff in and we can access what the user typed in using this email controller cool so let's just come back to our component text field just to decorate this up so we can give it the controller that we passed through and I just want to decorate a little bit here so I'm going to use an outline input border which is what I like and it looks like we probably need some space between the app name and the text field and this column let's give it a padding all the way around of 25 nice sweet now I want to create another text field for the password and again we're going to need some space between but a very small space so let's make the height just 10 and for the Obscure text I want to say true for this one so what this one is saying is we want to make sure that when the user types a password in that you can't see it so I'll show you what I mean and one thing I always like to do is to make sure the Border Corners aren't so sharp like I like to specify the Border radius and curve them a bit you can obviously go for a much more curved look but I'm going to go for 12 cool and we got the hint text there so what the hint text one is doing is if I just say email for the first one and then password for the second you can see it kind of tells the user what should be typed in this text field so it'll disappear when you start typing cool and these little dots is what I mean by the Obscure text like for passwords and looks like it's currently set to true as default so let's just pass through the Obscure text variable so the top one's false the bottom one's true so you can see in the email text field we want to show the letters but for the password we want to hide them so that's what that's doing cool and then let's move on have another little sized box of 10 and let's have a text widget saying forgot password now I actually want to position this it's in the middle right now but I want to have it on the right hand side so a little trick is if you just put this in a row you can see it's just going to go straight to the left hand side and then I'm going to specify the access alignment to the end there we go cool and then let's just style this up a little bit and dark mode and light mode looking pretty good so far now it's time for our signin button so we might have to use some buttons later on again so I'm going to create this as a separate file in our components let's call this my button and again if we think about what's going to be different from button to button the first thing is the text that's written on this button and also if I just use a gesture detector here for the on Tab the function of the button is going to be different right so let's just require those two parameters and let's start decorating this up so I'm just going to use a container here and just curve the corners a bit add some padding and then in the middle we just want to display a text so just to visually see what we just created let's come back to our login page and import my button cool so for the first one I'm just going to say log in and then on tap let's just execute nothing for now let's just see what this looks like cool and there it is for light mode let's just see what dark mode and yeah that's looking pretty good sweet so if I click on this button right we want to log in which is a method we haven't created yet so let's just create that on the top and we can fill this out later on when we connect it to Firebase sweet so that's our login page but at the very bottom we want to have a little message here saying don't have an account then register here and the register button we want to make it a bit bold because we want to show the user we can tap on this by the way if you ever don't like any of these colors you can come back to your theme and adjust it to the way you want like for example this inverse primary is looking a little bit too dark for my liking so I'm just going to soften that up a bit and just check on dark mode as well everything's looking good to your preference but yeah like I said in our login page at the very bottom we want to make sure that the register here text widget is taable like we want to click on this to go to the register page so that's why we have it more bold and let's wrap this in a gesture detector so that we can tap on this widget sweet now let's create a new page for register and let's do the same thing so I'm just going to copy everything from the login page and just change it to register page and the main difference we need for this one is I'm going to create another text editing controller for confirming the password and also let's have another one to accept the username as well so we're going to use four text fields in total and the button should say register instead of login and at the very bottom let's say already have an account then log in here so we can switch between the two pages cool and just to show you the visual differences I go to the main. file in the home let's return the register page cool and it looks like that's what it looks like and it's working pretty good so what we want to do is we want to be able to show the login page first but if the user hasn't registered before then we want them to be able to go to the register page and back and forth so that's why we have these ontap methods that we created from before so I'm going to create this at the top and require it when we create this login page as well as the register page just to organize what we're about to do I'm going to create another folder called orth and I'm going to create a file here called login or register so what this one's going to do is it's going to be a stateful widget and initially we're just going to show a login page and then we're going to create a toggle so that we can go between the two pages cool so when we build this widget just depending on if we are showing the login page then return login page and you can see there's that on top that we specified from before just give it the tole page method and same thing for the register page sweet so if I come back to my main. file instead of returning one page or the other let's just return this new login or register page okay and just again to be clear it's going to fire up this login or register page and at the beginning we're going to show login page and we can see these toggles if we tap on these text widgets here we can go between the two pages awesome now let's go to your Firebase console and let's create a new project I'm going to call it minimal social app sweet now what we need to do is let's go to our authentication and let's click get started and if you go to the signin providers let's add a new provider and click the email and password sweet then let's come back to our flutter project and let's hook it up to Firebase so in your terminal just make sure first of all if you hit Firebase login that is logged into the same email as your Firebase Firebase console then we want to say Pub Global activate flut fire CLI looks like I got this little error so I'm just going to copy that in and this is the main thing flut fire configure and then look for the project that you just created there's my one minimal social app and I'm going to create this for IOS and Android the last thing we need to do is to add the Firebase core package and we want to add in the Firebase or package as well switch and then just a little bit of code in the main function just to finish the setting up we want to say widgets flutter binding ensure initialized and let's make this an asynchronous function and let's await the Firebase to initialize the app cool and just save it and run your app again just to make sure there's no more errors and if you come back to your Firebase console if you refresh the page you should be able to see that we have these two apps connected now aome so now what we're going to do is let's try to create a new user so we have this nice register page and we have this register method for us to fill out in here let's just have a little plan so firstly we want to show a loading Circle and we want to check to make sure that the passwords and the confirmed passwords match and once that's all done then let's try creating the user so just start with the showing the loading Circle I'm just going to show a dialogue here and I need the context so I'm actually just going to switch this state L widget to a state full widget and you can do that by hovering your mouse over the state list widget word and hit command dot I think on Windows it's control Dot and you'll have this option to switch to a stateful widget so in this little dialogue box let's show in the middle a circular progress indicator so that's just our loading Circle and let's make sure that we are going to create the user only if the passwords match so if the password controller and the confirmed password controller isn't the same then we're going to pop the loading Circle and let's just show a little error to the user telling them you know to fix the password so this displaying this this user so displaying this kind of message is going to be pretty common use case for us so let's just create another method here and this one I'm actually going to create it in a new folder in a new file here just called helper functions cuz we might need to use it across the app this one is just for displaying an error to the user or just displaying a message to the user so for the parameters just given a string that's a message show a dialogue displaying this message so just to see what we just did we can now import this little help function and we can give it a message like passwords don't match and we'll see later on what this looks like but let's just finish off this code real quick so let's try to create the user now now in Firebase we are going to say Firebase or. instance and you can see here the create user with email and password that's what we want and we can just give it the email and password and looks like we should change this to an asynchronous function and then finally if that's all done then pop the circle now we might get some errors so if we have a Firebase or exception let's catch this error and again pop the circle but display play the message to the user and again that's why that helper function is very helpful so I'm just going to kill this app and let's just run it again sweet now let's go to our register page I'm going to say Mitch for the username Mitch Coco gmail.com and the first thing I just want to check is let's try to say our password and the confirm password is different let's just see the error message sweet passwords don't match fill out the username fill out the email and let's create a user sweet now if I come back to my Firebase console and you go to the authentication you can see there's our new user that we just created sweet and by the way just to optimize this code a little bit we should say if the passwords don't match and put this in an if else statement so we only want to try to create the account as long as the passw s to match so we can help the code out a little bit and now let's try to log in so we created a user so let's try to fill out this login method so it's kind of similar we're going to show a loading Circle first and then we're going to try the sign in so if you go to your Firebase or. instance you can see this option sign in with email and password and then we can pop the loading Circle and if we have any errors just display the error awesome now what this means is if we have users that can sign in and sign out we want to have a way to make sure that the app can automatically know what pages to display like if the user signed in then we want to display the homepage if the user isn't signed in then we want to display the login register page so we're going to go to our or folder and create another file called or do do and this one I'm just going to call it or page and what it's going to do is it's going to use a stream to just listen to the authentication so if the user is signed in or not so the stream that we're going to listen to is Firebase or. instance and you can see here it's called or state changes so the this will just let us know about if the user is signed in or not so if the user is logged in then we're going to return the homepage which we haven't created yet if the user is not logged in then that's when we want to display the login or register page right so just to demonstrate what we are doing I'm just going to create a homepage real quick let's just show a blank scaffold let's just have an app bar saying homepage awesome so just starting from the main function just to keep everyone on the same page it's going to fire up my app and then we're going to go to the login or register page currently so I'm going to change this to or page which is what we just created and this is going to firstly listen for if we are already signed in or not okay looks like we are in the homepage but our app bar is kind of funny let's just give it a color and we can naturally have a action for a log out button right so logging out is also very easy it's just fire base or instance do sign out so we can now log in we can now log out sweet now let's keep moving on now we are able to do the authentication we can sign users in and so we're at this homepage now we're going to create a few more pages for this app so we got the homepage we want a profile page and then let's also have a users page page to display all of the users inside the app so for this app bar color let's give it sort of our theme now the first thing I want to have is the drawer to kind of organize these pages so without even filling out anything if you just save this you can see there's that little menu button on the top left and I can open up a blank drawer so what I'm going to do is just to keep our code nice and organized I'm going to create create my drawer in my components folder just to separate out the code cool so let's give it our background color and then we're going to have a column so just to have a bit of a plan we have a drawer header on the top and then we're going to have three three tiles so the home profile and the user tile so let's just start with the drawer header this one I'm just going to give it an icon and this is just a convenient widget to have on the top of a drawer just occupies a good amount of space and then for the list tiles so I'm just going to have the home one first now when I tap on this the home we are already home so we just want to pop this dialogue and maybe we could give some padding just to the left of this sweet now let's copy this list tile and I'm going to do this do the same thing for profile and users and also log out now when it comes to the log out button I want to have that on the very bottom while the rest three are at the top so what I'm going to do is everything except for the logout list tile I'm going to group them in its own column and then this overall column I'm going to make the main access alignment space between so this will just push the log out to the bottom and just for the logout tile I'm just going to add some extra padding for the bottom side okay this is looking visually good so we're going to use this draw out to deal with the navigation to go to different pages so let's just create some quick scaffolds here for the profile page and the users page now if you come to the main. do file we can go to the routes and this will help us to organize our pages to navigate to so I'm just going to list out all of the pages that we have so we got the login register page homepage profile page and users page so the reason why these routes are useful is if we click on this profile tile we want to pop the drawer but we also want to navigate to this profile page so we can give it that route name and similar to the users tile awesome and then the last one was the log out now we actually had the logout button in our app bar right so let's actually get rid of that and put it inside of our drawer okay much better and we can navigate to the different pages sweet looks like we can't really see the app bar but we can focus on decorating it now great now the last Firebase service we want to use is the cloud fire store so this is just to store the data for the users posts and also some information about all the users that we have so in your Firebase console let's go to your fir store database and create a database just hit next and you can select your location I'm just going to leave mine at the us and one thing you want to do here real quick is in the rules we can allow the read and write if true I'm just going to change that so that we can update some of the data awesome now we come back to our flut project and we should open up our terminal and add the package for the fire store cool so now we can store some information about any of the data in our app so the first thing I want to store is when we create a new user I want to store this user credential in my database so that I can have a page in the users page where I just sort of list out all of the users that we have in the app so when we create the new user we have this user credential so I'm going to create a user document and add it to the fire store so let's create that method real quick so this will be a future create user document with the given user credential so first of all let's just check real quick just make sure it's not null and this is how we add a new document to our database so we're going to go to our collection called users that's the group is going to be under and we can create a new document here with the users email and then we can set some information here so I want to store the email and the username okay so I restarted my app just to make sure all the changes were done well especially when you add a new package just restart your app and let's create a new user let's create one for Ronaldo so I register it let's see in our Cloud fire store if I refresh the page you can see there's our new collection that we just added and you can see it's the Ronaldo so this is how we store some data in our app using fir store cool which means we can now have a profile page sort of displaying the current logged in user and we can get the users details to display on this profile page so let's grab the current user you can say Firebase or. instance. current user and then let's use a future to get the users details that we just added so remember we had that in our collection called users and let's get those documents so in our profile page let's sort of decorate this up as we go along with the background color but the main thing here is the body we're going to use a future Builder and what we're going to build is very similar to what we had in the other Pages we're just going to firstly show a loading Circle and then any error that we need to display and then let's get the data so firstly let's show a loading Circle if we need and then if we have an arrow let's display the arrow and then finally if we have the data then let's grab the data from this user okay so once once we have the user let's grab the email field and the username field okay and at the very end else if we have nothing just display no data okay now let's see if this works if I save this and I go to my profile yeah you can see the ralo information which is the current log user sweet so now we can display the current user let's go to our users page and try to display all the users so let's just start off by giving it a background color and then the stream Builder we're going to listen for the collection of users so again just display any errors if we need and show a loading Circle and then let's get all the users and we're going to display it using a list view Builder so the item count is just going to be however many users we have and finally in the item Builder let's get the individual user so we're going through the index of users and let's just return it using a basic list tile and whoops this should be inside of a text widget okay so let's save that and let's create a new new user here so let's create like Bill Gates or something you can see if you go to the profile then yeah we can see our information Bill Gates and then if you go to the users page we can see all of the users that are signed in so we got Ronaldo and Bill Gates awesome now let's spend the the next few moments to just decorate this up so the profile page I actually don't want an appar so if I come down to my column you got the username you got the email and at the top let's have a kind of Perle picture section so I'm going to use a person icon and just use some decoration with a curved border yeah something like this and let's also style up the username make it much bigger and much Bolder and space this out a little bit and decorate up the email as well cool that's looking pretty good now I want to have a kind of custom back button so I'm going to create my own one in the components now let's create I'm going to create my own back button here so I'm going to have a gesture detector and when you tap on this back button which is going to pop the current page and for the container I'm going to have a arrow a back arrow and let's give it some padding and decoration I want this to be a circle sweet something like that oh now I actually want on the left hand side so a little trick here is you can put this inside of a row and that'll push it to the left and let's just use some padding just to position it where we want cool and let's just make sure dark mode yep dark mode is looking good as well sweet now let's go to our users page and decorate this up so again copy in that back button okay let's delete the appar so now let's come back to our homepage and for this appar title I'm just going to call it the wall and we can make the background color transparent make the foreground color the inverse primary and let's start filling out the body of this column so now we want to try to post a message so the very top thing at the column I'm going to have a text field to have a box for the user to type good thing we created a our own text field in our components from before because we can now use it again right so we can say like say something and we need a controller so let's come to the top and create a controller cool now if I save it there there it is now I'm going to need some padding on either side or maybe just all the way around I want 25 okay so now when it comes to posting messages and and retrieving those messages from Firebase I'm going to create a new folder called database and let's create a new file called f store dot dot so I'm just going to separate out the logic from the UI as much as I can so I'm going to create a class here called fire called fire store database and just to have a bit of expl explanation at the top this database stores posts that users have published in the app it is stored in a collection called posts in Firebase and each post is going to contain a message the email of the user and also the Tim stamp so let's have a bit of a plan here we firstly need to the current logged in user and we want to be able to get the collection of posts from Firebase and a few methods here we want to be able to post a message and also read posts from Firebase so let's just start off with getting the current loged in user and then for the collection of posts we can go to the Firebase fire store instance collection posts now this is the main important methods here so for posting a message it's going to be a future let's call it add post and all I need to know is what's the message that I'm going to post so we have that collection of posts and let's just add in another post and remember each post is going to have three bits of information just the user that posted it the message and also the Tim stamp sweet so now let's imagine that we have a bunch of posts in our database now we want to be able to read that information and display it back into our app so for this one it's going to be a stream to continuously listen for any changes so we want to get the posts and let's just order them by Tim stamp descending is true so in other words the latest post will be at the top and then we can just return the this stream awesome now I'm just going to quickly create a custom button to post when the user types a message in so just starting off with the gesture detector we need the ontap and I'm just going to create a very simple minimal button so if I come back to my homepage next to my text field I need to put this in a row and by the way when you do this you have to expand the text field because we have to fill the remaining space and then next to it we want to put a post button that we just created sweet and there it is now it looks like I'm going to need to add some padding to this and just some margin on the left hand side and let's just refine the colors here oh looking good sweet so if I hit this button on the ontap we want to have a method to post a message right now one little useful check here is to only post a message if there is something in the text field right we don't want to be sending blank posts so if the controller is not empty then let's try to add it to the fire store so we want to access those fire store methods that we created in this class so in our homepage at the top let's get access to that fir store I'm actually going to call it database instead of fir store and now we can just say database. add poost and we can give it the message which is going to be whatever is in the controller sweet and then a very good idea is to clear the controller so after after the user posts a message we want to we want to have nothing in the controller anymore now oh looks like I forgot to actually give the method to my button so if I say first post and then I click post and if I come back to my console and I refresh it you can see there's our collection of posts and there's our first one there looks good so now that we can post a message and it's in Firebase let's try to read it back into our app so again that's going to be using a stream Builder and we are going to listen for the stream that we created for the get post stream and this is going to be the last time that we need to do this so let's show our loading Circle first let's get all posts and if there's no data and then finally we can return the list right so we're going to go through however many posts we have we're going to get the individual post and then get the data from each of those posts which is the message the user email and the Tim stamp and then in terms of the UI we can return it using a very simple list tile cool so that's the functionality is all done then everything else is just decorating right like the styling of these texts and the different UI elements for us to make it look aesthetic right so you can add some padding and so even this list tile because as we decorate it it's getting bigger and bigger I probably want to reuse this list tile so I'm going to create a new component called my list tile and just start decorating it inside here so for this list tile is going to be we have to give it a title and a subtitle and yep that's making our code look much cleaner and even in our users right we have these list tiles so we can come back to that users page page and instead of just displaying a basic list tile let's give it the one we just created and then if you want to further customize this then you can just do that in the list tile component right like maybe giving it some color and some border radius yeah you can do whatever you want but we have just created the minimal social app right and again let's just check the dark mode just to make sure it's looking pretty good and yep looking sleek and that's it that's how you create a very minimal social app using fire base and flut

Channel: Mitch Koko

Views: 35,836

Keywords: flutter, mobile app development, mobile app, flutter ui, dart programming, ios, android, authentication, firebase

Id: 0RWLaJxW7Oc

Length: 65min 58sec (3958 seconds)

Published: Sun Apr 14 2024