Flutter Basic Chat App using NodeJS & Flutter | Socket 🔥🔥🔥

[Music] hello everyone so this is my first video on youtube and in this video i am going to create a basic chat app using node.js and flutter and we are going to going to use sockets so let's get started with node.js so here i have created an empty folder and let me just initialize the uh node project so npm init hyphen iphone yes for default configuration so packet.json file has been created and let's say let us install the dependency that we are going to use i am going to use express nodemon and one more it will be socket.io and the version for socket i o will be 2.4.1 and the packages are being installed so here you can see that a folder name as node module has been created and package.log.json so if i go in my package.json you can see three dependencies are there and let us change this script to start and here we will use nodemon app.js we have to create this app.js file so let us create it app.js and to check if whether this file is working or not we can just log and here we can write working and let's hit save and to start the script we have to run the command npm start so npm start and you can see here working has printed in the console so let's get started so first we have to import express which will be required and here express and let us create an app which will be express bracket and after that we can create our server using the app object and you can call the listen function so listen function take two parameter one is the port and second one is the callback so we have to define the port and here we can define const code equal to process dot environment.port or specifically 4000 so either the default port or the 4000 anyone any will work so let us log here data server is started and let's hit play so you can see here server is started and let us also pass the port so you can see your server is started on port 4000 and now what we have to do we can now use socket so first we will import the socket i o which will be socket.io and what we want our socket to be on our server so we have to pass this server we can pass it like okay server and now we can listen on event or emit event so to listen we use on and here we have two pass first one is the event name and second is the callback we get so i'm going to listen on the connection event and here we get a socket object and this is the callback what we will do we will basically log that connected and successfully and here we will pass this socket id so socket dot id right save this so now uh to test this what we have to do we have to create our letter front end so if you see here i have created a empty flutter project where i have a chat screen and in that i have two colors and a container so let's get started and what i will do uh i will divide the screen in nine by one ratio so our ninety percent of the screen will contain the chat and the one percent will contain the uh input box where user can type the message and sign it so here we can use column and we can give children's where we can use expanded our child will be a container for now and we can use one more container let me give this a flags of nine and for this container let me give first we will create the input box so color start red so you can see here five time percent is for the input box so let's get started with it so in the container we have to give a child and it will be a text field and we have to give a controller so we can give something like message input controller and we can go all the way up and define it here it will be text editing controller equal to test adding controller bracket so our controller has been defined and what we can do we can give some decoration to it yeah so it is looking fine uh let's give some padding so insect dot all and 10 will be fine and here we can give some decoration it will be input decoration and in this we can give enable border as outline input border and here we have to specify the border side in which we can give some color i am going to use white and we can give some radius so border radius start circular and it will be time so it is uh we have to give the border to the focus border also so let's copy and paste it yeah fine let us change the text color and cursor color so to give a cursor color we can directly use the self color color and here i am going to give the purple which i have defined here the text color will be we have to give style and it will be textile in this we can give color and color sort like let us also remove this hair color and hit save yeah so it is looking good so now let us add this end icon where our send button will be there so in the input decoration we can use something called as suffix icon and here we can pass any widget so i'm going to use a container for my preference and in that i can give a child it will be an icon button and on the on press let's keep it blank for now and in the icon we will give icons dot send and what we can do we can give this a color it will be our best purple we can use and we can also give this icon a color which will be white let's hit save yeah so we have to give some border radius and we have to give some margin to the right so let's do this so margin edge insert okay h insects dot only and it will be from right it will be 10 and we have to give some decoration and it will be box decoration let's take the color into the box decoration and here folder radius let's copy this and let us hit save yeah so it is looking fine and yeah so what we will do on the playlist we will call down and send a switch will be a function and we can pass the text of the input text and what we want uh whenever we click on the send button our input text field should get clear so we can do something like messaging controller and set the text to empty let's hit save okay we have to define this function yeah now let's hit save and if i type now hello and find it yeah so now what we will do we will create the list item so for that we can use list view dot builder and in the reader we will return a message item the message item will be a stateless widget in the end we can go like class or we can use state place yes widget and pass the message item here and what we want here basically we will use a boolean to identify whether the message should be on the left side or on the right side whether the message is sent by me or i am receiving the message so here we can use a boolean and name it as sent by me and it will be a final and we also have to add the final character and let's make it required yeah so we have to give here send by me and let's keep it true for now and here we can a use and take a text which will be hello okay we also have to define the number of types like this number of item item counts so i will take their time let's refresh manually i think there is some issues what i can do i can stop this and run this again yeah so yeah so it is working fine now so let's give some style to this widget and i will use this widget and i think i need this color here also so let us let me paste this here and send by me uh if it is true then purple or else white let's start right yeah and what we want our item should wrap and here i think we can use row and here we can also display time the current time is 110 let us take it for demo so 110 am and let us give this style to this four text and first we will give the font size i will give 18 here and the color will be it will be based on this boolean so let's pick it and let us also define this color it will be easy for us so yeah white white so if it is sent by me then white or else purple and we can use the same style here also but we have to change the font size and here i'm going to use time yeah and i want the color opacity to be less than the message so with opacity and here i will give 0.7 yeah and what i want uh the item should be to the right side and it shouldn't take the whole width so we can use here main exercise and main exercise at minimum and one more thing we can do we can do align and alignment now it is also based on this boolean if it is space then alignment dot center right or else alignment dot center left let's hit save yeah so now basically we have to give some margin and padding and if you see these texts are this both text are on the center by mistake i close that window so let us run again and meanwhile i will give some padding it will be as insects dot symmetric and vertically i will give 5 and horizontally it will be 10 or to be more precise let it be 5 and on the margin side we have to i will give here like three and horizontally i think it is fine so let's hit save yeah it is looking fine and we can use a size box here which will be five okay and let us change the cross axis alignment to cross axis alignment dot baseline and text baseline here we can use text baseline dot alphabetical so you can see both the tags are on the baseline and we can give some border radius to the container so it will look good so decoration box decoration and let's move the color here and border radius border radius dot circular and 10 10 will be more so i will give five yeah and now we can check for the false if i save here yeah it is looking splendid now what we can do or we can use socket we can connect our application to socket so for that i am going to use a package in clutter which name is socket io client and let's copy it you can uh navigate here and read about it so i'm going to just install this package flutter pub ad and the package name and here i'm going to also add one more package it will be get yeah so now what we can do first we will uh connect our socket to a node.js socket so for that we can import socket i your client as i o and we can create a variable here which will be a late variable and it will be io dot socket equal to and it will be socket so now what we have to do we have to initialize this socket in the init method and we can initialize it like socket io dot io and here we have to give the url so we are running our node.js server on a localhost server so we will give here local host and colon 4000 and we can give some optional parameter by using the option builder so i'm copying that and here we have to type i o dot option builder and i don't want to send any extra header let me remove these commands and a semicolon yeah so the initialization is done and what we will do we will manually connect this socket dot connect and if i now save this and go to my node.js console you can see this statement has printed so our connection is done and now what we have to do we can do add event on this socket object like we can listen if the connected socket is being disconnected so disconnect and here we get a callback object callback function and here we can log that disconnected and if i hit save and if i open one more instance of this so connected successfully and if i close it so disconnected and this now our connected and disconnected is working fine so let us add some event our event so i am creating a message event on which i'm listening and here i will get some data from the front end so for now let's just print it log data and let's hit play now what we will do we will emit an event message event from our platter application so let's go into the application and we have created this message sign message here we can go and we can call like socket dot admit and here we have to give this payment name and we can pass the data first we have to create so message in the message we will ask text and was sent by me here i will file this pocket or id and you can directly file the json object and hit save so if i open this console and here if i say and you can see here it is printed hello and my socket id is also printed here so it is working fine and what we have to do uh basically uh we we have to broadcast to every connected socket and what broadcast does basically it's emit event to everyone except the one which is sending the embed so we can do like socket dot broadcast dot admit and here we will say page receive we can pass the same data we are getting here to here now in our chat application we can go all the way up here and we can call a function here call this set up for it listen up and the event name is this let's copy here and you can pass the event in here on the data you will print it let's hit save now if i open one more application here now let's open the debug console so we can see what happens if i type from here hello so it is if i again do it here data except here yeah you can see here the image is not printed so we will close this one and now what we will as soon as we receive this next page on this event we will add this to our list so for that i am using a get x for the empty for maintaining this state and here we can go and create a controller folder and in this we can create a new file this will be chat controller here we can use extend effect controller and here we can create a list so it will be so what we have to define here is start uh thanks we will make it required parameter and what we will uh we will have to do we have to convert this system data here so here we go controller file and let us use this controller in our chat space what we will do we will change controller to uh container item every time so here and here we yeah so this is done and what we want to do on the on this event we want that chat controller we will append this speaker like first and i guess on the same message okay so it is working now what we can do we can show the connected uh number of connected user here so for that we can go all the way up here uh and okay type let's type which will be 20. okay it doesn't go to me okay what we will do we will store all the socket id that are connected and here we can open and here we um here also after deleting container let's so what happened um okay foreign but we are getting okay so this is how you can use sockets [Music] you

Channel: SimpleKoder

Views: 3,420

Keywords: flutter, google flutter, flutter app, flutter android, flutter crash course, flutter 2019, flutter full app, flutter tutorial for beginners, build mobile app, flutter full course, flutter explained, flutter getting started, flutter introduction, flutter course, flutter free, flutter sdk, flutter tutorial, flutter tutorials, dart, mtechviral, flutter widgets, flutter hindi tutorial, flutter best course, flutter best tutorial, flutter chat app, chat app, App development

Id: v908ggq9ZnU

Length: 45min 44sec (2744 seconds)

Published: Tue Jul 20 2021