🥷🏽📱 Minimal Social Media App • Flutter x Firebase Tutorial

yo what up welcome back to another quick flut tutorial 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 flutter project and I'm 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 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 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 doart file in our material app you can specify the theme to be light mode and then we can also spe spe ify 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 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 we 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 signin 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 tole 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 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 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 a 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 axis align 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 onab 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 login and then ontap 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 with 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 cuz 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 Tex 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 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 but go to the main. file in the home let's return the register page cool and 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 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 or 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 pages method and same 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 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 the Firebase core package and we want to add in the Firebase o package as well sweet 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 awesome 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 and 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 confirm password to match and once that's all done then let's try creating the user so just starting 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 list widget to a state full widget and you can do that by hovering your mouse over for 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 confirm 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 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 let's 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 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 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 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 crat 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 passwords 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 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 Lo 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. Dot 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 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 it looks like we are in the homepage but our appb 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 Firebase 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 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 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 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 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 drawer 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. 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 up 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 of 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 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's 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 firestore 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 gra 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 logged in 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 is going to be however many users we have and finally in the it 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 user here so let's create like Bill Gates or something you can see if you go to the profile then yep 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 so the profile page I actually don't want an app bar so if I come down to my column you got the usern name you got the email and at the top let's have a kind of profile picture section so I'm going to use a person icon and just use some decoration with a C 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 ajed 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 error a back error and let's give it some padding and decoration I want this to be a circle sweet something like that ohol 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 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 do 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 five called fire store database and just to have a bit of exp 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 know 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 logged in user and then for the collection of posts we can go to the Firebase fir 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 time 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 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 to 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 fir store so we want to access those fir store methods that we created in this class so in our homepage at the top let's get access to that fire store I'm actually going to call it database instead of fir store and now we can just say database. adpost 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 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 timestamp 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 and 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 is 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 it's 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 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 doc mode just to make sure it's looking pretty good and yep looking sleek and and that's it that's how you create a very minimal social app using Firebase and flutter I want to continue building on top of this maybe adding some extra functionality like comments and likes and if you have any other suggestions on what you want to see me build next let me know in the comments I hope you learned something and let me know if you have any trouble I'll try to help you out but thanks for watching and I'll catch you guys in the next one peace [Music]

Channel: Mitch Koko

Views: 40,568

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

Id: zohXXZBUVYI

Length: 50min 32sec (3032 seconds)

Published: Thu Oct 12 2023