Flutter Social Media Chat App Tutorial For Beginners | Part 1 | AUTH UI #generation #socialmediaapp

hello guys my name is Samarpan Dasgupta today  i am now going to start a new tutorial about   a social media app the app name is generation i  already made that app and i also showing you the   about that app and if you want to see the full  video the video link in the description about   that social media app i made this app  in the flutter so you can check it out   from the link in description as i also  provided um to this tutorial source code   in the description you can take the code from  there without wasting any time let's get started so let's start the project let's  make a new project in android studio   new flutter project and name the project name as  generation and leave the package name as youtube   tutorial we don't need way so good  to go it takes some time to make   the project by the android studio let's  wait for some time but some seconds okay so we have to start our emulator as well sorry emulator will start in a few seconds that's our emulator so let's start the coding and   within uh some seconds the emulator  will start i also make a quick   cool good that's the way that take time so let's  remove all the code as well and let's start that's our favorites package material  and we have one minute uh and   we have to import that pack not that package yeah let's start from here here  we have to give the run app and i take code from my   github tutorial as well because i am very  much lazy person sorry for that just okay okay okay so for now we don't need to use that okay  let's first make the signup page as well okay   so i give it name as signup page and  under the okay we can delete the test   folder as well because it is very much  led okay let's make a folder named as front end front end and here we make a   new folder auth ui under that we  make a new file name as sign off material there are some notifications so what the  class name the class name will be sign up page   okay so i have to make a stateful wizard because  there is lot of operation will perform later   that's why we need stateful with  it so here we also import that   so let's start with safe  area and child as scaffold   and here we have to give background color  i also take the background color because my   memory is not good so i have to take  copy here and i love to copy paste   so that's color is the constant so we make the  constant keyword as well and let's meet the body   okay let's see uh what's done okay let's  wait for starting the project in the emulator   here are starting the dev tools okay my  voice may be slow in the video okay maybe low   so please don't mind i will recover it  as soon because i have no mic as well so   let's start the project now because it takes time  to run in the emulator we make a hot reload later so here we have to make the list view because if   the phone is going to horizontal then there  will be some contents will not be visible and   sink wrap two and make the children so  we have to first make the children so so we have to give the heading sign up font strike not strong okay  from size as well 23 and what we should give we should make two  authentication just like email and password   authentication and google authentication  so for email and password authentication   we have to make the text from fit as  well so let's make a key for form field   so it is used in the form  state that's why i use that sorry okay let's take a considerable pace here just like give the height as we have to take  the responsive side that's why we have to set   with respect to the screen  height and width as well by the way that's my first tutorial on  my channel so if i make any mistake sorry it takes time to run on that because this is the  first time so make the child and make the form okay we don't take whole height we take as   half of that height so we have to make  the child and there will be some columns if there is some list there will be no  problem because this video will be preferred   actually means on the site so there will be no any  site overriding as well so here we give the key as she takes a lot of time to run on the emulator  because i think this is slowing my laptop as well   okay so we have to make the text from field and  we have to repeat the text volume field again and   again that's why finally installing thanks god  we have to make a separate function common text form filled okay sorry uh my laptop is hanging sometime sorry yeah so the return type will be visit and  we have to return our text form field okay   let's see what happen next i have to make hot restart because okay   sign up is showing in the black  color so we have to make it as white and size should be bigger uh i think not good yep considerable so we have to  make a face from the upper side as well site box height as 50 let's see what happened uh good to go okay sorry we have to use common text  field this what problem sorry okay you if you feel that is uh i am in the  slow so you can run the video in the 2x or   3dx mode okay because i have to make it  slower because i can't speak in a fast way media quality dot off sorry sorry i think any problem okay okay yeah this form field is showing i think  um we have to keep the padding actually   from lift 20.0 and right 20.0 yeah cool and we have to give some face here so sorry sorry let's make it as  a container and use padding from top that will be 20.0 yeah  good to go so takes form field   here we have to do some decoration  um i think input decoration yeah so   um what i should give in a  while border so here will be the um underline input border okay  so we have to give the color   underline input border and  let's see the properties okay sorry sorry what a sight so we  have to give the border side and flawless colors dot light blue okay and i think with its the width is one  point by default is 1.0 let's try 2.0 yeah cool   not a problem at all okay so we have to take some formal argument  for formal named arguments as well so   that will be the label name and uh  not a label name i think hint takes syntax is uh good for good to go and we  have to pass the hint text here so here   the email and we have to provide hint text as  in text let's see yeah it is in black mode so   so i have to provide some hint  text style so make the text style colors dot light blue i think um not some good color we are good to go uh not quite  purely by 24 ah no why 54 i think yeah not bad okay we'll change the the  later okay because um i don't remember   the exact color i used there so  if any problem i will change it so okay and we have to make that padding  from the bottom as 20.0 so for password and confirm pass word okay yeah so we can give a more  pace okay it will looks good yeah   okay one minute let's see the hints color  because the color i think it's not good   so if we go that so white 70 yeah so where where yeah white 70 yeah that's good so  that's the text field we have made we have to   let her make the validator and other stuff as  well so make that button okay sign up button sign   up button and let's make a different method for  that and the meter return type will be the wizard   and we have to return and i take the port for  my github as well so i have to search us locking sorry just a second yeah that's the port we have to take from my uh old project as well so we have to delete all the  things present in one place because   we will meet later because we now only  make what's problem oh sorry sorry ah that's not good so we have to add the  padding as well so left with padding and what i make 20 of 20 is good yeah  so we have to make some more paste yeah i think it's good hmm that's  the problem okay let's make it 1.5   so yeah uh not one point five  one point eight is good i think no 1.65 yeah and we also use google  authentication and facebook authentication so okay i think there is some  extra pace here that's not good um just a second that's good and we have to add google  authentication and facebook authentication as well   so we have to close the project and take the  image of google and facebook authentication   from that asset because i don't want to take image from other side as well  just the image we will use that in   let's make a folder as   add sets and under that we have to make a folder  named as images and under that we have to save it   and i also take just a second facebook images so  let's wait for that yeah i have other projects so   yeah good to go studio project and generations  assets images let's paste it i love copy paste okay so that's added so we in the  prospect dot email we have to edit that so we have to add assets images right yeah so  we have to run the flutter   pop gate let's wait for uh take that all the  dependencies as well let's start the project and   make the buttons there so we have to make that  button not our outer side here so social media integration buttons so let's make that sub  method of that class sign of authentication   this will be a written type of the wizard and  we will make a container and for the container there will be the same with okay i have to tell you one thing my  previous project that i showed you in the video   and that video also available in the youtube  i not use null safety in that project okay   what's the problem we have to make  a slash here a small mistake sorry   okay you can see here i use null safety  version okay in my old project yes i have   video in the youtube already i not eat null  safety so consider this project code this will   help you in the future because  null set is important as you know   okay so we have to run the flutter pop  gate due to the changes plotter top gate yeah so let's run the  program and continue our work   okay let's make the button for social media  integration like google and facebook sign up buttons sorry social media  integrations integration buttons create the method and the return type will  be the wizard and we have to return a wizard   and make a container for that container  we have to give a padding as well for from left twenty point zero and  from right twenty point zero okay for width we have to make the we have  to provide the considerable weight   and thanks god for this is running  sometime unexpected error happen   okay so yeah so there will be a row ah not a  row i think okay just just just do it okay so   here are the internal list view we have  to make it here okay so do one thing make ass or continue with and make the text style as well color  colors dot white and font size 20.0 let's see make it some low contrast okay or continue it okay we have to make a row and mean axis element   dot piece around and make the children we have  to make the two children as image dot assets   and we have to provide the path as assets  images you can see the parts from here assets   images google.png and give the width not give the  width and size simultaneously maybe there is will   be some aspect ratio problem give one of them  either with or size let's see what happen here what's problem there let's take a  lot of face actually sorry sorry yeah actually let's just take a lot of  face due to this we have to remove this   yeah that's the picture 2.0 i think will be smaller yeah very  very smaller so 80 point sorry sorry   uh 65.0 will be better i think yeah good to go okay so we have to  make a padding on the top as well 21 0.   let's do one thing now 20.0 good so and now time for facebook okay okay take the size smaller it's getting odd and make a size box of wheat 50.0 um not good yeah good go and convert it  here okay so sinus page complete and we have to now make the login page and   we have to now provide under here  already have a account so login so let's make another buttons   for a switch to lock in let's  make this method as well as before and i also take that code from here as  i say because i am very much lazy but you don't use my previous that project code  because that is not migrated to null safety   so maybe that probably happened you can take it  but that is your own rigs because maybe there   is some problem okay for the null safety and uh  the previous project code is not well organized   so take this project code okay i as i say every  time i upload in my github i also provide the link   in the description elevated but it's already  yeah that's another elevated button take that side box okay okay i think from here ah there's some problem okay so if i take from here  there is some other because sorry sorry guys what's the problem man sorry i take the wrong quote just a second ah dabs okay that's the whole thing sorry for that okay i take an extra bracket during the  copy paste yeah let's remove the that part   on pressed we will make it later because we know  focusing on the ui as well but it's too much okay okay i think it's good   and one more thing yeah there's here okay  so if i horizon make horizontal of that yeah you're good to go but there is  some problem okay okay okay so uh just a minute guys for here the list view   we have to make some padding  from the bottom as well like 10. okay cool so let's make the login button for the  login we have to make a another file from   auth ui folder under front end folder  name as log and just like as usual work and make the state follow is it because we have to  make we have to get the benefit letter log in what   not odds i think i make as a sign up page  so i have to keep it the okay locking   page i think locking screen is the right okay  no problem locking screen because this is not a   web this is a mobile app so i have to change  it to the sign in because this makes sense yeah so we have to change it here okay so in the login page as usual we have to make a safe area   and under that we have to make scaffold  and use background color just like before okay then what's wrong with that yeah let's make a container okay  let's make this container okay and okay we have to use we  have to use the named root okay   that's why i am make the new directory roots okay we will make that route later okay  now just focus on the coding and the ui   we will make that roots parts in another part okay   sorry about that tanglers in the sign up page  from that elevated button let's switch to the   navigator dot whose context and material page and  here use log in screen yeah automatic import and   go to the locking screen and make  a hot reload what's wrong with that i think yeah we have to make the hot restart  because we use the file name in the main page okay yeah that's the locking screen we  have to make let's go just like before   uh just copy paste from here container i have to make the reusable  widgets okay because we have   to repeating the port and that's not  good i think so that will be bitter okay okay okay take that okay let's do one thing common spot methods okay so we don't  have to write the code again and again   because that will be not a good choice and  we have to supply as input material import and we have to make this as public because private  for um if we make up private we can't access there and okay so here's the problem   so what we can do we can pass the build conflicts  as well and for that that will be the same okay yeah login screen okay so in the sign up  page we can delete the whole things and because that will make the  reusable functions okay because   making same functions again and  again that does not make sense i wrong they are in my previous court that's where  i'm stopping from so that's not a good practice   okay so here don't need off that and   okay let's come back here and let's so ah there's  a problem okay okay so we have to import that as   well and we have to pass the context because  that context is important and let's make it and we have to pass the context just like before yeah no change let's make a hot restart  if there is any drastical change okay if we go here yeah that's the same  thing because we don't change anything here you have to put the login   so if we go there yeah that's makes  sense and we have to change something   because there will be a single password  not confirmed password for locking stuff okay so we have to is it um ah not good not good 2.6 5 not good actually it's not seems  good two point uh sorry 2.5 is better if we make two yeah this is considerable and okay from top we have to use yeah i think no problem so  locking so we have to change it as   okay sign up button that the name  because we have to change the name or what um sorry yep some  odds button just a second yeah auth button so here i have to take stream button name okay so button name and we have to change it as url  just like auth button okay and we have to   pass here we in the sign up page so we have  to pass sign ah okay there is another problem we have to make it as earth  button and we have to pass here   lock in let's see yeah cool and  we have if we give to the past good good good and we have to  change that file name as well switch another odd screen okay so switch  another off screen and here we have to change   yeah switch and sorry another what screen and we have to publish uh we have  to take that name as well   button name just like before  string but sorry button name okay button name first because there is  two section okay button name last for   button name first we have to provide  that button name first sign off sorry sorry okay already have an account and water name last or second we  have to use that button name last   and what the name last is provided so here we have to pass for the button  name first don't have an account and there is some face and sign up yeah don't have an account sign up and for the  premier space already have an account login okay   so if we switch here we have we go here  and we have to change some navigation okay if button name last equal to log in if button name equal to login then that else we have to use this is for uh i made this  for the locking page okay   if you get bored you can make it 2x or 3x  faster just as your flavor because i made   that tutorial first ever time okay that's  why i can't fast manner so sorry for that okay let's make a hot restart sorry sorry yeah what is not happen and this  is switched to the login screen   this is switched to the sign up  screen that's work really great and one more thing we have to wrap with that two images for social  media integration with gesture detector gesture   detector and print just for the debugging  purpose we have to see is if it's working or not okay so gesture detector on  tab and that's the facebook   fb everyone covered it but secretly not my  favorite sorry for that is pressed let's see   google pressed facebook pressed go to the previous  google play facebook page okay sign up page   login page sign up page login page yeah that's  working fine okay in the next part we have to   work with the email and password authentication  google authentication facebook authentication   and then we have to switch to the main  screen in the home screen as well okay   so that's for the video and i  will uh upload the next video uh   as soon as possible okay if you like the video  don't forget to like comments here and one more   thing please comment about what you want i  make whole of the tutorial in one video with   different part and upload in that second video  or make a small small part and upload daily   i think you understand what i say i make  a small part of every person and upload it   every day or make the whole part in one video and  make it difference with the timestamp and upload   after six to seven days what you're thinking  let's comment about it and don't forget to   like comment share this video and don't forget  to subscribe my channel and click on the bell   icon to get the regular project updates that's  all for that thank you goodbye have a nice day

Channel: Sammarpan Dasgupta

Views: 5,362

Keywords: 2021, Flutter Chat App with Firebase Authentication, audio, auth, authentication, authentication_ui, chat, comment, dark mode, dart tutorial, documents, firebase, flutter, flutter for beginners, flutter social media, flutter tutorial, flutter tutorial for beginners, generation, image, like, location, networking, null safety, online database, playlist, prebuilt app, realtime chat app, share, social media app, social networking app, source code, sqlite, text, tutorial, ui, video, voice

Id: nbCFUYTNZl0

Length: 49min 30sec (2970 seconds)

Published: Tue Jul 27 2021