Flutter Firebase App | Step by Step for Beginners to Advanced | Login & Sign up | Auth Page - Part 1

okay so here i have created this basic flutter  project so this would be a firebase app and i have   this main file here what i'll do i'll go ahead and  delete this we don't need any of this thing and   then i'll also delete this section and i'll go  ahead and create a new page and i'll call it   login page.dart all right and over here i'll  create a stateful widget and i'll call it   login page okay and we'll remove this one we don't  need a container we'll use scaffold okay perfect   now error is gone and here instead of home page  for now we'll use a login page all right okay and   i think we need to import it let's go ahead and  import it and we are done and first thing we need   to do uh we'll go ahead and create a directory and  we'll call it img okay and in this directory i'll   pull all of these images i'll copy and i will  do copy paste command b or ctrl v and it will   copy all of them in this folder and these are the  images that we're going to use okay and now in our   pub spec yml folder over here we need to create  our assets repository our flyer will have access   from here to our asset folder or images folder  so this is the image folder that we have created so i'll create here right img so make sure they  align and make sure this is the correct space over   here otherwise it'll get error and you might need  to get some dependencies for that so let's flatter   to handle that okay now we are good and we are  over here login page so this login page would be   responsible for drawing this page over here as you  can see uh maybe we need to get some dependencies   once again okay now we are good over here so this  is the page you want to draw well the first thing   let me explain what's going to happening so  this would be an image and these are text text   field for typing in and over here we'll have this  button sign in button but the background is image   so over here uh this would be a container  and then this would be another container and   we may put them in the container as well  if we want it doesn't matter but definitely   this is a container and then  this is another container   and this would be hopefully another container  so this would be column okay so this would be a   column layout so they would sit  on the top of each other okay so what we'll do first we'll go ahead and do our  body so within the body we'll declare our column   okay and column will have children so that's  what we'll do okay well the first thing we   want to do we want to show this image so to show  this image we need to declare a container okay so   that's what we'll do container and the container  definitely needs within height so here first   i'll declare a variable and i'll call it w and  i'll get it we'll get the width and save it in w   so what we'll do over here we'll call  media query media query dot of context   dot size dot width so with this we'll be able to  access the width okay now over here we can use the   width for container so the same width as w the one  we get all right now we'll do the same for height   but for now we might not might not need to  use the height directly but we'll save it   okay and we'll do all right here height okay all  right now over here we also need to use height   and the height we want to use that's uh hopefully  maybe one third of the height of this whole screen   so this is more like one third okay so we do  h multiply 0.3 so this will give us one third   height of this screen all right and now over here  we want to show the image to show the image we   need to use decoration and we'll do box decoration  and within box decoration we have image property   now we can access the image and we need to access  another property which is called decoration image   and within it it takes another image property  now here we'll be able to use asset image   constructor to supply our image name and  things like that so here we need to mention   our image path so what we'll do we'll do  img now here what's the image name let's   go ahead and take a look at the image name sorry  over here i think this is login image this one   so this image so the name is log in img so over  here i'll write log in img.png okay all right so   to make sure that everything is working we can go  ahead and run our app and starting the dab tools okay now it's over there okay so the image showed  up uh the first thing we can take care of this to   background uh to border side because it's not fit  in the container yet so we can force it to fit uh   to do that decoration image has a property  which is called fit that's what we'll use   would do box fit dot cover we'll  use it as a cover and let's see   it should be much better now okay now  the other thing about the background   so it is white background but here the scaffold  default background is i guess a little bit gray   so you can change that color so you change the  background color you do colors dot white and   now they look similar okay it doesn't  look like it's different it looks like   it is same okay so so far we are good at  this and now we'll see how to show this text   well to show the text we can do over here we can   define another container or so let's  let's do it in a container first   okay and why we want to do container because  we want to have this left and right this uh   space over here as you can see so if we  have a container it would help us to do   that okay because we can apply margin to  it okay all right so now let's go ahead and   over here declare a child and  within child we'll have column   and within column we'll have this to text  okay so that's what it will do okay so the   first one over here it takes children right so uh  children we can apply here list of children okay   now to do that the first child will be text and  over here we'll write hello and for this one   we'll apply style to it so we'll do style text  style and um let's see so do font size say 70   and the font weight will do bold until  weight dot bold okay all right and   so for so good what else well i think we can use  the color is different colors black i guess so   now now this will show this text over here so what  you can do we can just go ahead and copy this one   and put it over here and we can also write  sign into your account so here we'll write   uh sign into your account and this is not bold  and over here we want text size to be 20 and   the color is a little gray so we can use a gray  color we'll do colors dot gray say 500 like that   okay now we can restart our  app and see what happens   okay so it's right in here okay so yeah so now  what do we need to do we need to take care of this   uh alignment thing okay so for this one what  we could do we can start from the beginning   okay so this is the cross axis so we do cross  access alignment cross axis alignment start   so you're gonna using this property  we're gonna start from from over here   okay but it's still not over here that's because  it's missing uh width so we can give our container   away for now we'll give it the width the width we  got just over here all right so now let's save it   and you'll see it came over here but it's too  close so what you can do we can apply margin so   marginal put the container inside so do cons as  instance only and would do left margin say 20   and the right margin is a 20 and it will push  it inside yes it's looking much better now   okay all right so now next we'll  draw this one okay this to text box   so i would i'll go ahead and close uh these two  sections over here we don't need this text anymore   all right okay uh to do that we need to declare  text field over here so that's what it will do   well now we need to decorate our text field so  we'll do decoration and we'll do input decoration   and input decoration takes border so that's  what we'll do border and outline border   and outline border could take border radius  so now we'll apply border radius.circular   say 30. now we can go ahead and see our text  box well it's there right now and of course it's   too close so to align with this design we can  put it down so over here we can create a size   box so we'd create a size box of height say  50 all right now we will save it and say uh over here now it's looking much better and  it's also aligning with this margin over here   okay so now the problem is uh you see it has  this uh default background uh border color   that's what we need to get rid of okay to do  that within this within uh input decoration we   can apply other properties okay so one is called  focused one okay when it is focused focused border   and it also takes outline input border  okay now within this we can mention our   border side and things like that okay so let's  go ahead and declare this border side and it   takes parameters within your constructor called  border side so border side text border side   and over here we'll do color so within this using  this we can change the color so we do colors.white   okay now let's go ahead and save it so it's  gone okay now because it's not focused but if you rerun the app you will see it  is still there but when it's focused   it's gone all right okay uh anyway  so now it's color and we can apply   a width here but i don't think it would  really make sense and let's see it   okay because it's not visible but anyway so you  get the idea now this is for focused border and   we can also apply enable border okay so that is  i think when the app runs in default let's see   over here okay yeah that's getting us error  so now over here we can use enable border okay all right so now if you rerun the app  from the beginning you'll see it's gone   okay it's still there you can type in hi there  okay all right so we could do this but now   there's a problem here um you see there is this uh  shadow over here so we need to apply shadow to it   but this is what we are not doing but we need to  apply the shadow okay otherwise it's not visible   over here okay so that's what we need to do  to apply shadow to it what we can do we can   wrap this one around our another widget container  widget and then using that we'll apply shadow   okay so do command enter i'm sorry uh option  enter on mac android studio to get the widget   so here we'll write container okay now if  we save it of course nothing will change   then you can still type if you want okay so  now why we're doing this because we need to use   decoration because we have this border shadow  over here okay so that's why we need a bit of   decoration and if we have decoration we can  use a shadow okay so we do box decoration   and within box decoration now here we can apply  shadow so you do box shadow and the box shadow now   it takes parameters the first one is blur radius  using 10 and it takes offset with the offset the   offset defines whether it's x or y properties so  plus means if it's x it's plus on the x direction   on the right side and for plus one it's in the y  direction but at the bottom side are downsides so   from top to down that's how it works and over here  we can also use color we'll do colors.gray okay   and with opacity say 0.5 all right now let's  go ahead and save it and see the result so we're restarting our app yeah so this is there  now of course you can type in hi there how are you   but that's not in our design okay so previously we  had this border but now it became more like trying   a rectangle right well we can easily overcome  this problem because box decoration takes a border   radius we know it so we do border radius and  we do circular border radius and we'll apply 30   so same as the border radius we  applied for our outline border 30 okay so now it's it's gone okay  it's pretty much there okay now   the shadow is 0.5 and with opacity but it's  actually doing how to say the whole background   we don't want it so what we can do we can use  the color for our decoration so what we will   do our decoration will have a decoration color or  background color we will do colors dot white okay   so with this uh this background shadow would  be gone but little bit shadow would be outside   okay just like this so that's what i talked about  okay but it created the other problem over here   like this you see there is still a angular point  over here now we can get rid of that easily   so over here for our say focused border over  here we can use another border radius so when   it's focused we can also get rid of that circular  border so now you save it and you see it's gone   okay so you can type it it's gone all right  yeah but now once again if you restart the app okay now it is back so we also need to apply it  for our enabled border which is this one over here   and now it should be gone so it it's uh like  this okay yeah uh so it's good and we can also   do uh over here it's a blur radius let's try  to do spread radius and let's do it seven and   let's see the result okay it's pretty much like  this now what you could do you can use a very uh   sorry opacity maybe just two okay so it's very  light here so now it looks much better okay so   blood radius and spread areas together made it  beautiful okay so this is our first text box   so now over here uh this container is showing  the text box so what we'll do we'll just copy   paste this one and we'll get the second one  now let's paste it yeah we get the second one   but they're too close to each other now if you  see from the design there's a bit distance so we'll use the size box the height 20 and now  let's save it and say it yeah this is much better okay so high.com that okay perfect so the next  part we want to do is this one   this text so forget your text this one  okay now over here what we can do we can   right write this one in the text box so we'll  just go ahead and copy this text and put it there   right down there and it will show us okay but it's  too close to each other so we can copy this one   and put it there okay yeah it's gone but now  here from the design you see that's it's on the   left okay sorry on the right so this is empty  over here so we need to use empty container   and push it so empty container and text together  so that's a row layout okay so what's what can   we do so we need to declare a row widget over  here rollout object and it will take children and within the children the first one will  use an expanded widget and it will take   child and the child will have a container  so now this is an empty container   and next one should be our text okay  all right now you run it and see yeah it's right there okay right  below perfect so so first i did well next we'll see how to create this sign-in  button okay now for cyan button everything   should be pretty straightforward so what we can  do we can just go ahead and copy this container   which is this one okay and over here   uh what we can do first uh well well now one thing  we could definitely do we can put them in another   container okay so first we'll go ahead and declare  container container okay all right uh let's see okay i think we don't need a container for i  mean we need a container for this one actually   so we can put them separately it doesn't  really matter okay so anyway i'll remove this   and i'll copy this one and put it right there  and i'll change the image name so our image name   in this case i think is uh let's see this image  okay log in bt and png so that's what we'll use   so i'll change the name here i will  do log n b t n okay and i'll run it   let's see but of course it's way too big uh and  the width as well right okay so we have some   problems over here so definitely this one we need  to change say 0.8 of the whole height okay sorry let's see well first just anyway let's go ahead  with 70 pixel and see the result okay perfect and   uh well it's it's trying to take the whole width  right so i i think we don't need the whole width   uh over here maybe we can just do 200 and let's  see yes this is better okay and now over here   we want to but now if you if you want to make it  more dynamic based on screen size okay so that's   where this multiplication comes in okay so with  maybe say 300 and you just want to 300 i think   75 or 400 but anyway you want to take half of it  so you do like this okay so it becomes responsive   based on screen and over here so the heart okay  so you you want to use maybe 0.8 and let's see sorry 0.08 yes okay now it makes sense not 0.8 0. it is from  here to here as long anyway so now of course it's   a bit ugly that's not what we want uh that's why  we can use the border radius so we'll do border   radius dot circular say 30 okay perfect  but now it's too close to this box   so what we'll do just go ahead and create  a size box over here but now if you look at   the design it's i guess around the 70 pixel or  80 pixel so we'll do height say 70 pixel okay   all right so now it's looking much better it came  down okay yeah so next thing we want to do we want   to show this text within it so the text would be  like a child okay so over here we'll use child   sorry it's down there so here we go text  and over here well for the text itself um   let's see we already have a text somewhere  here so we can just go ahead and copy this and we can put it here okay yeah and here we'll say sign in and definitely you don't want 17 it's way  too big 136 and we can also change the font color   so we want white color so we do colors.white  colors.white okay all right now let's see   and go ahead and run it yeah now it's not  uh centered so what we'll do we'll wrap   it around center widget option enter on mac  for android studio and we'll call it center okay yes no now it's centered so it's working and  what is the next one next part is showing this one   right okay well to do that um definitely we can  just do right below it we can also do inside the   container if we do column anyway so now here first  we'll create a size box sized box okay and we want   to create a height over here so now we want to  create dynamic height for this so we'll do 0.08 yeah okay now we want to write this text but now  this text is very interesting as you see over here   so it is one line and next that next word is a  different color so of course we can achieve this   using row layout widget but we don't have to use  a row all the time call the time let's learn a   new widget okay that's called rich text all right  so that's what we'll be using so you do rich text this one okay all right now it takes uh well if  you hover over on it it says that it takes uh   what does it take let's see well it takes text  that's as a widget okay so here we are passing   i mean it has the property text  and over here you can use the text   spam okay now within text span you can also  use a text so what is the text we want to use   the first part of the text so first part  of the text is don't have an account sorry don't have an account okay  so that's what we want to use okay now of course we can also use  a style for it okay we do style text style and over here we'll use color color just like this color the one we used and we also  use font size and we want to use a 20 for this   okay yeah now let's see if we save it and what  do we see okay we have this one right and i think   it should be t okay perfect all right uh but now  what about this next text so rich text helps you   to use a list of children or child actually  so here we can do children and within children   you can write your text the text you want to show  right next to the previous text and this comes as   in the children okay so what will do we'll go  ahead and copy this text span over here okay let's see well over here we'll copy this part okay and put  it right there and it needs another bracket   and we should be good to go okay now here we  don't want to say this one we want to say create okay all right now let's save it and see  what's happening here it's right there   but you saw that was bold  and black so here we do black   and the font size the 20 is okay and we need  to font weight font weight dot bold okay all right now it's perfect looking good and  there's a bit of space there so we can just   hit a little bit of space like that okay so we are  good and of course if you see the original design   uh it has this extra space here right okay so  between these two but we already applied this   space but it looks like it's it's not enough so we  can do just 0.1 and let's see let's see the space okay yeah 0.2 is much better okay okay well after  this we could take a look at one more time our   rich text i think we should explain more over here  the rich text is like this so if you want to have   a line and if you want to part of it  you want to design bit differently   then you can use rich text okay so instead of  creating them in a row you can do that in a rich   text and all it does is take text span  and children okay so within the first   text span you would mention the first part  of your text and whatever you want to design   differently later you can mention that in a uh in  in the list of children okay and which also takes   a text span but of course text span is usually  um uh it takes another property which is called   text okay so each of the text span would take a  text property anyway so now we'll go ahead and   create another page which we'll call sign in page  okay so let's go ahead and do it and we do sign   or sign up page dot dart okay now over here i'll  create let's see another stateless widget i guess   okay so here it would be a stateless  widget and i'll call it sign up   page and here for now we'll return  say scaffold okay perfect be like   this with a bit difference like we have  a profile photo otherwise this button and   this few tabs for signing up using different  method anyway well for this layout actually first   what i'll do i'll go ahead and copy everything  from the login page and i'll put it right there   okay all right well they might have some error  but it will take care of this error slowly but   as you can see these arrows are coming from like  within height basically which we didn't declare   at the top so what i'll do from here i'll be  copying them okay of course you can minimize this   window and we'll put them at the top and hopefully  the arrow should be gone yeah the error is gone   well so the height so far stays the  same but now we need to change the image   uh so previously for login page we are  using this image but here the image is   a bit different so let's take a look so this is  the sign up image we want to use and that that   is that is a different image so the image name  is sign up image so i'll go here and change it sign up image all right okay and rest part  over here actually for now i'll comment out   okay so that we can work slowly one by  one on other issues first so let's see okay we do have an error expected to find let's  see okay maybe i forgot to comment it out anyway   so now here if you run it all before we go ahead  and run it we need to change here to sign up page okay and i think we need to import the file okay well here we are this is our sign  up page and as you can see from the   signup page design we also need a profile  photo like this so let's come over here   now for this one we can put as  a child this profile photo okay   uh so what we'll do i'll go ahead and declare  child over here and i'll do it within column   why because there is an empty space so this would  be part of the column so column will have children   empty space and the profile photo okay so we'll do  children over here and over here we'll do size box okay and we'll do height now once again  we want to get dynamic height sorry   so we have this h over here so  h dot h multiplied by say 0.18 so that's what we want so most probably this is  pretty much this height but we'll change it or   adjust it later if necessary and then we want  to show this image okay now this one we want   to show as a circle avatar okay so color water  takes a radius radius of the image so we want to   pretty much say 30 we'll see 30 is a little low  though okay now it also takes a background image   okay now over here the image takes  asset image and asset image takes   an image path so we'll mention the image  path and the image name is profile image let's yeah profile.png so profile profile.png  okay uh okay now we'll go ahead and run it and see   the result um so it's there okay i think uh  she could be a bit bigger so radius said try 50   yes it's uh much better even a little bit  bigger okay if it's too big it goes out of this   with over here now i think we can just  over here okay because it's pretty much   one third of this whole screen right whole  screen so one third is i think up to here so   it goes more than that so it throws an error  so you can adjust any of them so we can we   we want to adjust this one let's see if  the error goes away or not he has a perfect   it went away and now she does have a blue  background that's coming from the default   background of circular butter we can change it you  change it to background color do colors dot gray and would do grape 500 let's see or  like try to do white maybe this one okay super pretty much like that okay all right  so this part is we are cool with this part   and now what we'll do we'll go ahead  and open up this section over here okay well the first container container has  two text okay but if you see in our design   we don't have any text over here so we can skip  that but we do have text down there okay so   for from here we can skip the text okay size  box we can still keep there and now over here   sized box has a text field from the design we know  that we need a text field so we'll keep this this   text field so it has a two text field so this one  this container is the first text field this is the   second text field okay all right and so we  are good so far and let's comment it out we'll save it now and run it and it will see the  result and we do have a bit of error looked like   we had an error can't find the matching  text span like that okay now let's see okay most probably because of this  one yeah the arrow should be gone um well perfect okay um it's good so this  is almost pretty much like this one okay   but now instead of sign in we want to change  the text to sign up okay well i think this is   the button is showing this text in the child as a  center so instead of sign in we do sign up and it   should change automatically we are good and what  else uh well i think our textbook is missing one   important thing well it's missing uh hint text  over here right now we don't know where to put   the hint text like this is for um email and this  is for password so we need to tell the user this   is email and password okay so what i'll do i'll  come over here uh in this input declaration and   here there is a property called hint text  i guess yeah this one and we'll write here your email id okay and i'll put it there it  should be visible there okay all right now   another thing we can also put  here to look good we can use   icon it's called prefix icon using this property  and you'll use the icon that is shipped out of   the flutter it's default so you don't need to  import any libraries and anyway so here we'll do   email this icon okay and we can do a bit of  coloring for this so we do colors dot dip that's a   deep orange accent like this one a bit of matching  with this okay all right yeah okay perfect and   so now this two sections what we can do we will  copy this one and put it for our other text field   which is over here down there okay and instead of  email address here we do password your password i think just write email as a sorry password   instead of that and here let's  see can we get a password i can well looks like there is no direct password  icon but i think it would be visible though   let's try it okay it's right there okay so  this is for typing in password so you can   also change the text over here instead  of the long text i would just do email   and yeah so it's looking much cleaner  now so okay we are good so far   now we need to work on this one okay this  text line and these three images okay and   so we can get rid of i don't think  we need to get rid of this one   we just want to change it so change it to sign  up using well one of the following methods so let's find the text over here which is this one okay and in this  case uh let's see we don't need the   children anymore okay so we can just  remove them and over here you can write sign up using one of the following methods okay  now let's save it and see okay well it's a bit of   big so we could do 16 okay all right so it's  looking much better now okay well the next   thing we want to show this three images okay  all right and now to show these three images uh right down there this rich text we can  use another widget which is called wrap   okay well if you want to show things horizontally  one after another of course you can do for loop   but you can also do another one which is called  wrap okay so let's learn different things not   always use the for loop to do that in a row  we can do for loop in a row to do that for   loop and a row layout together but here we're  going to use wrap with list okay now wrap text   children if you hover over on it let's see sorry  okay children okay and it takes a widget as a list   so that also means you can define your custom  widget okay so that's what we would be doing so now let's go ahead here we'll write   children okay now we don't need  this one because we're gonna   specifically mention list if you do that you don't  need this thing okay because this is also a list anyway so we do list and we saw it text widget but now it has another property or method i think  that's called generate okay yeah like that okay   now within generate let's see let's generate it  takes length and the other one is another function   actually so which should return a widget from here  as you can see okay so uh now we first do return   okay yeah now what do we want to return we want  to return a circle over circle oh i'm sorry   uh it takes actually a few  things first length and then this   function okay so now the length is so far  would use three okay now it takes a function   uh but the function also has a parameter that  you need to supply this end so they are the same   this one and this one kind of the same so what  we could do we can use it as index over here   okay now you can return the function okay and  the error should be gone now what do we want to   return we want to return circle over here circle  over while you're doing circular because we want   our image to be circle like this okay the error  is gone so once again list generate takes index   and another function the function itself also  takes a parameter okay because this one will   use to look through it okay we'll see how we  do that okay now earlier in our project we have   seen that we have these three images f g and t  f for facebook g for google t for twitter okay   so we want to show this images now to do  that we can go at the top and over here   let's see we can define our list at the top okay now over here we'll define our list okay so   we'll call list images and like this okay  and over here the first one say g dot png   second one is t dot png third one is f dot png  and just put the semicolon you should be good   to go now come over here now we'll go through  this list over here anyway first we do circle   over to text radius which we already saw let's use  a 30 for now and then i think 25 would be better   okay and now background image okay all right now  background image takes asset image we already saw   now within it we'll look through our list  okay now the images are in img folder   plus here we could do images and index okay  let's see yeah the arrow should be gone   so the first thing you could do go ahead and  run it and see whether it shows up or not   yes it did but they're too close to each  other right yeah uh that will take care of   the later but we also want to apply a bit  of border with them okay a bit of border   so now let's go ahead and apply  the border but how to do that   now we can wrap this circle over here  using another circle over here okay circle over here and that would be that will  also have a radius a radius of 30. now that will   have a background color and we'd use say a bit of  white background color so this one now let's see it's not obvious so let's try with gray as 500   yes like that okay so this is the background  color we have now so this one is sitting inside   this one and you see this one has a lower radius  smaller radius this is bigger radius so that's   why we are able to see that there is a radius  actually that's the bigger background that's all   anyway now we need to put a padding around them  because now they're too close to each other   so over here we'll wrap it around  another widget and we'll call it padding   and over here padding say const add insets all  and 10.0 um yes i think that's that's it that's   pretty much it okay yeah so that's our sign up  page okay yeah now this page we also need to   use we need to build another page for say welcome  page once the user sign up okay so that's what we   want to do for that one so we'll go over here  and right here welcome page dot dart okay now okay first let's create a stateless  widget and we'll call it welcome page okay   and earlier we have built this page sign  up and actually a lot of them we can copy okay uh so in fact the whole scaffold and  this thing we can copy all right all of them   and the part we don't need we'll just remove them okay uh let's see we do have two returns we  don't need that it might ask you to import some   libraries go ahead and do it and the arrow should  be gone and we also need the library material   okay perfect uh so but over here definitely in  welcome page we don't need the wrap okay and   we also didn't need this one because this  is the text form filled as we oh i'm sorry   not this one though this is the sign up so we  we need this one let's we don't need this one   because this one has a text field so welcome  page for now will not have any text fill   so we'll remove that one okay so now  we'll come over here and do the test   okay so here we do wall come page okay and import  it so now let's go ahead and run it let's see   so yeah that's it so for now uh  definitely we also need to take care   some of the issues here we want to put a text  at the top okay i mean before sign up but okay   it's a bit ugly i mean we don't want to say  sign up we want to say sign out okay or log out sign out is better i guess okay perfect and rich text we also don't  need this section for now   so we'll get rid of that one so what can we do  over here over here we'll just have two sections   uh so we want to say a welcome message and  user's email id the id they used to log in okay   and as well as the password field but in this part  of this tutorial will not do the password because   in future we'll see how to change the password  from here okay those are the things we'll see   anyway so now let's go ahead and take a look at  this one um here we want to put a text right okay and so the text would do is welcome okay all right and we also want to style  it so we do style text style font size say 36 and font weight it's font  weight dot bold okay and what else color colors dot um black 54 not too black okay now let's  see we have an error because i guess we   are missing a comma here now error  should be gone okay it's right there   uh but definitely we need to take care of a lot of  other things anyway so here this is the first text   okay and we should also have another text for  showing the user's email id whatever the id   they use to log in for now i'll hard code it and  soon we'll see how to change this one dynamically   and of course you don't want so big and you also  don't want it bold and you want it to gray 500 okay right so now we need to take care of the  layout issue to do that we want to put them   here actually okay now unless you put them inside  container it's very difficult to put them here so   we'll wrap them around uh in a container  but now this two should also in a container   we can't really put two of them together so  first we need to wrap them around i guess um   column widget okay and then column should  be wrapped inside a container okay so i'll   cut them and here i will declare a column okay  which takes children and i'll put two of them okay all right now let's put there of course  it doesn't change anything though yeah but now   this column what i can do i can wrap it around a  container and over here i can assign margin to it   add inserts only for now just left side 20. okay  all right uh but it still doesn't work okay so   now why it didn't work like this so over here  we can apply cross access alignment on dot start   okay yeah so that's it and now over here let's see the another issue we can we need to take care of  this height okay now sorry the width so that is   which is w okay so with w now it's working okay  so you need this few things to work on this thing   okay so now that's our button and  it's too close to the top button   so here we could do sized box  so we do here height and say 100 okay perfect uh i think a little little   bit down would be better okay i know in future  we'll put more more more properties here okay yeah   so that it looks better like password name but uh  in this part of this tutorial i'll not cover them   it'll be covered in next tutorial so we have  these three pages now okay yeah so one thing   i want to do before i finish this tutorial  i want to connect the these three pages okay   so how to do that uh so for that we need to  install a package we'll install a package so to do that come over here and we'll use  galax package one more time so just write here   get as for state management if you don't know  what it does check out my other tutorials okay so it's installing down there okay installing is done and now  we'll come to our main page over here   so we want to turn it to a get x app  over here we'll just add a keyword get   and with this it'll turn into a get app more like  that i mean you can use get x package with this   and we need to import the package as well and now  the error should be gone okay now over here our   welcome page we don't want welcome page anymore we  want a login page okay let's go ahead and run it okay so first definitely we also  need to take care of these two things   like for sign up page right in our  sign up page we have this um let's see this icon thing like that okay  and hint text for now it's missing   so we'll come over here our login page and over  here we'll find the container and within it   we'll put our this style and over here all right  okay email is okay email yes and we have another   text field so over here within this one  and we'll write here password and password let's see okay perfect all right so that thing  has been taken care of now we want to click on   this and go to the sign up page okay yeah that's  what we want to do before we finish this tutorial   so where is it it is in our rich text over here  okay now how to do that well you can't have a   gesture detector around it i guess so especially  over here but now text span i think has a property   let's see gesture recognizer this  one okay recognizer we'll use this   property to go to a new page okay we  do recognizer and i think it takes near tap what is it let's see tab gesture recognizer this one okay  yeah so using this one we'll get a   prop function which is called on tape so using  double dates uh double dots saves you to rewrite   and create an object and get the property  so it's more like object oriented thing   anyway so now over here so it takes as you  can see it is a function okay so on tap is a   function so that's why we're writing like this  and we just want to write one line of course   you could also do like this it's the same  thing okay but it looks cleaner like this and over here we'll mention our  navigation where we want to go   we want to go to our page which  page we want to go to sign up page of course we need to import this  package sign up library and this one   uh but we can import the whole package at the top this one and now the arrow should be gone yeah it  is it is gone so over here so we are passing we   are using get 0.2 to go to a new page okay all  right so now let's run it and see what happens okay of course if you click  over here nothing will happen   okay because it's not clickable  yet but this is clickable okay yeah so now we can come over here but now the sign up  page has one problem the problem is you can't go   back once you come over here okay uh so there is a  way should we go back to the front page but we can   add app bar but if we do that it will mess up in  the layout okay so we could do we can just put a   text over here which will say have an account okay  and then if someone press on that it'll go back to   the earlier page okay so that's what we can do um  so find this place which is called sign up so i'll   do s i g n up okay so this one over here this  is the sign of text right okay so right below it   over here i want to put a  text okay so we do reach text okay and it takes text and text span okay and over here we'll type oh it takes another  text properly have an account like this okay   so now this one and just a bit  of style with this text style   okay now over here we'll do font size  20 and the color colors dot gray 500   all right okay now using this one we don't  need to i mean over here we can just do sorry we can do recognizer this one and  tap gesture recognizer i guess this one   just now just like that on tap so we want to go back to the  previous page okay all right so we do get dot back and we should be good to go all  right now let's see it and we have also an   error just because here okay all right i have  an account so of course this is clickable and maybe a bit of distance would be good so the  size box over here size box height said 10 pixel   okay perfect and have an account so you click  on this it'll take you the earlier page okay you   don't have an account you can come over here  and try to create one okay well this was the   first part of this tutorial in next part we'll  see how to use firebase login authentication   uh and a lot more definitely down the road we'll  create our user center and from the user center   you'd be able to do some crowd operations okay  that's what we'd be doing okay see you soon

Channel: dbestech

Views: 107,689

Keywords: flutter firebase, flutter firebase auth, firebase tutorial, flutter firebase crud, flutter statemanagement, flutter tutorials for beginners, flutter authentication, flutter app developement, flutter login page, flutter login ui, flutter signup and login

Id: o_ZeLqpqt90

Length: 66min 24sec (3984 seconds)

Published: Mon Nov 01 2021