Flutter Themes: Input Decoration (TextFormField and TextField)

all right welcome to another tutorial this one's going to be on input decoration theme uh input decoration theme is the theme that text form fields and text fields use to look up their styling through build context so this is the outline for what we're going to do we're going to do an intro to forms and their validation and then the text form field and just how they work in general then we're going to go over the input decoration theme we're going to do a deep dive into all the different fields and things you can actually change there and then there's going to be a bunch of examples of how you might want to style different fields so we got a password field a number field email field a disabled field multiline and text fields in a row which can be annoying actually uh so yeah let's get into it so first uh intro to the app what we got here is just an app with a list view and it's just got a bunch of text fields uh each one is a text form field and what we have here is a form key and that goes into our form widget so each text form field in here knows how to validate itself or whether it even needs to validate itself and when we hit the check mark they all will validate and automatically show an error if there is an error so these fields here are optional they don't have a validator the disabled one obviously doesn't have a validator although it could uh and then we say this one's a required field and the number field has to be a number and email has to be an email um so first thing i think we should look at is some string extensions so extensions are your own things that you can put on a class that already exists and putting extensions on strings is often really really convenient so we're going to add a bunch of validation methods here which i think is a good place to put them because you can also utilize these pretty easily for email emails are disgusting and there's a quote here some people when confronted with a problem think i know i'll use regular expressions now they have two problems the joke is obviously that regex is so disgusting that if you need a look it's a problem in itself that you have to use it because just look at this thing so the key to remember with regex is just find somebody who's already written what you want and copy and paste it and put in your code but this one works for email and there's a link for it if you want to have it so basically it just checks is this a valid email right there for us and then is whitespace is nice for required fields in case they put a bunch of spaces or enters is valid double it's going to be nice for our number field and invalid is valid and i'm not actually going to use but it's just the same thing but it's an int so yeah let's go over here and just break it down so we got a whole bunch of fields in the list view and then down here we got a floating action button the floating action button just calls currentstate.validate on that form and then that gives us a boolean and all we're doing is printing that to the console so form is valid false air of course because uh it's not filled out so that's the intro to the project and forms let's now do the deep dive into theme so theme is something that you almost certainly want every widget in your app to respect so the best place to put that is right into the theme of the material app and right here we got a class my input theme and it's got a theme that's the input decoration theme and when you put this on your material app every single text field in your app is going to have the borders and the colors and the fonts that you define which is a lot a lot easier than putting them in line in the text fields if you want all of some certain widgets to look the same in your app you almost certainly want to put it in a theme and even if you just want a subsection of your app to look a certain way you could put a theme widget and define an inner theme and it's going to use the closest theme when widgets look up their theme so yeah let's dive into this my input theme here so i have made it um a method and nothing is static and the reason for that is that i can hot reload and show you guys what's going on here on the emulator you probably don't actually need this to be methods they could just be static or const even if you want them to be um yeah we're going to be building a lot of textiles and a lot of borders so i wrote these methods because i feel like it's pretty likely that if you want your text fields to have a certain border radius you probably want every state of them to have the same curvature so we're just going to always put that circular 20 there and give it a width of one and then just pass in the color so let's see how that's used down here so we're going to do this a little out of order unfortunately but we're going to go down to borders first so here we're building an input decoration theme and we're going to pass it into the theme of the app and first we're going to look at borders so there's actually quite a few different borders and one common issue that you'll see is that people put it in a border and then they'll say on stack overflow what the heck my border doesn't work it's the wrong color it's the wrong shape or whatever and that's because they only maybe put one of these instead of all six so it's kind of overwhelming how many borders there actually are so what what i'm going to do here uh let's just go through each one so enabled and not showing an error so that's this guy here it's enabled and it's not showing an error and then when i click on it it then goes to focused so focused is blue here to lose focus you need to either tap on a different field or hit enter and now it's the black one again which is just enabled now we can look at the error errors showing of course and all the ones that have a validator and i've hit the check mark and then they're invalid if i make one that becomes valid and i hit validate it's still focused because i actually hit the check mark instead of enter on the keyboard but hit enter on the keyboard and you can see that the focus is lost here this is the default value of borders or null so in theory you could maybe pass border in but i think that the default material textbox has a couple different borders so i don't think that this is enough alone you can see that nothing's yellow here because i've defined all the other borders so really you don't actually need this because i've defined all the other ones so we're just going to delete it there make it a little more clear so it's enabled error focused uh the only one i haven't done yet is focused error so you could if you wanted to make the focused error different than the normal error uh so you know if i made this red accent i'll reload that you know that's probably not different enough let's make it green or something though no it's green so it's focused hit check mark it still has an error um so it's going to have the red there so yeah we can also change of course the border radius if we wanted it to have even more circular corners or something we could bump this up so that it's almost like a perfect circle that looks pretty weird when it's multi-line you probably don't want to do that but maybe you don't want it quite as rounded you could just do something like that six actually looks pretty nice kind of like six and then you could change the width of the border two to something ridiculous like five that just looks god awful but you can do it okay that about sums it up for borders so let's look at some of the other things we can do so one of the things we can do is change the content padding there is some padding uh built into it by default so if you don't put this i believe 16 is actually pretty close to the default value it's not quite you can shift a little bit but it's pretty close so you can uh put whatever padding you want here and this is the padding around the input text in general so if you put zero here you can see that there's literally zero padding left and right on the text field here so you definitely want some padding i think 16 all looks pretty good you could potentially make them less vertical and more horizontal if you want to use symmetric or something like that is dense is a kind of a weird boolean because if you pass the pad again it'll just use your padding so is dense only really seems to do anything if you don't have any padding so then if we change this from true or true or false we make it true it is going to get a little more dense or is it oh yeah it is okay there we go so yeah his dance makes it a little bit shorter i don't like this flag i'd rather just put the padding that i want so i don't usually do anything with that okay floating label behavior this is the control for how and where this label shows up so my preference is always which is what i have if you control click this intellij you can go and see what the different values are it's an enum so never the label will always be positioned with the content or hidden so let's change this to never and see how that looks like so when you have it never it kind of covers up the hint and then when you click on it it replaces it with the hinge so then it's gone the other one we can do is auto it'll float when it's focused or it has content so auto instead of it going away it'll pop it up to the top which is kind of neat so if you if we lose focus it goes back to here and then it floats up to the top but always makes it so that your hint always appears and this is always at the top and that's that's my personal preference i like that because i like the hint to show next thing we can do we're going to skip constraints until we get to the row but we're going to look at the text cells so the textiles obviously are there's a whole bunch of different fonts here and you can control the color and size and whatever for all of them um so the suffix first up if you have like a units or something like that that you want to put at the end this is the font of this guy here so i made it black counter style if you have a max number of characters for the text you'll define this is the font that that's going to pull from so i got that here so it's gray and it's also a little bit smaller uh floating label style that's the labels here so i made those black so they're excuse me quite bold error style and helper style are both the text that show up here so if you have a helper text and there's no error let's just validate this so that works if you have a helper text it'll show up right here if you have an error it'll show up right there if the error shows up when you have a help player it will replace the helper with the error text uh one thing about text field it's a bit jarring and odd is that um if you don't have a helper text and you all of a sudden have an error it makes every single text field grow in height which i think is very jarring for the user i don't like it at all so let's look see what that looks like so on our password field uh let's take off our helper text and i got a comment here an empty helper text makes it so the field does not grow in height when an error is displayed so let's get rid of that so you can see how this pops up there and then if we have an error we hit uh check mark there everything else pops down so if you have a whole bunch of fields and they all have errors your form just exploding all of a sudden it is very jarring i don't like that at all so putting an empty string for your helper text even if you don't want to help your text is great but we can put a helper text here just to see that error being replaced so if this is a required field we validate it it puts that helper text there but yeah i like to put these as an empty string for for all of my fields so they don't jump around in height uh so these two also making it not change in height you probably want these two to be this exact same font size so that nothing is uh jumping there the error style is obviously the error text here hinge style is the text that goes into the box for the hint and it goes away when you start typing um label style is again this label here uh the sorry i should say that the floating label style and the label style are actually different label is when it's in the middle of the text box and floating is when it floats up to the top uh prefix style i don't actually have a prefix on here but you can put a prefix for your text field if you want something like a units in front um yeah i don't really need to demo that it's just another text there okay so that's a pretty deep dive into the input decoration thing there is quite a few more things in here for uh max lines and uh stuff like that filled fill color if you want to fill it but we don't really need to go into that because it's this is plenty these are the ones that i use most most often okay so let's now just go into the widgets and we're going to explore what we want to do for specific widgets and fields that are really common so you know things that are common entering in a password so let's jump into here and uh disclaimer here with these fields these don't have a controller or any callbacks they don't actually work or submit anything so this isn't a tutorial on how to hook up a form it's just the styling so these fields don't do anything so just just keep that in mind this is not like a complete complete form but this one is going to be stateful and it's going to have this boolean for obscuring the password so the text form field widget here it needs a validator well it doesn't need it you can pass it optionally i should say if you return a string you are going to get in that as the error message so this is a required field so we can see that there so if the string is white space we're going to say this is required because you can't just put all spaces here maybe you could actually i don't know if that's a valid password but you probably don't want just spaces as your password of course the validator allows for the string to be nullable however i've not found a case where it's ever null so i just put the exclamation mark here to assume that it's nominal i've never run into an issue with that yet so yeah moving on e this flag here is for the obscure text so when we type in our password you know it only shows you the most recent character in case somebody's creep it on your screen um and we're gonna be able to change that boolean with the suffix icon so comment here suffix icon is a great place to put an icon button so if you wanted an icon button to toggle that obscuring we could put that here so that just uh toggles this flag here which goes into there and obscures it or doesn't and then you know update the icon of what it's going to do here next up the keyboard type so keyboard type there's quite a few different keyboard types and they're quite important to have a good keyboard type for what your person your user is actually going to be typing in so they have one up optimized for passwords that are visible to the user already so we're just going to use that and we know it works but there is some other ones for email addresses and numbers and they pop up with different characters so just keep that in mind you want to use an option that makes sense for what you're actually typing in because it's going to control what characters are actually visible here you know for the email there's going to be an app so here's the decoration so we have our decoration already defined in our theme and what happens is when we put another decoration in here the two are going to be merged together so all of those borders and colors that we've put are still going to be there and then these are going to be merged on top of that for the specific instance for this text field what we got here is label text which is password field there's a label here's this again the empty helper text makes it so that it does not grow in height when there's an error so there's no help or text but it's just an empty string i should say the hint text is password and the hints just show up there when nothing's there and yeah that's it for the password field uh so yeah we got the toggle visibility and we got the password keyboard the other ones are going to be similar so let's go to the next one next one is a number field okay so we got another text form field they're all going to be text form fields and this one has a text input type and it's number with options so this one we can control what we want them to be actually to be able to enter so this one i've made it a floating point meaning that we can put 1.9 and it's going to validate properly and when we put that the decimal is true and the signed is true we have access to the minus sign uh so just because if we have these uh signs though we can obviously type something that's not a number whatsoever now so we're gonna have to make sure that our validator is still running and giving us a proper number just because your keyboard only allows number with options doesn't mean that people are gonna put a valid number at all because you can put any number of decimals that you want or commas and stuff like that so here's our validator it's going to call that is valid double and if not we're going to say well make sure that you do if you return null from a validator that means it's valid i'm not sure if i said that before but that's important so if you just return nothing or return null it's valid max length is 10. uh this is just an example to show the counter text and also uh your ability to enforce it so you can have multiple different types of enforcement so none is like a suggestion you're going to put it'll be say 20 out of 10 you can put whatever you want enforced says keep the length of the text from exceeding the max length even when the text is unfinished composing region meaning like if if we put 10 digits the keyboard will just stop going through um so then there's users can still input text if the current value is composing even after reaching the max length limit after comp composing ends the value will be truncated which i think is a little bit weird i don't really want to truncate what my users are typing so i want to either i like enforced or none really i don't really see the point in displaying 20 out of 10 maybe none isn't that useful either really in force is the one that i think that makes the most sense assuming you actually have a max length then again we just have a decoration here and putting a suffix is a good place i think to put units when you don't have a button there so put the kilograms there it could also be a prefix if you wanted one thing to know is that we have also suffix text and that's a string so if we put kg here where are you man oh it's not const anymore um so if we put suffix text here uh we're gonna actually get an error and the reason is is because suffix text is actually just a shorthand for putting a text here so you're only really supposed to use one or the other this is your shorthand if you know it's going to be a string but of course if we saw for the password that the suffix could be an icon or a widget so let's just fix that error there oh reload and go on to the next one okay email field so email field very simple once you already have the validator uh built we're just gonna put that keyboard type of email address and when we type on that email we're going to get that at symbol which is really nice that's on the main keyboard because you don't want to switch to the symbols we're going to say if it's a valid email and then we're just going to have the label text helper text and the hint can just be this fake email here so the the only really hard part of the email field is actually the regex which hopefully you can just go to here and trust that it works really so next up is a disabled field so text form fields have a boolean to enable or disable them so this one we can't click on we can't gain focus that's because enabled is false so if you wanted to enable or disable things dynamically you could do that like if one field makes no sense to fill out before you fill out a different field you could potentially control it in that way one interesting thing with the disabled fields is that they can still have a validator so let's put one and make it invalid and that's always going to be invalid and when you validate it you see that a disabled field can still have the error border and the message and it can still block the form from being valid so just keep that in mind that disabled fields will still run the validator [Music] okay next up we're going to go to multiline so text form fields have the ability to control how many lines it is and when it says max lines what it really means is how many lines of text are visible it does not enforce the max length as far as the number of new lines you can put so when you have this it'll just start scrolling um you can put as many lines as you actually want but you see there's exactly five lines of text there this one i've made a little bit interesting here the label is a row so the label normally we've been putting label text and that's just a string but your label can be a widget if you want it to be so we're going to make that a row and we're going to make sure that row is only the width that it needs to be because if we don't it's going to like cut off the top of our field here which doesn't look very nice yeah we can put an icon and something like that if we want which is nice it can just be anything that's you know just kind of flutter works they want you to put widgets into things not just not just strings okay about wraps up the multi-line field so let's go to text field row and by row i mean there's two of them in a row and the reason that i called this out specifically is because if you have text fields in a row and they aren't constrained you're actually going to get a crash in your ui so this ties back to the constraints so in our input decoration theme we can put constraints on the max with min width of things like that and this can be useful for putting text fields in a row however it might be more desirable to wrap with flexible to make them grow to the available width so you can see that these are exactly 150. if we had three of them um they would take up the available room because they would don't have a min width but there's this gross kind of white space in here like what if we wanted two that were exactly half or we wanted one to be three times as wide as the other well flexible i think is a better solution for this but first we can just observe the crash when we remove this because we have two fields and they are neither of them are restricted with uh they both want to take up the full width and flutter doesn't know how big to make either of them so we can get that familiar widget crash where it's going to say this guy has no size so we need to give it a size so how do we give it a size well we can wrap it with flexible if we don't want to define and hard code a size so let's do that we go over here and we're going to wrap each of them with a flexible and then once we do that we hot reload maybe i'll just hot restart because i don't think it actually did it so we can see after wrapping with flexible uh sorry there my emulator got a little weird they take up the available width now we probably want to put some padding in there um but this is really really handy and a much better solution for making them the widths that you want because usually you're not going to think about i want this text field to be exactly 200 wide you're going to think i want this one to be three times as wide as the other so we can do that and we can shift the size of the two and yeah if there's padding in there they would still be the correct widths okay so that wraps up this tutorial on text form fields and just remember that text fields that aren't in form are going to have the same theme as your text one so you just need to do it once there so we looked over how forms work a little bit i'm going to do a much more in-depth tutorial on forms at some point uh then we looked at the input decoration theme the borders and the text styles then we looked at a couple different fields we got the password field the number field email disabled multi-line and then put them in a row and made them the width so we want so i hope you enjoyed hope you can make your text boxes look good

Channel: flutter --help

Views: 423

Keywords:

Id: H2xNq5ph8OE

Length: 23min 57sec (1437 seconds)

Published: Fri Oct 22 2021