Flutter & Firebase App Tutorial #14 - Text Input Decoration

Key Takeaways

alright then gang so I just want to take a quick sidestep now and address some of the design flaws when it comes to these two forms the register form and the sign-in form because apart from looking pretty cruddy they also don't give me much information as to what I should type into these two different form fields so on the register form field I don't know that this should be an email and this a password nothing is telling me now so I'm going to address those issues in this video and just make this look a bit nicer so we're on the register form at the minute and that's what I have open here in vs code and I need to go down to this text form field first of all which is the top one and to make these form fields look a bit better and also add some hint text we need to use a decoration property now the value of this should be input decoration like so and inside an input decoration we can specify some different things to a make these look better and B give them some hint text okay so that first of all the hint text let's do that first I'm going to say hint text is gonna be equal to email like so and now if I save this then we should see email right here and we know to type in an email as soon as I start typing it goes away but if I delete again then it comes back so we know now that this is an email field now the next thing I'm going to do is say the fill color should be colors dots white now we're saying that the fill color of the form field itself should have a color of whites on the background but if I save it at the minute we're not going to get that fill color and that's because we also need another property called filled and set that equal to true to say we do want this to be filled so if I save it now we should see the background color is now white so the next thing I'd like to do is address the borders so first of all I'm gonna say enabled border and this means that any form field which is enabled then I want to give it this particular border and to do this we say outline in ports border so we're making the outline border of this input field look better here so inside here what we're going to do is say that the border side property should be equal to boarder side and then inside we can say the color is going to be colors dots white so the border should be white and the width of the border should be 2 pixels right so all I'm doing here is saying any enabled field if this field is enabled should have this border and the color should be white and the width of the border should be 2 pixels so that's pretty simple so if I save it we can see that if I come away over here then the border is 2 pixels around this over here okay you can see how it's got a bit bigger that's the border now what I'm also going to do is say I want a focus border so when I click on a form field I want it to also have a border because at the minute notice when I click inside it that border goes away so this is only applying to the form field when it's not in focus so what I want to do is copy this and paste it down below and change this from enabled border to focused border and then this time the color is going to be pink and the width is still going to be 2 pixels so if I save this now then when something's in focus it just gets a pink border instead okay so that's looking pretty good now that's all we really need to do so that's just one form field with this decoration now now what we could do is we could grab this decoration and we could copy it and we could just paste it in each different text form field so down here but also in the sign-in widget in the different form fields here so 4 times in total and then even more times in the future if we have other form fields elsewhere in the app now that's not really the best way to do it because then if we change the style we have to go around and change it four or five or six times instead of just once so it would be better if we could define this thing over here this whole input decoration from here down to here if we could define that as a constant somewhere and then we could use that constant as the decoration whenever we need it and that's what we're going to do I'm going to now cut this from here and I'm going to create a new folder inside the Lib folder and this folder is gonna be called shared so any kind of shared code is gonna go inside this folder and I'm going to right-click and create a new file and call this constants dot dot so this file is going to be for any constants anything that's going to be used in different sections that doesn't really change now the first thing I need to do is import material so let me say import material like so and then down here I'm going to create a new constants and I'm going to call it text input decoration and I'm going to set it equal to this thing I just copied and scoot this way back over here like so um instead of this being a comment at the end I'm going to use a semicolon instead okay so now we can just use this constants in the different form fields so let me copy this now and I'm going to save the file then I'll go back to register and this time I'm going to paste this in text input decoration and comment now at the minute it's erroring because we've not imported this constants file so let's do that at the top I'm going to now say import and we want to go into the shared folder and then we want constants dance okay so now this should no longer error down here there we go and if I save this and even if i refresh over here now it looks exactly the same so oops no it doesn't go it does okay so it looks fine over here so now all I need to do is use this line whenever we want that kind of input decoration so I'm going to come down here and paste that in again and save it and now we can see this one has the same styling and if I go to the other one to sign in and go to this one paste it in and also to the one above it and paste it in and again we need to import file constants so import and it's in the shared folder and then it's constants dot if I save this we can now go to the other screen and we can see we have the same styling as well now the only problem is is that the hint text is the same in every single font field and that's because in the constants file we can see that the hint text is defined here now the way we get around this is first of all by deleting this because we don't want that to be hard-coded and constant for every time we use this text input decoration constants instead we want to specify that individually every time we use it now we can do that by using a method called copy width so I could say for example on this one dot copy width and then pass through a property which is going to be text hint and then the value for this and then I can pass through the property that we want to specify for this and that's going to be the hint text and set it to be whatever I want it to be for this particular form field so in this case it will be email but down here if I copy that in the next one it's going to be password so I can change that to password and now what it's going to do is use this constants and it's going to copy it with this property as well so it's going to add that property to this thing over here okay so let's save this and let's also save this file and now if we go to the register screen we can see email and password I'm going to do the same thing with this file so let's go down to the text input decoration and paste that in the top one is email and this one should be password so let's change that to password and save and let's go to sign-in and everything now is looking a bit better okay so there we go now these two different screens look pretty good and also we know what to type into each input field in the next video what I'd like to do is create some kind of loading widget because at the minute if we sign in or register then it takes just a second or two for to go to the next screen and we don't know that anything's happening so for example I'll do this Shawn at the in fact account login with that it's Mario that's the net ninja : you K and then the password was test one two three four if I sign it it's just going to take a second or two to go to the home screen so sign-in and I want to be showing a login widget right now while it did all that stuff in the background until we get to the home screen and we'll take a look at how to do that in the next video