Flutter Login Page with background image

hey everyone in this video i'm going to show how to design this login page in flutter here i have a flutter demo project inside it i have imported a image file inside assets folder i will be using this image as background image for our login page in popspace ml file i will specify the image location inside our set section i have imported two dependencies font awesome flutter and google fonts you can download this project starter files from github i have provided the links in description ok let's start first start debugging change material app title to flutter login page then let's remove these commands delete my home page widget material app home will written a login page widget which i am going to create in few seconds to change the default font i am going to add a text theme and add google fonts text theme to its value now let's move on to creating login page widget create a new folder called screens inside it create a new file called login page dot dot in login page create a stateless widget and add login page as the name import material.file to fix the errors now come back to main dot dot file and import login page dot dot file first let's create the background image inside login page widget container add a decoration property add a box decreasing widget box decoration widget will take a image property add decoration image widget inside decoration image add image property and image property will take asset image widget asset image will take image location a string hit save to make the image appear full screen add fit property and assign box fit dot cover as a value to make the image darker add color filter widget curve filter takes two arguments a color and a blend mode for color i'm using black with 45 opacity and for the blend mode there are multiple blend modes available to choose from i am going to use darken blend mode now we need to make the bottom screen full black in order to do that we need to use a widget called shader mask wrap the background image container inside a widget rename it to shader mask shader mask requires a shader callback function inside shader callback function add linear gradient linear gradient requires the colors list property inside linear gradient add colors property for the first color i am going to use black for the second one i am going to use black with 12 percent opacity then specify gradients starting and ending position to convert linear gradient into a shader add create shader method after linear gradients closing parenthesis and change its inputs value to bounce now if i hit save the entire screen turns black in order to fix this we need to blend the shader with background to do that add a blend mode property assign blend mode darken to its value to make the code easy to manage let's refactor shader mask widget give it a name called background image to the new widget cut the background image widget we are going to paste it in a new file inside lib folder create a new folder called widgets inside widgets create a new file called widgets dot dot create one more file with the name backgroundimage.dart inside it paste the background image widget code import material.file to fix the errors inside widgets file add export command export background image dot dot file by adding its file name to fix the background image is not defined error import widgets.dot file wrap background image inside a column and change its name to stack inside stack after background image create scaffold widget if you hit save you will notice that the screen turns white that's because scaffold is on top of background image and we are seeing the scaffold's default background color to fix it we need to change scaffold's background color to transparent add body property and assign a column object inside column let's create the heading widget add a text widget text takes a string value to change the text color and font size we need to assign a textile property to the stream we can do that after the text shrink value but i'm going to create the textiles in a new file called palette dot dot create a const it's going to be a text style i am giving it a name k heading text style font size is going to be 60 and font weight will be bold and add color as white import material library to fix name not defined error come back to login page dot dot add style property after adding text and add the textile name now our heading text is blocked by android status bar in order to fix it wrap the first column widget inside a safe area widget now we need to position our heading text in center like shown in the example wrap text widget with a center widget then wrap center widget with a container add height property assign 150 to its value now we need to create this empty space after container add a sized box feature size box widget will have a height value of 100 let's move on to creating the input fields create a container the container's child will be a column widget inside column add another container this container will have text field as child here we have a basic text field let's customize it inside container add a decoration property add color property to box decoration widget i am going to use gray 600 with 0.5 opacity also add circular border radius with a value of 16. inside text field add a decoration property add input decoration first let's remove the blue color border by defining border property with a value of input border none add a hint text property i am giving it a string value email next add hinge style i am giving k body text as its name there is no text style with this name i am going to create one in the next step inside palette file i am copying heading constant rename it to k body text change font size to 22 remove font weight and keep color as white now to create that email icon add a prefix icon property prefix icon will take your icon widget inside icon call font awesome icon solid envelope give it white color and size 30 now we need to give some padding to the text field contents to do that add content padding property add edge inserts symmetric vertical 20 let's add padding to the email icon as well wrap email icon with a padding widget i am giving 18 sets symmetric value let's add a horizontal padding of 20. let's add padding to the left and right side for the input fields come back to the top container add padding property edge inserts symmetric horizontal 20 all right now we need to add few more properties to the email input field after input degradation add a style property add k body text constant file to its value next add keyboard type property it will take text input type dot email address as value after that add text input action property it will take text input action dot next as value okay let's test the email field as you can see keyboard layout have a symbol to type email addresses it also have a next button to move on to the next text field let's move on to creating the password field i am going to copy paste email input container we need to add padding between each text field let's wrap container with a padding object add symmetrical padding and give its vertical value to 12. next refactor email input as a widget i am giving its name as text input for customizing and using this widget in the future i am going to add a few final properties icon data is for the prefix icon data type string for hint text text input type to change keyboard layout and finally input action next create constructors make icon and hint as a result parameter let's add those parameter data types to the class let's add required input properties to the text input widget delete the duplicate email input container i am going to copy paste text input container and customize it to create a password input field rename the second text input widget to password input copy text input class and paste it below change its class name and constructor name to parcel input okay now let's customize password input widget change icon to log hint text is going to be password since the input is going to be password we don't actually need a specific keyboard layout so i'm going to remove keyboard type change input action to done when typing password we want to hide the password text to do that we have to add a new property add obscure text after input decoration hit save since we are not using input type parameter i am going to remove it delete the constructor as well now let's add this forget password text before that let's move text input classes to widgets folder inside widgets create a new file called password input dot dot paste the code import palette file also import material library cut text input class and do the same for text input class as well then go to widgets file and export those to widget pages that we just created after passing input create a text widget add for that password to its value add textile body text now target password text is aligned in the center of the screen in our example it was aligned at the right side of the screen so to adjust the alignment go to column add cross axis alignment property then add cross axis alignment dot end all right now let's do the login button wrap our input fields column inside a new column after input fields column create a new column add a container as children of that column and the container will have flat button as the child and flat button child is a text with a name login flat button requires a unpressed property let's add that as well add k body text textile to the text login now let's move on to customizing the login button inside container add a decoration property decoration will have a box decoration widget inside box decoration add color give colors dot blue as its value next add border radius i am giving bar radius value as 16. to make the button take full width add width property to the container and give it a value of double dot infinity let's add padding to the login textview eject it's going to be a symmetric padding i am giving a vertical padding of 16 let's add space in between forgot password and login button add size to box and assign its height value to 100 now that is done let's move on to creating the final object of this login screen create new account text before doing that let's refactor login button as a widget i am giving it the name rounded button let's add a string property with a name button text add constructor fields as well replace string value with the property name add input values for rounded button user let's make the button text property required field cut rounded button class create a new file called rounded button and paste the code inside it also export the rounded button page after rounded button user add a sized box widget to create spacing give size box a height of 80. after sized box add a container and the container will have a text widget as its child add create new account as the text value to create the border at bottom add decoration property for the container add box decoration widget inside it add border property then add a border widget add a bottom property then add border side define color property with a value colors dot white and add a width of 1. to fix this overflow error we need to wrap all of our widgets inside a widget called single child scroll view ok that fixed it let's add space into the bottom okay let's test by adding some random names all right that's it for this video if you like this video click like and if you want to see more videos like this consider subscribing thank you for watching you

Channel: Tony David

Views: 46,314

Keywords: flutter, dart, flutter ui, flutter login, flutter login ui, flutter login page, flutter login ui templates, flutter app design, mobile app, dart programming, flutter login page with background image, loginscreen, flutter login page example, flutter login form, flutter background image

Id: oJonKn6vYts

Length: 32min 6sec (1926 seconds)

Published: Wed Nov 11 2020