[Music] hey what's up welcome back to another quick flut tutorial in this one I'm going to show you how to c up a minimal chat application so I'll teach you how to do the authentication the chatting functionalities and also have a light mode and dark mode for the design aesthetic now just before we start coding I'm just going to show you a quick overview of what we're about to create so the first thing is the user is going to go to the login page and if they don't have an account then you can go to the register page to create one and then so once we have an account we can go to our homepage and we can access the settings and also the main thing is the chat page where we can chat to different users so this is what we're going to do on a very basic level now just to add a little bit more detail at the very very beginning we're going to need to have a little check to see if the user is currently logged in or not so so if they're not logged in then obviously let's just go to the login page but if they are logged in then let's go straight to the homepage so if you think about like an app like Instagram then you're not going to log in every single time right it should remember the fact that you were logged in before and similarly if we go to the settings page we should be able to log out and bring us back to the beginning and on this setting page we'll also have a toggle for the light mode and dark mode and then finally in terms of storing the data we're going to use fir store and we're going to collect two bits of information so firstly we're just going to collect the users so let's say like user one 2 and three and we're also going to collect the data for the chat rooms so in example of a chat room is going to be the one between user one and two and then that's going to have its own set of messages and then between user 1 and three and then between user 2 and three so we're going to have a bunch of chat rooms and so this is how we're going to store the data so I've opened up a brand new flatter project and just to keep everyone on the same page in my main function I'm running my app which brings us to this login page and I've got all the pages in a separate folder just to keep our code nice and organized and this login page should just be a blank scaffold so you should just have a white blank app like this now the first thing I'm going to do before we Cod up the UI is to create another folder called themes so that we can set this up nicely for light mode and dark mode so let's just start off with light mode and you can play around with these colors but you can also just copy the ones that I've chosen so the one I like to specify are the background primary secondary tertiary and also inverse primary so the these are just different Shades of Gray that you can use so what you can do is in the background color of the scaffold we can say theme do of context go to the color scheme and then you can see all of those options so if you come to our main. file in the material app you can give it your light mode and we should have a kind of light gray background cool now in the body let's have a big column and let's start building out this UI for the login screen so I'm just going to start off with a big logo at the top have it a bit of a welcome back message and then we need a couple of text fields for the email and password then we also need a login button and a little register now toggle to go to the register page if the user already has an account now for the logo you can put in any image or icon that you want but for now I'm just going to put in a message icon just to keep it simple and looks like it's scrunched up in the corner so I'm just going to main access alignment to the center and also just Center this column and I feel like we could make this a bit bigger and so for the color of this icon right now it's just black now I'm going to use the primary color so I want to make it a little bit grayer and then let's have a message saying welcome back you've been missed looks like we could use a bit of space here and I'm just going to style up the color and maybe make it a bit bigger and then let's have another bit of space and then we want to have a text field so if you just type text field and save it you should be able to see this little line where you can type a message in now we're going to probably use a text field multiple times in this project so I'm going to create a separate folder called components and this is where I like to have those widgets I like to reuse so I'm going to create a new file called my text field and we're going to decorate this up so I want to have a outline input border and we can also have a focus border which is when the user clicks into it so just so that I can demonstrate what I'm doing let's come back to our login page and start typing my text field and you can see it says their Auto Import just hit enter and there it is you can see that little background there so you got the focus border and the enabled border so if you click into it it should light up a little bit cool now I think it's two stuck to the edges so let's put some padding on the horizontal and also let's put in a fill color and say fi is true then you can see it's got a color inside and the other useful thing is hint text so what hint text does is it's just a string so you could say like type something dot dot now the first one I'm going to need it as a email and the second one I need it as a password so what I'm going to do is just change this to a beer variable so at the top I'm going to accept a string called hint text and require it and so if you come back to my text field you can see it's got a red squigle now because we have to specify that hint text so for the first one we can just say email we can copy this and say password for the second one now it looks like we should probably have some space in between and the hint text usually kind of as the name implies it should be a hint so I'm going to make this much lighter right and again you can change any of these colors in the light mode file and let's just keep going so you can start typing our email and the password now you can see for the password we don't want to show the password right we want to obscure it so this obscure text is a Boolean meaning it's just a true or false so it's false by default but if I say true you can see it's going to obscure the text like that which is what we want for the password so we're going to also accept this Boolean at the top and if we come back to our text fields in our login page we have to specify it so obviously for the email we want to make it false and for the password we want to make it true we do want to obscure it like like that cool now the last thing is we want to access what the user typed in the text field right so to do that we need to give it a controller so let's just require that as well and we're going to need to create these text controllers at the top so let's call it email controller and also password controller and let's continue this on so let's just have another bit of space and we're going to have a login button now same thing for this we're probably going to need to use this button in other areas of the app so in the components folder I'm going to create a new file called my button and let's just start decorating this up so in the middle in the center I want to just have a text widget saying button for now and let's decorate up the colors and I just want to see what this looks like as I build it so in the login page let's say my button and there it is Auto Import so hit enter and that's what it look like currently so I think the first thing is I need some padding in the inside and we need some margin to get it off of the edges in the horizontal Direction and of course the corners you know I don't like sharp Corners so let's curve these border radius and the other thing is the button I want it to say something else so let's accept this as a string at the top so if I come back to my login page when I create this button I can just give it a text let's say login for our one cool now this button needs to be taable obviously so let's wrap this in adjusted detector and you can see we can require this function at the top as well for the ontap so if I tap on this login button we want to log in so let's just create that method real quick at the top and then we can fill this out later when we do the authentication and then finally after a little bit more space we want to say some text saying not a member then register now so if the user already has an account sorry if the user doesn't have an account then we want to send them to the register page right so what I want actually is I want the Reg now to be a clickable text so I'm just going to separate this out into two text widges in a row then let's Senter this and for the register now just to show the user it's actually clickable let's make this bold and then we can use this to go to the register page later sweet now that we've made our login page let's also create a register page and this one's going to be very similar to our login page so I'm just going to grab the scaffold here and let's just copy and paste this in and let's import the necessary components and the controllers as well let's grab those so if you go to these login buttons let's change this to register and just to see the changes let's go to our main. do file and just return the register page right away cool now we're going to need to change some of these messages so let's say let's create an account for you and we need one more controller for the register page cuz I want to have a confirmed password text field okay so we got the email we got the password but let's grab one of these and create one more for the confirm password and at the very bottom instead of saying not a member we can say already have an account then let's log in now cool so we've made our register page and also our login page UI now if you look at the main. file we are showing one or the other right so what I'm going to do is I'm going to create another file called login or register and let's put this in a separate folder called or so all of the authentication related stuff let's put it in this folder so what this login or register file is going to do is we're going to initially show the login page and we also want to have a toggle to switch between the two pages okay so we can say in the build method if we are showing the login page then just return the login page else return the register page okay so if I come back to my main. file let's just import what we created and so by default it's going to show the login page first now I want to go to the register page when I click on this register Now text so let's come to that text widget and we're going to wrap it in a gesture detector so that we can tap on it and it's going to require this function so let's just grab this and create it at the top same thing for the register page and so what we just did is if if I come back to the red squiggle here for a login page it's going to require us to specify the ontap so if we tap on it then we can toggle Pages Sweet let's see if this works so you can click on register now and then it goes to the register page you click on login now and it goes to the login page and we can go back and forth now let's come to our Firebase console and let's create a new project I'm just going to call it chat app cheat like chat app tutorial and once you've created that let's go to the authentication and click get started and you can see here the email and password that's the one so so enable it and let's just create a test user so test gmail.com and just give it a password and so in the project overview you can see it says get started by adding Firebase to your app so what we're going to do is we're going to come back to our code and in the terminal if you haven't already done so then you need to type in this command to install the Firebase tools but I've already done that so make sure you've done this as well so that we can now say Firebase login so make sure that it's logged in to the same email as your console and then we can say flutter Pub Global activate flut fire CLI and on Mac I always get this issue just copy this in and then we can say flutter fire configure and so what this will do is it will show you all of your Firebase projects so just go to the one that you just created chat up Sho and hit yes and if you come back to our console and you just refresh the page hopefully you've added the to Android and iOS you can see it's connected there sweet and looks like we have a red squiggle and oh yeah we also have to now add the package so flutter pup add we want to add Firebase core cool and while we're here we also want to add Firebase or so that we can now do the authentication and just a last little setting up we need to do in the main file is this widgets flut binding and short initialized and change this to an asynchronous function so that we can await Firebase initialize app for the current platform so once you've done all that just kill the app and restart it and if your app opens like normal then your app is connected to Firebase sweet now let's figure out the Authentication so in the OR folder let's create another file called or service. and in here we're going to have all of the functionality so we first are going to just get the instance of the or we're going to sign in sign up and also sign out and maybe deal with any errors if there are so what we can do is say Firebase do instance and let's start off with our signin method so this is going to be a future and I'm going to call this sign in with email and password and all we need is an email and a password string so when we call this method we're going to try to sign in with email and password and if there's any exceptions any errors then we're going to catch it and throw the error now just before we build this any further let's see if this signin method works so in our login page we have this login method here right so that's when we click on the login button what we want to do is we want to firstly get our or service and let's try the login and catch any errors so on this page we want to deal with any of the UI related stuff so we're going to try to sign in and we need to get the text from each of the email and password controllers and if we have any errors then let's show a dialogue box which means we're going to need to know what the current context is and so we're just going to show a little box just saying what the error is cool so that should be working fine now one more thing we need is I need another file called or gate and so what this orgate does is we're going to use a stream Builder and and the stream is just going to listen to any or state changes and so what this means is it's just going to check if the user is logged 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 we're going to just return either the login or register page so let's just quickly create that homepage and so if you go to the very beginning of the main. file currently returning the login or register page but I'm just going to now return the orgate okay so the orgate what it's going to do is it's going to check to see if we're logged in or not to then see what the appropriate page is that we need to display cool so now our login should work so let's try our test account so we said test gmail.com and the part password then we can now go to our homepage which means now we should have a way to log out right so in the app bar in the actions we can have a little logout button so when we execute this logout function then we need an ability to sign out so let's come back to our or service and create this sign out method and this one's really easy just go to your o and go sign out cool so let's come back to our UI so here we need to get our or service and then just sign out cool so if I just try this out if I click click the sign out button on the top bar on the top app bar then it'll just sign us out automatically and again just to remind you that's what this or gate is doing it's constantly listening to the or state changes whether we're signed in or not cool so if I just show you here we can now we need to go to the register page and have an ability to sign up so sign up with email and password I just need to know the email and password so firstly let's try signing up so I think it's create user yep with email and password and just catch any errors sweet so let's go to our register the page and in the register method UI we need to get out all service first of all and just sign up let's give it our email controller text and our password controller text now one thing just to help our code out a bit is I want to only do this when our password and the confirmed password is the same so if the password and the confirmed password match then let's try to sign up and also catch any errors let's actually get the login page show dialogue this guy and paste it here we're going to need to know the context so let's give that as a parameter and so I'm just going to put a bit of comments here so if the pass passwords match then let's create user and if the passwords don't match then we're going to show an error telling the user to fix okay let's try this so if I try to create a user then yay we can go straight to the homepage and if I come back to my console if you go to your authentication you can see there's our account we just created awesome and also just to see if our code is working if the passwords don't match like this then it says passwords don't match cool so now that we're on our homepage I want to have a bit of a menu drawer so if you just type drawer and you save it you can see that little menu icon on the top left and you can click this to open up the drawer and I just want to keep my code nice and clean so I'm going to separate this out into an individual component give it a background color and we're going to have a big column so at the top I want a bit of a logo and then a home list tile a settings list tile and at the very bottom we want a logout tile so just to see our progress as we code this up in our homepage let's type my drawer oh it's not there why oh it's called My widget let's change this to my drawer and let's start off with our logo so at the top is a good idea to put a drawer header so that we can put an icon or an image and then beneath that we can have some list tiles so the first one is just going to be a home let's give it a home icon and I think we could use some padding on the left yeah let's copy this and create one for the settings and also for the logout now just for the logout one I want that one to be on the very bottom of the screen so what you can do is everything above it let's wrap that in another column right which means this overall column we can say space between and then it pushes everything to either side and then let's come to our logout tile and I feel like we could give it a bottom padding as well sweet that's looking good so let's start filling out the functionality of this so on the ontap if I tap on this home I just want to go back to the current screen so all I'm going to do is just pop the drawer so we can say navigator dop and this will just get rid of the drawer now for the settings tile I want to pop the drawer of course but then I also want to navigate to the settings page now this settings page we haven't created yet so let's just do that real quick there we go you can see it works we can go to our settings page and lastly the log out so we had it in our app barx before but let's get rid of this and get rid of the log out and let's put it in our drawer okay so if I click on this log out tile we just want to log out so let's see if this works and that's looking pretty good so now that we got the authentication done it's time for the fire store so for kind of like our chatting functionality and the users and stuff like that so if you go to the fir store database let's create database you can select your region but I'm just going to leave it at United States and what we need to do here is in the rules you can set up your custom rules but just for us to be able to write information I'm just going to change this to be true and just publish it cool so if I come back to my code what I'm going to do is I am going to create a new folder called services and our or service we're going to put into this folder and we're going to create another folder for chat services so or and chat those are our two main Services okay so let's save and close all these files and just go to the chat service and so in this class what we're going to do is firstly we need to import that package so go to your terminal and type flutter pub at cloud firestore and then once we got that we are going to get a method to get the user stream to get all the users and displayed on the screen we need a method to send a message and also to get messages so let's just start off with the getting an instance of the fir store and let's start filling out the user stream now if you look at this and it's kind of confusing there's a lot of things going on I can try to explain it nicely for you so in this stream you see inside here the list that is a map that is a string Dynamic so what that means is for l a map what that is is it's kind of like a field like this and your Firebase console looks like a map so it's got email and what is the email for the user it's test gmail.com and maybe they also have another property like an ID and it's some number so this is an example of a map it's kind of a way to represent like a user in this case so we can have another map or another user right and so when you have a list of these this is what this is talking about a list of maps Okay and we're going to return the stream stream meaning we're just going to listen to our firestore so we're going to return the fir store collection so it's in a collection called users and let's go to the snapshots and we're going to map this and I'll put the comments here just to try to make it as clear as possible we're going to go through each individual user and just return that user and at the end of all of these Maps we're going to return it to a list okay so what did we just do if you come to our homepage what we're going to try to do is try to display all the users so firstly I'm just going to get the chat and or services and for the body I'm going to build the user list so I'm going to separate this widget out just to keep our code clean and we're going to return a stream Builder now for the stream we created this just then so go to your chat service and we can say get users stream and then for the Builder what we're going to do is firstly just see if there's any errors it might be loading so if that's the case just return loading and then finally when everything's done let's return the list view so for the children we're going to look at the snapshot data and go through the map and we're going to create each individual user list item okay so even this I'm going to just separate it out just to keep it nice and modular so for building an individual user list item I just need to know the user data which is that map that we talked about and so let's put some comments here so display all users except current user okay and then we're going to return a user tile so a user tile is going to be another UI component so let's just create that real quick and what we need for this user tile is I just need to know the text and also the tab so let's create our gesture detector and just kind of like a container with some decoration and the main element for this is a row of an icon and the username okay so let's come back to our homepage we're going to see the red squiggle because we need to fill out the text right so I'm just going to display the user's email and then on tap currently we are on the user page currently we're on the homepage so if we tap on a specific user let's go to the chat page and chat with that user now this chat page we haven't created yet so let's just create that very quickly here and require the receiver's email just to know who we're chatting to so let's come back to the homepage import the chat page we just created and just give it the users email cool everything's ready so if I just come back to our red squiggle here build user list item we have to give it the two parameters which is the user data and just the current context and I think that's all good so currently even though we have some users it's not displaying the users right so what the issue is is when we create a user if you go to our sign up method once we create the user let's also save this user's information in a separate document okay so let's get an instance of our fire store at the top and go to that fire storees collection of users and then we're going to go to the specific document for that user and we're going to create a little map here so let's save some information like the user ID and also their email and it should be a good idea to put this in the sign in method as well because sometimes we might make an account for a user in the back end and not through the app so just to make sure we have all the users just save the users if it doesn't already exist and so let's create a user here flut gmail.com and if I register you can see yay we have our first user in the app let's create Ronaldo and there's Ronaldo cool so we can Now display all the users now one thing you don't want to display is you don't want to display yourself like if you see a page of users and you want to chat to them we shouldn't be able to chat to ourselves so we just want to display everyone else so let's just grab this and we're going to put a quick if statement and just do a quick check so is the email not equal to the current user so what I'm going to do is I'm going to go to my or service and let's just create a quick method here just to get the current user and so we can just use that anywhere in our code just to get the current logged in user so we're going to compare that to the US uses email and as long as it's not the same we're going to display it and looks like it's still displaying myself and oops that's because I got my current user but I should get the email and compare the emails I'm going to add some margin and let's add some padding and I feel like we could add some space between the icon and the username and you can see if I click on any of these users I can go to a new chat page to talk to that user which is pretty cool sweet so now that we're on the chat page we need to be able to finally send a message and also get the messages so when we send a message we just need to know the receiver and what the message is the sender we don't need to know because that's the current logged in user which we can access anytime so firstly get the current users info and then we're going to create a new message and then we're going to construct a chat room ID for these two users and we have to and we have to make sure that this chat room ID is sorted to ensure uniqueness which I'll explain a bit later on and then we're going to add this message to the database cool so let's come to the top and just also get the or as well so that I can get the current user so let's have the current user's ID and the current user email now it's a good idea to save the the timestamp right so we'll just say now which is when the user sends a message we're going to collect that information and we're going to create a new message now for this I'm going to create a new folder called models and let's have a message. do file and this is what an individual message should look like we need to know the messages sender right so their ID and the email we need to know who's going to receive it what the message is and also the timestamp of this message and with this information let's have a quick method to converted to a map sweet so in our chat service when we send a message let's create a new message so let's create a new message so for the sender ID the person who's sending it is just the current user so let's just give it those details now we need to construct a chat room ID to store all of these messages okay so what we're going to do is we're going to have a list of strings and we're just going to have two strings in this ID which is the current user ID and the receiver's ID and then we're going to sort them and what this does is it just makes sure that any two people have the same ID okay then what we can do is just join the strings together let's join them with an underscore and then finally just add this to the collection in fir store and I'll show you what this looks like in the console in fir store a bit later on now for getting the messages it's quite similar as well we're going to need the user ID and the other user ID so just both people and we're going to similarly construct a chat room ID for the two users and then we're going to return the collection for the chat rooms and we're just going to go to that specific chat room cool and that's pretty much it okay sweet so let's see if this works now if I go to a chat room the first thing I'll need is actually a input box so that the user can type a message in right so let's create a text controller and let's get our chat and orth services and let's just create a quick method here for sending a message anything UI related now just to help the code out a bit we're only going to send a message if there's something in there to send right otherwise it's going to send blank messages so as long as the message controller is not empty then we can send a message and actually we also want to know the receive his ID so let's just require that at the top cool and then the message give it the message controllers text Sweet and then after we send it we should clear the controller okay sweet now let's start working on the UI so in the body we're going to have a big column and we're going to have two things so the majority of the screen is going to be just displaying all the messages and at the bottom we want to display the user's input so we're going to use an expanded widget for the message list to fill out most of the screen and let's start by getting the senders ID which is just the current users ID and we're going to return a stream Builder now what stream are we going to listen to well we already created that get messages stream and just give it the two different people and we're going to build a list view so let's just check for any errors and see if it's loading and then finally just return and the list view let's build out a individual message item given a document and we're just going to return the message sweet everything's set up so finally let's just create our user input so for this one we we're going to have a row now we already created our text field at the beginning of the video right so we're going to put that in an expanded widget cuz it should just take up most of the space and then just next to it we want to have a send button to send the message and let's give that to our UI awesome now I'm just going to kill the app and just rebuild all this and you can see there's our little user input at the bottom so let's try this out I'm going to say hello and hit the send button and you can see that the messages are getting displayed so if you come back to our Bas console you can see if you just refresh the page you can see this is what it looks like so we have a collection of users and we also have a collection for the chat rooms and each chat room has its own ID which is unique between two people and so you can go to the messages and you can look at each individual message okay awesome now one thing we have to fix is if I sign in under someone else else like messy and I type it it's just all coming on the same side right so let's work with a bit of alignment to show the messages on the right if it's for the current user and then we want to have all the other person's messages on the left hand side right so let's have a quick bully in here just to check if this is the current user so this right here will'll check if the user of this message is the current user that's signed in and then using that we can say we can specify an Al an an alignment so is current user question mark if it is then align to the center right if it isn't aligned to the center left let's wrap this text in a container and give it the alignment looks like look like it's still not working maybe we could give it into a column and then use the cross access alignment oh I know why what happened if I if we come back to this new message we mixed this up the send out ID we should give the current user ID and the email to the email well that's why okay let's save that and now if I say this is messy it comes to the right side okay sweet so let's just double check this I'm going to sign into Ronaldo and let's talk to flutter and then the messages comes on the right hand side and I'm just going to log out let's sign in as flutter and go to Ronaldo and yep it's it's on the correct side now so the current user that types a message is always going to be on the right hand side sweet now the functionality is pretty much done I just want to finish off by decorating this up a little bit more like the user input at the bottom it's too close so let's put a padding and the icon button I'm just going to make it kind of green on the outside make it a circle and the aror can be white and also let's create a chat bubble to make it look more like a chat application so for any chat bubble I just need to know the message and also if it's the current user right so the color is just going to depend on if it's the current user or not and let's try this out so let's come back to our build message item and return a chat bubble and you can see there it is that's what it looks like let's make it look much better so let's add some padding let's add some margin and the text color can be white and let's make the corners not sharp more curved and so you can just play around with this and adjust it to however you like but that's looking pretty good so far and also you know these app bars I like to just make them like in the homepage I like to just make it transparent and make the elevation zero and instead change the foreground color so that I can see that I think that looks a little bit more cleaner and more minimal so I'm going to do this same thing for the chat page that looks better and also the settings page clean up the app bars and let's give it the background colors if you haven't and just to finish off the last thing I'm going to do is to implement dark mode into this application so we've been doing everything in light mode so I'm going to create another file here for the dark mode and so again you can choose your own colors but I'm just going to use these colors and these Shades of Gray and for us to switch easily between the two themes we need a theme provider and so we're going to start off at as light mode and let's have a geta method to get what the current theme is let's also have a Boolean to see if this is dark mode or not so this is really helpful later on which I'll show you this little double double equal sign is just going to check if it's dark mode and then we need to have a set theme data and most importantly we need a toggle theme so if the theme is light mode then change it to dark mode and vice versa cool so if I come back to my main file we need to give it the change Notifier provider which I actually didn't even import so let's just import that real quick flutter Pub add provider and so you can say change Notifier a provider and give it the theme provider and then give it our app and then if you come back to our material app at the bottom you can see the theme currently we just gave it light mode but it could be light mode or dark mode right so we're just going to use our provider to get the theme data so this could switch between light mode and dark mode sweet so now we actually need a switch like a physical UI switch so in the settings page I'm going to create a row and have a little toggle here so I'm going to use a Cupertino switch which is the Apple looking one just cuz I think it looks better and you can see for the value if I say false it's off if I say true it's on and so let's just decorate this up real quick let's space between give it a container with some decoration that's looking pretty good and so now for the value it's going to be a Boolean like a true or false so let's access our theme provider and just check if this is dark mode or not and then on the changed if the user Taps on this switch we want to go to that theme provider and then toggle the theme sweet so let's save this and check this out yay we can flick the switch and now we're in dark mode everything's in dark mode and then if we need to make any specific changes to the colors then you can go to this dark mode and then change it up and what's even cool about this is you can actually click on this and then get the specific color that you want so I feel like this secondary color could be a bit darker like my tiles are looking pretty light and so if I just save this yeah that's looking pretty good and I think the chat bubbles could also use a bit of dark mode adjustment so let's just see if we're in dark mode right then let's adjust these colors and also change the text colors appropriately to if it's dark mode or not so just change this up to your appropriate style and let me know if you have any questions about any of this I can help you out in the comments below everything is working in terms of this chat app and it's looking pretty good sweet now one last thing that we need to fix is if I go into a chat and I send a lot of messages then it's going to need to scroll down to the bottom right and especially when we toggle the software keyboard it should automatically scroll to the bottom so what we need to do is if I come to my chat page I'm going to firstly convert this to a state full widget and then we need a focus node so when I initialize the state we're going to add a listener to this Focus node and so this is just helpful for the text field if we're in Focus or not so if we are in Focus then what we're going to do is we're going to wait for the keyboard to show up and then that will allow us to calculate the remaining space on the screen and then we're going to scroll down Okay so we're not going to scroll down immediately we're going to just just wait a little bit of time 500 milliseconds so that the keyboard shows up and then we'll scroll down and we should also dispose of these focus neres and controllers and we need a scroll controller so for the scroll down method if we just get the scroll controller and we can animate to the very bottom we can control this duration I'm just going to say let's say 1 second and you can specify the type of curve like the kind of Animation so I'm just going to choose this fast out slow in and then if you scroll down if you go to the list view let's give the controller our scroll controller and then also if you go to the text field we're going to give it our Focus node so let's go to our text field component and let's actually require this so now in our text field we can give it a focus node and so what this is doing is if you go to one of the chats if I click on the text field it'll be in focus and so the keyboard will show up right and then once the keyboard shows up we're going to scroll down as you can see now the other thing is when we go into the list we should scroll down automatically right so let's also do that if you go to the initial state so when this page fires up let's also do a similar thing so we're just going to wait for the list view to be built and then let's scroll to the bottom and I think the last case is when we send a message so when I send a message we also want to just scroll down to the bottom so that we can see the latest message okay let's test this out firstly if I go in it just Scrolls automatically I open the keyboard it goes automatically and if I type a new message it scroll down automatically as well and that's it that's how you create a minimal chat app using flut and Firebase just comment below if you have any problems or need help on anything I'll try to come around and help you out but I hope you learned something you can downlo the code to this below if you're interested but thanks for watching and I'll catch you guys in the next one [Music] peace