FlutterFire - Basic Group Chat App

in this lecture we are going to see how we can implement this very simple chat application this is a group chat application and it's a very bare-boned basic app just for the beginners to understand how firebase and cloud firestore works the streams the builders and firebase auth with email and password so we have our uh picture here for different people the message and their username and there's a group chat so everyone who has the app will see their chat here now if we log out we have a bottom navigation bar and we can switch from our signup screen to login screen and back in the sign up screen we can have a picture and everything and then after we sign up we can log out and then we can log in again so with that being said this was overview of the app that we will be building let me see you right in see ya hey oh so i just made a blank project here flutter fire basic chat app that's what i have named my app you can go ahead and make your app give your app any name that you want and in pop spec ammo these are the five packages that we need so image picker firebase core firebase auth firebase storage and cloud firestore as of the latest update of firebase you must have firebase code in order to use any other firebase products so with that all added we can go to main.dart and firstly we have to change the main function so void becomes future and hence it becomes the whole function becomes an async function and then we add widget plotter binding dot ensure initialized and then we add firebase dot initialize app so with that now we can go ahead to firebase and i do have a project made up already if you do not have one go to add project give your project a name whatever then press continue and you cannot you can have google analytics either on or off it depends on you we will need this for this project so go ahead and press continue with that being on or off it's up to you and i will go into my project after after you have created a project after you are done provisioning your project you will be brought to this screen something like this and then you can go to authentication first of all and here you will see a button that says get started press that then you come to firestore database and then again you will see a button that says get started press that and then you will be prompted to select from either of two options first one being production mode and the second one being locked mode or test mode go ahead and click the test mod and yeah that is it so we will just go to project overview and i'll open my vs code now what we will do is i'm sorry we want to add app so we are just going to focus on the android part of this application because i do not have a mac os with me so i wouldn't be showing you ios things but i will show you a few things here and there that might be useful for you if you are following along alright that being said let us go to android firstly we need to add the android package name so we can get it from android app build.gradle here this is our package name so ctrl c ctrl and first of all since we are here we can edit this app level build.gradle first so i'll copy this line and i'll go to here and i'll paste it just after apply plugin here all right then we can add this one in the implementation place also we need to do something since i cannot go to android website i'll just come to my evernote here and we have to add this i'll show you what it is sorry here yeah go ahead and add this line implementation single quote com dot android support multitex 103. and here we have to come down and write multi decks enabled space true and this min sdk needs to be changed from 16 to 21 with all of that we can control save it we are done with the app level build.gradle now we need to go to the project level build.gradle here so under android folder directly no need to go to app or something under android pro builder gradle so this is our project level builder gradle make sure you have google and google here we can copy this line here class map and we can save it here so with all of those we are done here actually don't have to do anything else we can next continue to console and we should be good now since we are going to use the image picker uh what is it the package we have to do a few configuration here and there and i'll show you now so firstly go to oh my bad my bad sorry we have to come here and we also have to download the googleservice.json we really need that other without that we won't be able to connect with the firebase so we can come to here open our explorer go to downloads and take this and put it in so android app you put this with that we are done now we can go to android app source main and then android manifest here we have to add a few lines in order for the image speaker to work properly so i'll go down down down down yes so firstly we need to add this to line ctrl c add it after the package here so enter ctrl v so these two lines go ahead and add it and after that after this uh application we have to add this one ctrl c ctrl v all right we are done go ahead and copy these lines all right all right so we control save it we cross it we don't need the android anymore and now for two if you're going to use an iphone a real iphone you can add these lines so ctrl c i'll show you what those lines are you can first of all i'll paste it here so that you can see it largely and then you can copy it so call ctrl v here go ahead and pause the video and copy all of this all right with that being done i'll remove it we will go to ios runner and then info.plist after any string here string string whatever after any string you press enter and then you paste it here all right all right so control save it um i'll remove this so all the things that i have just shown you so if you're doing that for the android part you you have to do this if you are at api level 29 or above if you are under api level 29 you don't have to do anything and for ios you have to do it regardless with all of that being said let us get started with the app so firstly i will just run this app in the ios and if we are successfully connected to firebase we will have the app other than that we won't be having it and i'll be fast forwarding to the time when the app finally boot all right so here we are sounds good i'll remove this and let us first add some screens here so i'll make a screen folder and under the screens folder i'll have four screens so firstly on screen.dart sign up screen dot dart login screen dot dart and lastly but not the list chat screen dot dart now let us go to the all screen first uh what i want to do is i want the auth screen to have a bottom navigation bar from where we can switch to either sign up or log in so auth needs to first of all import the material dart and it needs to be a stateful widget on screen don't need this line let us return a scaffold here now in the scaffold what we need to do i'll come to it later first of all let us go to the sign up screen and i'll import material a stateful widget sign up screen scaffold and let us go to the login screen import material stateful login screen all right and lastly let us go to the chat screen and here i'll import again material dart we always need this and i'll make it a stateless widget for now chat screen all right now if we go to the alt screen and firstly if we go to the main.dart and i remove this class this class so the entire homepage class i remove this and here i bring the odd screen all right so here we have the old screen and i'll also get rid of this debug banner so debug show check mode banner false all right in old screen first of all let us go to the scaffold and here i'll have a bottom navigation bar bottom navigation oh my bad bar i'll leave it empty for now now we can go to the state class here and first of all i'll make a late list pages so i made a variable that is named pages and this variable is going to hold a list and and then i need a init state where i'm going to initialize those values to the list so here i'll come and say pages now equals to a list and within the list i want to have key value pairs so map and the key should be a page and the value of the key should be sign up screen why did we name it as sign up and not sign up screen i don't like it but let's leave it and then i'll copy this again this map control c and then i'll paste it here and this can be login all right and to determine the index that we will be in i'll make a variable which will be an integer page index equals to zero for now and then i need a function that can change the index of void change page it takes a argument of int index and it's going to just do a set state of page index now equals to index that's what it's going to do so this is the logic for changing and having all the pages and everything now we can come to a scaffold and first of all let us write body and here we will set pages there the page index and it should be the page key and then in the bottom navigation bar we can start adding things so first of all i'll set the current index to be page index that we have we have as a counter and then we need on tab that is going to change the index and here i'll set change page and then i need the items list and items list must have a minimum of two items the bottom navigation bar item and the item needs a minimum of two values so first of all label and it can be a text or not it will be sign up and then the icon icon icon guns dot arrow upward we can copy this item here ctrl c and then we can come down and paste it and this i'll change to login and here i'll change to login with that if we save it and we hot reload again so here is our sign up and here is our login so we can also do a bit of modification here we can come here and say selected item color should be colors dot deep purple accent and unselected colors unselected item color can be colors dot gray if we save it yeah so here is our selected item and here is our unselected item and that was a little overview of how you can use the bottom navigation bar all right so with that being done we can save it and get rid of all screen here we don't need it anymore now we will start with the sign up screen and then whatever we have in the signup screen i'll just copy and paste it in the login screen so i will explain slowly what sign up screen is going to be like and how the functionality is going to be like so first of all in the scaffold i need the body and the body needs a center first of all center the child will be a card and its child will be a form and its shell will be a single child scroll view and its child will be a column so center card form single child scroll view and then a column now the column i want to have some padding so padding and i want it to be symmetric so symmetric horizontal of eight all right so in the column first of all i want to have a text form field no i'll start with a sized box sized box of height 10 and then a circle avatar of radius 60 and then a size box of 10 and then a text button icon and the on breast will be like this and i can icon icons dot camera and the label needs to be a text first of all text that says take picture so if we save it all right and then i want a size box again ctrl c this time a height of 30. after the size box i want a text form field and the text form field i want to set some firstly i want to set autocorrect to false and then decoration input decoration i would like to set the level text to be email here and then i want to set the border so outline input border and the border radius should be border radius dot circular off for now 12 i'll see what we can do yeah and then here i want the suffix icon so icon guns dot email all right what else do we need here i think we are done for now so i'll just copy this text form field now i'll copy this text form fill with the size box here ctrl c and this size box can be of 10 now so now we'll change this to password and this email can be changed to lock all right and we will copy this again oh by the way in the text form field we want the obscure text obscure text to be true because i don't want anyone to see the uh password and in the text field here i'm going to set the text input type so keyboard type to text input type dot email address all right so let us go here and save it i mean paste it and this one we will change to user name and the icon will be person i hope it was quite easy to understand and then after this text form field i want to have a sized box of height 30 again and then a container the child of elevated button and the child can be a text that says sign up and an on press that will be empty for now and within this container i will set the width to be double dot infinity i hope the ui part was quite clear and quite easy because there is nothing much to explain here it's just what you see is what you get so i'll paste it here and i'll set it to 10 just to have some extra border here all right this looks good to me now we need to have some properties here right for doing all the things so first of all if we go to the state class here and i'll start adding a var string this will hold our email address while we write it and i'll set it to empty string for now and then of our pass string equals to an empty string for now and then a var name string equals to empty string for now and then we need a final form key in order to things be saved we need a form key which will trigger the saving action so it will be global key of type form state and then what else do we need we need a let us add this first right so i'll come to the form first and then i'll set the key to be form key all right we can come to the text field here text form field and first of all we need to set up validation so validator will give us a value that we we wrote inside and this value could be checked against something all right so in the validator what what we do here is first of all in the function we get the value that is inside the field and we need to validate it with some logic so what the logic will be if well that is empty or val dot contains the letter at so if it does not contain red that's what it should be if it does not contain we will return please enter a valid email and if everything is okay we are just going to return null here and then we need a onset function that will be triggered when we are done with the validation so on safe could be we'll get the value again and with the value what we can do here is we can set a email string to be value that's what we can do all right so i'll just copy this validator and this on saved i'll come to the next text form field and i'll save it and here we can see valid val is empty or well dot length is less than 8 so if the password is less than 8 we won't accept it and we can write here password must be at least eight units long with that we can oh sorry we have to change this to pass string and we can copy this again and we can come to the next one and here we can paste it and this one should be if the valid if the value is less than three so we are not going to accept anything less than three for the username so username must be at least three units long and this now can be name string all right so now we are saving everything now what we need is we need to make up another variable so far i'm sorry it's not where it it's going to be a file from dart dot io so this one import from dot dot io file question uh image file and now we are going to make a void take picture which will be a async function and here first of all i need a final speaker i need to initialize the package so image picker and then final picked image equals to await picker dot get image and the source will be image source dot camera and i'll set the quality to be 20. we don't need more quality than this for this app at least now we can do a set state of image file now equals to file with picked image dot path so this is the logic for taking a picture and now we can copy it and come to the text button here and put it here and for the circle avatar what we want to do is we want to set a background color firstly to colors dot gray and the background image should be if the image file is equals to now we want to set the background image to null if it is not null however we want the file image and there image file all right so let's see if we can take a picture here okey-dokey it's working that's me the tv say hi to me [Music] and here is my here is me the tv all right now we are saving things and we have we are having the picture now we are going to write the logic for uh signing up to with the firebase so here avoid submit i'll not do any try catch here i'll just implement it with the bare bones so firstly what i want to do is i'm going to set a final variable that is is valid and i want to set the logic for what it means to be valid what it means to be for the for the fields to be valid so form key dot current state dot validate so this is the logic for valid and here what i want to do is if is not valid right hence the exclamation in front if it is not valid i want to return i don't want to continue with the ah what is it with the function and then we want to see if image file equals to now also i would like to return i don't want to continue with both of these conditions out of the way i want to first of all save it so form key dot currents current state dot save first of all i want to save everything and then i want to await firebase auth oh my bad it should be a async function since we have some waiting to do so firebase auth dot instance what is up auth dot instance dot create user with email and password and the email will be email string and the password will be password string with that uh the thing is after we are done awaiting and after this is done this expression here is going to return us with with some values right and those values will be user credentials so what what what are the details of the user so we will make a user credential variable here and i'll name it user credential and this user credential is actually exposed to you from this firebase alt so that you can save it and i'll name this user credential now after we are done uh signing up so we await it then what we do is we go to the next line and we do our final ref equals to firebase storage dot instance dot ref dot child so we go to this here we go to the storage here for saving the image so final ref equals to firebase storage i want to await it firebase storage dot instant route and the child should be user image saw folder inside it and then a child and this child is going to have our user credential dot user dot uid so our unique id as the path and plus i want to add dot jpg with it so dot jpg so it will create a folder and then there in the folder will have a name for the image and the name for the image will be our user id plus dot jpg where are we and then i want to do a dot dot put file i want to put the file and you know what i will not put the file in this line and i will also get rid of await here and i'll just name it to final ref here and then in the next line i'll say await ref.put file and the file will be image file dot when complete so we will wait for here we are just declaring the path right so in firebase storage in the reference first you make a folder and then the folder will have name of this and then this whole thing in this whole path we will put the file and after complete we will get something in return that's why we are awaiting here all right after we are done our waiting we can come here and set final url equals to ref no await we need to wait for rev dot get download url so we'll get the url for the picture we have and then finally we can go to await firebase firestore.instance so now we are going to the cloud firestore here so firebase database firebase firestore.instance.collection and then in the collection we want to make a collection of users and then there will set dock and the dock will be our user credential.you so each doc will have our unique identifier id as its name right so doc and in the dock i want to do what i want to set i want to set whenever you are setting or putting something you need to pass a map so here we have a map and in the map we want to have key value pairs so firstly uh user id equals to usercredential.user.uid all right oh my bad and then i want the username to be uh name string name string and then i want the photo url photo url to be the url and then what else do i want i want the i think these are the only three things we want right id name and the photo url i don't see anything else we need uh user id name photo url i'll go ahead and have the user email as well since we just have it so email string we won't be saving the password that's not too ethical to do right we won't be saving the password so with all of this done here is our logic for signing up and what i want to do now is i want to do a little bit of tweaking whenever we are pressing the sign up button i want this uh button to go away and show a circular progress indicator here instead for that we can come up here and write a bull or a var is loading equals to pulse so we will set this initially to be false and when we press submit after we validate and save i want to do a set state here of is loading now equals to true and if we come down here in front of this container we can do a ternary expression so if is loading if if is loading question mark means if is loading is true we want to show a circular progress indicator if it is not true however however we will show this button so with all of that let us restart and moment of truth so if we just sign up here oh i'm sorry we need to hook this up right this submit ctrl c we need to come down here and put it here in the elevated button we will put the submit here all right boise girlsy so if we press sign up see this is validation in action and now let us take the picture first so i'll have a picture this is me the tv and my man i'm sorry i'll set sean at gmail.com and password i'll set one two three four five six seven eight nine and user name sean of course and then let us sign up actually we are successful if we go back to the console here and if you go to authentication you can see here john gmail.com if we go to the firebase firestore database here we have a user collection with the photo url uh the user email id and john if we go to storage we have the user image here so with all of those if we go back here and in the main.dart instead of this if i show a stream stream builder and the stream will be firebase auth dot instance dot auth state change and the builder will be ctx and snap shot right so we want to return the chat screen now here we want to say if snapshot dot has data so if we have some data we want to return chat screen else we will return the odd screen so we save it actually we are in the chat screen now in the chat screen if we make it a scaffold and then here we go app bar app bar set action to icon button icon icon icons dot exit to app and on pressed we set say await or we don't save it yeah let's say let's put it async here and await firebase auth dot instance dot sign out if we do this so we are in the chat screen and i'll set the title text that says chat screen right that screen now if you press this logout button here see we are locked out now we are going to work on the login here and you will see that if we press login we are going to go right in so we are done with the signup screen and i will just copy this so i'll copy this all all this logic for the login screen and i'll paste it here in the in this place here and i do not need the name string here anymore i do need the login form key we do not need the file type and we can get rid of this function here we can get rid of this logic here and we can just import this no we do not need this this this all we do not need we do not need the user credential as well we do not need this so here what we are going to do is we are just going to await firebaseon.instance.sign in with email and password and the email will be email string and the password will be password string that is it now one thing that i want to do when we are pressing the sign up or sign in button i'll start with here in the submit function i want to do a focus scope dot off context dot unfocus so it will just uh get rid of the soft keyboard that we have when you press the sign up or sign in button so log in let's have it here all right so what we want to do now is we want to come to the sign up screen and i'll copy this entire scaffold as well ctrl c log in here i'll just paste it and we can start by changing in here we make it login oh what's up we do not need this text form filled we don't need this we can get rid of this and here we do not need this circle avatar size box this this we don't need any of this we can get rid of this so we got rid of the circle avatar the button and the form field for the uh what is it called the that thing the user thing right the username thing and we are hooked here with the button and everything so now if we save it and start writing here john gmail.com and password one two three four five six seven eight nine and we press login or uh we are in the login chat screen so with all of that we are done with the outflow and in the next video we will see how we can get done with the chat part of the application it's going to be much smaller and much easier hope to see you soon see ya hey all so i have decided to to conclude the entire tutorial in one video so i'll be continuing now other than going for the other day uh first of all make sure in your void uh main file right in the main function you have await here in front of firebase.initialize app you have await with that being said let us login first john gmail.com and password one two three four five six seven eight nine let us login so now we are locked in and firstly i'll make a new folder here widgets and the widgets folder will have three widgets so messages firstly new message dot dart a new message i'll set it to be a stateful widget this widget will be responsible for sending a message right so here i'll change this to first of all i'll get rid of this and in container i will return a row with children and expanded child of text field and then i need a icon button and the icon will be icon icons dot send so let us put it in the chat screen first in chat screen after the app bar we can set a body and in the body we will have a column children and then we are going to have an expanded container and after the container we are going to set the new message so here it is and we can go to new message we can change the text form field now we can just have it as a text field we want the decoration input decoration border outlined input border border radius to be border radius dot circular 12 and what i want is i want some padding of symmetric horizontal of eight yeah better and let's also put a vertical of two all right now here i want to set a hint text to be send send message all right and what i want now is i want to have some properties here so again a var message string equals to empty string for now and a bar message controller equals to text editing text editing controller this is what we want so in the text form field first of all let us set the controller to be message controller and here we want to save the on changed so on changed we will get the value and we will do a set state of message string equals to value so with every word that we type every letter that we type this variable will be constantly updated and we set the controller because when when we are sending a message i want this field to become empty so we need a controller for that and here in the on pressed i will set messagecontroller.txt if it is empty dot is empty i'll set it to now so you see now it's gone if we have some words here we can press it and i'll not do any decoration or anything you can do it by yourself i'll just show you the bare bone app right as i've said before and so we can go down and we can make a void send message function which will be async function and within the body what i want to do first of all is await right so here we are what we need to do is first of all we need a a function a we need expression that is going to get our user id first of all so the user who's logged in and then we use that user id to go to the collection of users and then we set the you user id so for example we come here and then we search for the user id that matches with the document here right and then we take a we get all of the information that there is to to be get read and then we go to firebase firestore and we make a new collection of chats where we set the text the user id of the person who's sending it so here we can go and set this user id user id we can have the photo url user data auto url we can have the username user name user data a user name there what else can we have we can have the photo url email id name so we have the id for the url name text let us just go ahead and give the email address as well user email user data user email also one thing very important importantly that we need we want to have a timestamp so time stamp so the timestamp is going to hold the time that we are sending the message at right so timestamp dot now so these are the values that we have and with all of that we are done we can hook this send message ctrl c to here so if we do that and we open the emulator and write something here let's say hey and we know before i send it i also want to show you something here i want to set message controller dot clear so that things become clear and lastly i want to all right we can just keep it like this and let us just send it all right it's gone if we come back here to our database you can see we have a chats collection and then it's a randomly generated document id and here we have the photo url of the person who's sending it the text that he sent the timestamp at which he sent his email his id his username this all these details we needed when we fetch the message so we can we are done with the new message here we can go to the widget and we can make a new widget messages dot dart and we will import material and a stateful widget messages and here what we need is first of all we want a stream builder screen of firebase firestore.instance.collection and the collection will be the chats collection what's wrong here and we need the builder collection dot snapshot all right and the builder we will get the context the snap shot and the snapshot will be of type async snapshot of type query snapshot this is what is the type of the snapshot and in return we want to return list view builder i want the item count to be 10 for now just giving it and the item builder will be a context and index and it is just going to for now return a text that says hi that's what i wanted to do so with that we can go to the chat screen and here instead of the container we can set messages to be like this and we can see 10 highs here we can go to messages and what we want to do now is here i want to make a variable so var chat chat docs equals to snapshot dot data dot docs this is what i want so ctrl c this this is going to get everything right so here i want to say it's chat doc dot length so you see we have one message there and one message here with that we are actually halfway done with the messages widget now we can make a new widget called message bubble and this message this this uh widget will be responsible of uh styling the text and everything right so if we go to oh by the way by the way by the way since we are here i would like to do something uh here we are going to the firebase firestore collection and chats and here i want to order by timestamp so i want to order this whole thing by the timestamp and i want to set descending to true and in the listview builder i want to set reverse to true so if we write something else hey all right because we hard coded the text here so it's just coming hi hi hi but we'll see everything later if we go to widget and we add message bubble.dart and we import material stl this can be a stateless widget we don't need it to be a stateful message bubble and we get rid of this all right so in the messagebubble.dart file we can first of all get a row here and then we can expect uh let's say first of all in the message start we need a container that has a child of text that wants the message and all what i want to do is first of all let us expect some properties here so final string message the message that we are receiving or sending message upon the final string user name i want the final string photo url i want bull is me i want to know if this if the text that we are rendering in the message bubble it is by me or someone else and [Music] string message string username photo url let us just expect a key off key should be a final this two should be a final and then we can set message bubble to be this dot message this dot username is dot auto url this dot is me and lastly i will name i'll make it a named argument so required this dot key so we are done now we can go to messages and here we can render the message bubble and for the message we want to go to chat doc at the given index there the text key for the username we can have chat docs at the given index there the user name key for the photo url we can do chat docs at the given index and this should be the photo url lastly is me i'll leave it empty for now we will see what we can do here and the key should be chat docs dot chat docs i dot id now hit this i want to control exit and put a value key and here put it so each of the text will have its unique identifier by the chat doc id so if you go here this id this document id this unique id will be set as the value now to get the is me it's a bull right so we need to return either true or false so it's going to depend on if we come here where is it here and we set final current user equals to firebase auth dot instance dot current user dot dot u id right now what i want to do here is is me should i should check chat docs at the given index there the user id equals to current user so for the each document we have user id here right this user id if this user id is equals to the user id that who is currently logged in so it will return true so it is is me it is me if it returns false it is not me so with that we can we can minimize this see we have hey hey and then we can say hola see it's here the order is perfect uh since we are here i'll go to where is it new message and firstly here i'll do focus scope dot off context dot unfocus so if you send yo hey it's gone all right perfect we are done with messages too we don't need it and this message bubble now we are in the final step we are just going to design the thing how we want so for the container i'm going to have a margin of edge insert.all of let's say 20 padding of edge inside the all of 20 i don't know why 20 but whatever let's just give it let's give it eight all right now we want some decoration box decoration and in the box decoration we want the board radius border radius dot all dot circular only yeah only and in only we want to set let's say from bottom left uh border radius dot circular of 8 for example what is the error here what is the error here the argument i bought already is converse under the perimeter type radius radius dot circular of let's say 8 top left top right also the same bottom left also the same bottom right also the same now we need some background colors so back color colors dot dot let's just say blue accent let's just say we will see what we can do later what is up oh my bad if we have the decoration property we need to set it inside the decoration property all right this looks good we don't need the margin to be 20 that's too much let's give it eight aha and what do you want now let us set the style text style or font on size to be 20 a bit too big 17 14 maybe 15 all right we can make it four four four four margin could be eight though four and here we can set it to eight yeah that looks just about right and i'll set this to 16. so with that we have the messages and what we what i want to do now is i want to log out and sign in with the new user so you can see the things in action of right and left side so here i'll make it uh go at gmail.com password123456789 username do sign up so here is everything by the way if we go to chat screen and no i'm sorry if you go to the message bubble not to read the message message so we are waiting for the stream build to get everything and then we are returning this right what i want to do here is i want to check if snapshot.connectionstate equals to connectionstate.waiting i want to return center child circular progress indicator all right so if we write here again hola hola sorry hold old hola hola now what i want to do is i want to go to the message bubble and here in the row i want to set main axis alignment so is me if it is me main axis alignment should be end or if it is not me main axis alignment should be start so you see this is the dough account and dough is on the right other other guys are on the left so this is what it should be and then i want to do some styling here or i can just leave it like this can i not i'll give this one so top left so top left top left i want to write it if it is not me right if it is not me i want to be have this water circular radius motor circular and if it is me this can be zero no my bad this needs to be zero and this this needs to be eight so if it is not me this this corner will be pointy and on the right side top left i can't do it bottom right so for the bottom right i'll copy this and i'll have it here and this i'll remove this so if it is me here all right i like it now what i want to do i want to have here uh circular circle avatar with the background image of type network image and this should be the photo url all right so what do i want is me if it is me i want to set it to now what is up all right just just let's just get rid of this and again let us put it in a container all right here i want to set is me this should be now so if it is me this should be now and in the container i'll control see this and i'll come up to the container here and i'll put this again and this should be is not me so this is it i like it now for the row i want to have some padding symmetric horizontal to b8 all right that's good i can set it to four that is great now if we are writing it i want this to be uh where is it that where is the blue color control f blue alright blue accent is me this should be colors dot gray type 300 else this should be blue or maybe green accent let's try green accent whatever now in the textile i want to have it colors is me colors dot black it is not me colors dot white white and so well changes to purple yeah or yeah this looks good and i lastly want to have some i have the username here so for the username what i want is let's just write a big message first i want to see what it looks like ooh a little bit of 140 all right my bad we do not need this max line and everything we can just come up here and we can set the weight to be 140 or maybe 180 if you want right so 180 is looking too big 160. yeah that looks just about good and lastly i do want the user name so username i want to set it here so i'll just copy this container ctrl c and i can come in top for the row i'll set this here if it is me we don't need the circle avatar we want the text to show user name let's see what does it look like so dodo all right so this is good and this container i want to copy it and go to the end and save it here and not give notice me but it's me so this is it this is the guy who's sending the message and this is everything with that i guess we are done pretty much app i guess this wasn't a too big video but i tried to explain everything that i know off and that might help you so with that being said i'll come up with better apps in the next video let me know in the comment section down below what could be improved and how i can i can improve my uh lectures and put a like subscribe and share if you if you would like to see

Channel: Fluttercraft

Views: 243

Keywords: flutter, flutter 2, chat app, firebase

Id: -aU7N7herDU

Length: 69min 16sec (4156 seconds)

Published: Tue Nov 23 2021