Flutter Create Beautiful Animated Login Page For Android & iOS From Scratch | Beginners

hey guys welcome back to my flutter videos again I'm very happy to see you guys again and believe me from some days I have all wanted to make these videos and because one of the very good news which I'm gonna tell you is that further is now in beta so we are expecting a stable wasn't very soon and we will get it after a few weeks or after a few months so that is totally depend on Google but we are gonna receive this table wasn't very soon but still still if we haven't got the stable version but still we are in beta and that is working perfectly fine so there's no need to wait for you now for coming the flood or person into the stable stage we can do the coding just right now and when I made some videos on you know flora in Hindi language so they were few males which was saying that you should make these videos in English or any other languages well so what i thought that if i will make some videos in english then it will be easy for everyone to understand because this language can be learned by anyone and everybody almost knows this language and as i am Indian so it will be better for an Indian to understand my pronunciation then some other English guys so that's it why I am making this video in English and what this video is all about let me tell you so we will making a login page which is quite you know necessary for every other application you can find this page in almost every application and though I want to show you the beauty of Florida and that is why I need to make sure that this application should look fantastic and we will also add animation to this so let me show you what kind of application we are making and what how it will look so basically we are just making the user interface till right now but how it should look let me just show you so this is how our application is gonna look that means just assume it little more so here there is a screen there is a lady behind this you know this login stuff and there's a logo which you can replace by your own logo so it is an email and a password than a login button so this is actually cool and you don't have to use these icons you can change it so let's just start with it we will create another project our first project let's say and because we I have already created a project or more than a project but we will start from scratch because there can be some guy which is watching this video randomly so let's create our first app what flutter app so let's let me go to my desktop and and let's go to dart then I will move to mob tile here we are and I'll create flutter up here so what we can write product create and our name of the app will be login app and guys one more thing you can find this a source code on github and I have provided you the link in the description from where you can access the source code of this application and apart from that one more thing is this I am using Visual Studio code you can use any other ID like you can use IntelliJ you can use the Android studio or you can use the Visual Studio code I used almost all of them but this one is quite good why because it it actually not reduces your time it is not as you know as helpful like IntelliJ or Android studio but it still I like it because I have to write code here which intelligent to do for me and I don't want it to do for me so this will give more productivity to me and it is fast it is fast because it does not you know I use all those resources intelligent notice to do uses because I don't want tell those resources so this is good so we have created our first app let's go to our app by going to CD space login app and we are into the app directory right now let's run this application so we will write flutter run and whichever emulator is connected to this or any phone that will start or if you have multiple devices then it will show which device you want to select so I have one iPhone 8 emulator iPhone 8 plus emulator connected to my laptop and it will run the application on that particular device so let me just pop up the show the device to you so there it is my stimulator and let me just have some space for it so I have some space for it right now so here I can see our app is running Florida mohanam pages disk and let's open this folder so we can so we have this ok we are into so this is our directory we have android folder built folder is live test and i'll explain all of this in my other flutter video i'm gonna make more lot of videos but for the time being you have to just do remember that you have to write almost all of your food in this live folder so we're on there is a one class which is main dot tart and here we will write our code for the first time then we will move to some other classes and everything will be done later on but right now what we care about is this main dot dot and if you don't know the dart language then please let me know i'll make some videos on dart language too but if you are familiar with Java C sharp or C++ then I think that it were it will be very use useful and it will be very easy to understand if you are familiar with any object oriented programming language then it is gonna be very easy for you to understand our language and understand flowed up because I'm gonna explain you so this is there's a lot of stuff going on and maybe you know about this maybe you don't know about this so let's see what this application is actually doing right now so if I press this plus button so it will increase this counter that is what it is happening here but I don't want to do this I want to make a login page and that is what I will do so let's just scrap all the code oh my god everything is deleted and now I don't have anything to do so let's start getting our first login page app from this scratch so here we have lot of stuff here we have this main dot dot where we will write all of our flutter board and this is folder is related to all the highest kind of stuff native stuff and the same for Android and this build method will create all the you know apk is and everything and here we have get ignore from gate and that is available there so we have this pub spec dot EML which we will which will be needed for us so here we can read that it is saying the name of the application it is saying the description of the application it has some dependencies which is which this project is using so it has flutter SDK which is quite understood and there it has two Patino icons package which gives us the icons for iOS then we have these dependencies like we have this SDK for testing our applications of Florin test and we can add more as the case here and below that we have or this flag which says uses material design which is true so we can use more flex here and below that we have something here which is saying if you want to assets any kind of vessels like images then you have to uncomment this code and we will just move to this and below that if you have like how can we you know our define our custom fonts in our application so we will also talk about this later but we have to you know we have to add an image of a girl and girl she was a girl right yeah she's a girl in the background which we want to you so we need to use this particular code so that's why I'm telling you all about this stuff so let's just close it and move to mean dot dot let's start creating our first application without any delay because there is almost of two or three four minutes delay so wow we will do it we will import the flood of material design library first so I will write package call and flutter slash material material dot dot okay so we have imported this now we will write our main method which is the starting point for this application so what main is will be everywhere whenever you will make the floral application and here I will say run app which is a matter for running our application and here I will I'll make an instance of my application which is my app and this my app still doesn't exist so this is what we have to write and it is saying that it is giving me actually some kind of error because we haven't created this my app class so let's create it so I write class my app which extends extends stateless widget okay so what is the strict list widget so if you don't know that let me tell you the flora is full of widgets okay everything in Florida is widget let's go whenever we talk about application we say that everything is view Sohail everything is widget and they are mostly two kind of widgets first one is stateless widget and second one is stateful so as the name suggests stateless widget which don't have any state and stateful visit which have some states like we can say it like one is a dynamic website one is a static website so static website is basically stateless widget and a dynamic website is a stateful fidget and that example can be like there is an image right and if that image is not moving then it is a stateless widget if there is nothing happening nothing happening on the runtime like if I press something then some tax changes then it is not the state s it has some states and that means that is a stateful so we will come to this so like like in this screen you can see that there's no state full this text will be like this always this counter will definitely change so that is stateful so we will talk about this this is also a widget so let's start with stateless widget so we have to override one method when we extend this class so let's override it so we will write overwrite okay we will say widget period so this is the name of the method period which we are overriding this already been written in stateless widget but we will do some changes here so that's why we are over any so overriding is a method is like this method is already in stateless widget but we want to make something custom for us so where we are overriding this method yeah that means that we are using this method as key okay someone has already written it but we want to write it in a better way let's say it better be because this is our way and our way is always a better way okay so we have our I did this method this method accepts of widget okay this is the return type and it says that this function declares the return type of widget so it expects a widget when when whenever I am overriding this then it is saying me that you need to give me a widget back if you were gonna overwrite this so let's give it so we will say return new new is useful you're not creating new instance so let's say or you can say object so let's say material app okay so what this material app all about it is saying that we are getting the material app okay so because we will deal with material application only because this is something very beautiful in today's life so here what we can do we can say we have a home okay what's that home we can say new login page that is for that home for us but we don't have this login page so we will move to that as well but before that let's set a theme for this and let's see our theme is new theme data and here we can say primary switch and that can be color dot which column we should give it blue okay blue so this is what we have to write now this home is our home screen or you can say the front screen which will be visible and we have declared this as an object of third login page and login pages a class and that class is not yet created so we need to create it first so let's say our class login page now I want to add image here and I want to add some animation here as well animation is always stateful so we will extend a stateful class for this so stateful sorry statehood widget not a class okay so it is a class but we are talking about stateful widget okay so we have this extended now we need to to something more than stateless so earlier we overrated this matter and this time we will override another matter for this stateful so what we will overwrite we will write over right over right and the matter is sorry state it will return state and I'll sit create state is the matter name and here this is the lambda expression which is the shortcut kind of you know in anonymous function this is how you write and you know anonymous function so here I say that the I will make another state class which is login page state which will have all the states okay so that is what we have to do in this class nothing else okay so we have a login page class which is basically extend stateful visit and here we are overriding a method created state which actually tells that we are making a state class which is long in state page or long Penn State class so Matt let's make it login page state which extends state oh and here we will cue the like whatever it will be it will be login page okay so we have to write few lines of code but it's worth it okay so we have this thing right in here you don't need to write this okay so we have this class login page state which extend state now we have to override another matter but it will be the similar method which we override it in the stateless widget so widget build will say build context we will pass the context so that is why we are using as a parameter here now let's return new scaffold so what is that step we can use material or anything so scared world is basically structure which is provided by Android - you know declare something like a bar whatever you want to have so we want to have body from here everything is needed for some other screen but for us let's just use a background color which will be like color star which color we want oh you want let's say black color okay background should be black we don't actually care when we will use the image we won't care about this but let's see and we need a body for this which will be let's say new container okay and that's it so we don't have to do anything apart from this and this is our structure done and now you must be wondering we have written a lot of code but once you will be familiar with this this will not look like a lot of code so this is what we have to do before proceeding let's run this app once so that we can understand whether we have done it right or not and how this is working so let's move to a terminal let's run this app by saying flutter underscore run and let's press Enter it should run that right and it rained that and there's nothing on the page because we haven't defined anything right now we have this background as black so let's change it by saying background is green except okay and here I can press the small R and it will hot reload and it is you can see this changed my UI to green accent and this is what we have to do now we have to make a similar page to this and you can see I have this background and over it we have something like these icons and than these text inputs and then a button so there are basically two kind of you know there's one layout and on that there is another layout so that is overlapping each other so there are two layouts which are over lapping each other so here in our body we will say that this is a new not container let's call it a stack okay because we have a stack that's cool right so our stack takes some properties like it has a children and it has a fit it has key and blah blah blah so let's use its children which is a list and here in the list our first thing will be the image right we want that image we want it very badly so what we can do so I have that image with me and you can download any image you don't have to use my image only let's use it but so as a new image okay here what I can say I can say that is this image will be new asset image yes that is how we will use it and now we have to pass the asset name here but before that let's create another folder here which will do named assets and in this asset I can add that image which we want to displace so I will come here I can have this image and here is image let's copy it oh we have this image now okay so this is the image of that curve ball dot JPEG images this and now what I have to do I have to go to this pub spec dot EML and I have to add that image here so I just uncomment this these three lines let's uncomment it let's comment the last line and here I can see assets /good dot jpg so this is my images we can say directory assets and then this is the name of my image so we have added it now we have to define that same thing here as it's less jpg oh sorry curl dot G back okay so we have this image now now we have to say what's a sweet okay sweet will be like box fit box with dart it should it should cover yeah it should cover okay so it should cover the entire screen that is why we are saying box should cover we can use another one like scale down or something like that and here you can see how it will look so box would cover will be like not covering all the aspects like it can be horizontal vertical or both so depends on our screen layout how we are using it next we will use this color okay so let's give it a color you might be wondering why because we don't want to let that's before moving to that let's split it okay that that will make it more clear so that is why I just really reloaded oh here we have this image okay but it is not expanding so if we in this stack we have a property which is safe fit and this fit is basically a stack fit so we can say stack fit dot expand okay so it will expand the stack for this field so it should cover the entire body now so let's reload it again and here you can see so it is showing that image of a curl and remember one thing more that this big size should be small there our dimension should be small so does not you know make make your screen hang or something like that because of the memory consumption so that is what we wanted to do and now let's compare it with our picture so this is very dark and it has you know black overlay so what we can do here we will move to color and we can assign a black color to this and we have so much black colors here with its opacity so we have this black 87 with 87 percent opacity we will use this and apart from that we will use this blend mode and what it is it is a plan mode so we will select blend mode if you have used Photoshop or CSS then there is something like this and we will say darken okay now let's just refresh it and cool this is what we wanted right if you watch them closely then this is exactly same so one task is done we have this now this is tagged have lots of children so first children has been made this new image now let's make another children which will be another Lee another widget which will be which will reside on top of this so let's call it new column maybe okay so we have a column now and we have some properties for the column like it has also a list of children so it has a logo first of all it will have an input field it will have our login button as well so let's add let's say input field and before that let's add a logo first so I say new flutter logo you can add another logo you can use any image on whatever you want okay so we have this flutter logo and see it sites okay its size should be around like 88 able to be fine so let's just reload it and we have this logo but on the top and roof you don't want it on the top you want it in somewhere in the center or the whole layout should be in the center because if we look into this picture then we have this layout and somewhere between this you know I screen so let's just make it big 100 and just to move it to the center by using this property of column which is the main axis alignment and main axis alignment is basically the vertical alignment because for column main axis is vertical y-axis okay so here we will stay main axis alignment dot Center and now let's just reload it and it moved to the center and it is quite people so this is what we wanted now we want to have some kind of animation with this so for that we have to write some code again so let's move to here before overriding this method we had this login page now here that's period our animation controller which let's name it animation controller and we can write it like I can animation controller because we will animate this icon okay and we will have an animation so controller will help us an animating that and we should have an animation which will be a double value and we can say it icon animation okay that is fine now we will to you we will use a mix in here which is kind of functionality which we will give a class and we will talk it about later in some other video but let's mix it with single ticker provide estate mixing so we have a single ticker provider state mixing or we have a ticker provider state or state mixing so what's the different when we use a single ticker probiotics in then we will define only one animation controller and we have if we have multiple animation controller then we can use ticker provided state mission okay so we have to kind of mix in and this is what we have right now now let's make let's override another method which is override and the method is in its table which is basically the initial state when this widget will be created so in this initial State let's first call it super method and then let's let's what we can say let's create the instances for the animation controller and the animation so first we will create an and instance for animation controller so it is let's say two new animation controller and here in the constructor we have to say this missing and we will say this so what this missing to is left so it is saying that that it will creates an animation controller and it will have a value and duration debug level etc etc so you have to just provide that where you will apply this animation controller and this is for the current context so that is why I have written this now we have to declare the figuration as well so how much time is this animation for so let's say new duration and let's give it a time in milliseconds we have a lot of stuff here today is our source except etc so in milliseconds we can write 500 okay whoo that is the all all we have to do for animation controller now let's transfer I can animation curve animation so we have a lot of animation like we in curve so we are using curved animation for this tutorial and it accepts a curve and a parent so for parent we will say I can animation controller is the parent I know for the curve we have so much curves like we have these kind of animations already built in so we can use bounce out maybe okay we can try other as well so we have all this stuff already now we need to add a listener who will listen to all this changes so this one's out what you do let's see it's graph so I have this bounce out which is a graph which is is saying that it has a graph from 0 to 1 and you can see how it is fluctuating so this when there will be changes in 0 to 1 so this will happen somewhere okay so that is why we need the listener which will change the state of this animation so we can say I can animation dot add listener and here we will define a method and I will say this dot set is state and in this state what we will do we will basically do nothing but actually it in this state something is happening and what is that that something is that on whenever this animation will change its value from 0 to 1 in this state okay so this is what we are doing now we have to tell the animation controller to do the animation by calling forward this is what we are going to do and this forward is that start running this animation forwards to the end okay so towards the end we want to run this animation so that is what we have to do here and now we've been used in at this animation with this image so we have this ego sorry this flutter logo and the size is 100 so let's don't use the size of 100 apart from this let's use the icon animation dot value okay so whatever a value will it have like it will have a value from 0 to 1 okay that's all the value it can have and let's say it has a value right now 0.5 then the size will be 0.5 but we don't want that small size we want the size to fluctuate to give us the animation so let's multiply it by a hundred so if the value will be 0.5 then the size will be 50 and if the value is 1 then the size will be 100 every value is 0 the other size will be 0 so that is how we will give this animation and now let's run this application from d4 let's do a full start so I will press shift our and it will so here you can see the animation did you see it let's run it again and just focus here and here was the animation so it was not that quick let's let's change it to something else like apart from bounce out let's say ease out okay let's run this application at cane and you can see this is little bit fast not that much but because they are using the emulator maybe there can be issues but this is what can find of it so we have this animation less then you reduce its time to 300 millisecond and let's see again how it reacts and it reacts good so 500 is a decent amount of time so this is what we did we have this flutter level now we need some text to input like email and we want password as well and we want a button so below this flood our logo let's do one thing let's add some you know let's add a form for all the inputs so but we can say here let's make a new form so basically form is for no giving the auto validate kind of stuff and everything which we needed in a farm when we have multiple input fields so we will use this form widget so we have we are not doing any right now so we have a child let's say which can be text form field okay so here we will declare the text field so here what we can see use is like decoration yeah so we have a decoration so we will say new input decoration okay here we can say the hint text would be what will be the text and email okay okay fine now oh sorry up outside this we can have the keyboard type so keyboard type would be it will be input text input type dot email address okay so this will be our keyword five we have this form field now let's copy this and paste it again oh sorry we should this form is a child right so we have this oh so we just just cut it and here that's in the child let's add a column so that we can have multiple values okay that would be good rather than having you know all the different different forms we should have only single form now in the children what we can have we can paste it here and let's remove this child and now we have the same code here but in the form we have a column in the column we have a children widget where first one is the text one field where we have the email address now let's copy this text one field and paste it again for the password just we will change the hint type to enter password in text to enter password and input type to text now we also want to of security texts and we will say true so it will off secure the text by not showing it when while writing it will show the dot dot and the star star okay so either they don't total starter we will say so let's just run this application wants to see what happened and something happened some fields are still there but they are not visible exactly because we are using the dark background and everything so let's do one thing what we can do here we are in for this form over this column what we can do we can wrap this column with a new widget which can be lets say wrapped with new widget and here we can wrap it with theme okay so we will wrap it with the theme widget and that's cool and theme we did have a property which is data and here we can say new theme data okay and because we have this brightness as dark so we will say brightness dot dot okay and we will say the primary swatch will be let's say color dot teal teal would be able to color okay so that is fine so let's restart the app and now we can see here we have an interim email enter password and all of these things but this is not still looking very good so what we can do here we can say that we want to have apart from this we want to have this we have this theme data now what else we can take from here is that we have this input decoration theme we can use this and hear what it expects it expects input decoration theme so let's move to the next line first of all okay so here we will say input decoration theme is equal to mu not equal to input a curation theme and here this input equation theme for text fields on this so here we can see label style is called two new text style and we can say it's color would be color color color color should be colors dot teal and the font size let's increase its font size as well so let's make it 2000 K so let's just refresh it once now also it is now doing anything much more than this okay so we have this thing right now and let's see what we had earlier so here our simulate to be half this image and here you can see this is white and this is the teal color so what we can do let's do one more thing here in the column we can say that cross accent alignment should also Center which means it should be in the center okay and let's give some padding as well apart from this so I will give some padding here so before for doing padding let's move this children move this column to a container to give patty okay so what I will do I wrap it with a new widget and I will say it container so that because I want to of padding I can use other bedding or I can use a container okay so I can use any of the widget so let's I am using the padding here and here I will say Const so if you are feeling anything like AV to understand or head anything different difficult to understand then you can always let me know let's say 40.0 and let's refresh this and now you can see we have enough space okay so this is looking nice and here we can also say that we have a label style so let's make a label as well here so we can say in text you know we have let's say it labor text rather okay not in text and similarly to this of password field let's refresh it once so that we can have a clear look and this is now looking good not able to write anything this perform of we'll start here if I can write or no I cannot write here I don't know why let's see what's the problem so let's just you know this application and restart so that I can see whether I can write or not okay so that's it we have just created this one on let's not start it right now we can add another button here so that we can have a better understanding so we did this a lot of stuff we did and you don't have to be confused about this so let's do one more thing we add some more padding here before adding our new element so here in the padding let's say I want to add only the top padding so I will say as in sex dot only top and let's say 20 dot oh okay now before below that I can use a new button let's say it will be a normal material button or you can use a raised button whatever you want so I am using a material button and for the button there will be few properties like color of the button so I am saying the color would be colors dot teal let's say ok then below that we will have a text color let's say color start white ok now we have a child here I can say it have a text and this text would be logging ok you can use the icons which I used here in this image which is taken from font awesome I will talk about that also but before that lets off we have a on pressed as well so what will happen so on pressed right now it won't do anything so let's just do it like this and now we're good to go okay and we have missed something probably and that is what it okay so this is what we have to do now let's restart it again and we have a button here okay that is looking cool as well and that include text is not taking any input so let's just what we can see we can run the application again to just make it work because it is not taking my input anymore let's run this again so we were talking about that this material button can have is having our own pressed button let's let's add some more things to this like we can have a splash color so we can add a red accent look here okay whenever we will press the button so now let's try to enter here some okay so everything is working fine everything is good till now and now let's see so this is our application right now and we have a ready splash color let's press this icon and as you can see there is flash here which is cool let's refresh it and we start this app so that we can get this logo animation as well okay something happened for sure now let's restart it again and there is a logo animation as well and it is looking pretty cool so what as we need to do so this is quite similar to this okay this is quite similar to this screen and it's looking good isn't it now only thing is that the color is a little bit different and there's a login button as well so let's give it a height first of all so let's change it to 60 first of all Oh a party and here I can say from top it should have 40 height and its height let's change its height as well so height would be around let's say 40 and width minimum width will be let us say 60 okay let's run the application again we will state always application and it has some height but that is so much let's make it hundred and now let's reload it and now it has a good height not so we don't have to change its color because hey or it is some unfamiliar color which I don't want so login is good this is good we don't need to add item or if I want where I can then what I can do rather than text you know I can add an icon like saying icon and from icons I can use ice and start any icon from here or I can use flat font awesome library to add icon so let's add an icon off for arrow some arrow right arrow maybe okay so now let's refresh it and here you can see we have an icon so we don't have to actually use it we are just using it for our happiness you can say okay so let's refresh it so this is all about it this is what we have made we have entered email we have an enter password my this emulator is not working properly somehow so that is what me if you will implement you're on you know on phone or on emulator then it will work properly and there's nothing else we have to do so this is looking good this is this has the same insector replica of this but we have this is a big screen maybe or we have some minor changes which we did and this is all about this video so the code is uploaded on the github I have provided the link in the description you can check that and this is all about flutter and this is how you can make a really good looking at UI and this is working iris and same code will work for Android as well for you can say the Android emulator as well so if you want so let's try to run this in our Android emulator so let's open intelligence or we can open Android studio and from here what I will do I'll run the Android emulator so that we can have a better look of how this application will look on Android because I want to give you something to yeah one second and let's just close it and let's open the emulator oh yeah it's ready let's load this one I don't want to run this I want to run the pixel to one and that is not working see our sound is too late for that but you know that is problem with Android studio it takes too much memory that is why it just makes some fans sound now we have this emulator the up and running now they were sound as well but believe me I don't wanted that sound at all and here my mixer devices then let's load one device and we work with pixel let's close this emulator has been on eight plus and now we will run this app on this this is all about the flutter and dart combination and have any question you can ask me until now the enumerator is running you can also post comments you are signed question and you should like this week as well because I have done a lot of for this video and this is a reader so we are making more projects on it so I want at least 50 likes from you guys so that I can have another project in the project we will make some kind of animated I have which we will ask questions and we will give answers so that is what I am looking for and here this is running one pixel UI and it is in a similar to that is one and here we see I can the name and password which I was not able to and organized and maybe that falsely and little / so this is really not it and this op secure for is visible here okay so this is what we do and let's let's split a screenshot of this because I want to show it to you so this is about this video and everything is here I go and I have to see in the next videos well this of cotton channel here on subscribe click here and like the video thank you so much bye-bye take care and this in the next video

Channel: Codepur

Views: 156,365

Keywords: flutter, introducing flutter, flutterio, ui framework, flutter widgets, build native apps, google mobile ui, widgets, firebase, firebase and flutter, expressive ui, cupertino, material design, ui, native, google, app developer, flutter sdk, dart, android, app, mtechviral, flutter tutorial, create login page, create signup, flutter tutorials, flutter google, flutter app tutorial, flutter app, dart tutorial, flutter app demo, cross platform flutter, flutter and dart, google flutter

Id: iYH2jzUM1Nc

Length: 54min 17sec (3257 seconds)

Published: Fri Mar 02 2018