 Hey everybody this is Brian welcome to the 28th Flutter tutorial. Today we are going to switch gears a little bit here and we're going to go down to where is it the text field. We've worked with this before but we haven't really talked about it in depth. So what we're going to do in the next few tutorials is talk about individual widgets. We're going to talk about text field then probably checkbox and radio box. Actually it's just called radio. In other frameworks it's called radio button or radio box depending on but in Flutter it's just called radio. Anyways so today text field. Let's just go ahead and we've got a little demo project. Let's get that out of there. Let's open a new emulator. Let that bad boy load up while we're typing. Alright so let's import our material package and I'm probably going to deviate from my example code that I have on the other side of the screen here just because I don't really like it. Sometimes that gets me into some trouble but we'll just see what happens here. Still gosh this cold man. I'm still still got this cold trying to fight through it. Might be successful might not. So if my voice cracks a little bit I haven't actually done tutorials in a while because my voice has been really bad. Just forgive me. Alright so we're going to extend the stateful widget. Whoopsie. Alright so we're going to extend the state of the my app. I had a lot of good feedback about Flutter. Even for alpha people seem to genuinely love this. I actually really like Flutter. It's kind of hard to describe unless you've really worked with it for a little bit. It's got a lot of things that other frameworks are really really lacking even though it's just an alpha and I think there's going to be a lot of really good promising things coming out of this. Create start, create state. Alright so we've got kind of our boilerplate here. We'll just finish this up real quick. I may start the tutorials with what we have now that we don't spend two minutes watching me type this over and over and over again. Just let me know in the comments how you guys feel about that because I know that sometimes I try to just have pre-written code and everybody's like no don't do that we like watching you type. I think you guys just like seeing my horrible spelling mistakes here. Alright so return new. We're going to turn new scaffold and bang we can actually start our program now. So as always we've got our kind of generic pattern here where we do run app. We're creating a new material app. The material app's home is a my app. My app is a stateful widget. The state of that is the my app state which of course extends the state of the my app. Seems a little cyclical and a little confusing but I think we're getting there. Alright so first thing we need to do is well actually let's work with our state here. So let's say what do we want to do? Yeah why not. Alright so now we've got our scaffold up. I'm going to say app bar, new app bar, title, new text and with the body here we are going to say new container. Let's get a little bit of padding there just so we know what's going on here. Let's say new let's say new center and then we have our list of widgets that we're going to flush out here. So the first widget we're going to add here is a new text field and a new raised button. That way we know that this is a text field demo not a text demo. There we go. Alright so we played around with text field before and if we actually just run this so we can see what this looks like here. Let me pull my emulator over. Text field is actually pretty interesting little control. There's a lot of functionality packed into this bad boy and you wouldn't really know it unless you started diving into the documentation playing around with it. So we're just going to make a completely obscure example that you'll probably never use but it shows off some of the functionality of this. Alright let's build this up, throw this out here. So here's our text field that we can type into and here's our raised button that we're going to be able to click. Let's finish that button up here. I have failed you. Do as I command. Anyways new text. There we go. Now what we want to do here is we want to actually do the on press which we've done tons and tons and tons of times here. So let's just make a void on pressed. Now you can do this much more compact. I just do it that way it's you know there's no uh no issues understanding what exactly is going on here. So it will call this and we can even say print button test or button pressed. We've done that before. Now what we want to do is actually grab the text out of this text field and we've seen this before where we can't actually say text field dot text. The text field itself does not store a state. It's a state less widget. So what we have to do is grab those changes as they occur. So we're going to actually say and then here bang this down here and separate that down that way it's just a little more easier to understand and we need to say starting value and then there's our value of course need our semicolon at the end here. Let's push this back out to the device and now as we type you can see we are grabbing the text that is in the text field and if we click we have our button pressed. So what we need to do now is you guessed it set state. I don't like it that there let's bump that up there we go value. That way we actually have the value here and then we can say hot reloading should take care of that and bang the text is blank yeah because we haven't actually stored it in the state. Let's try this. Yeah there we go so the text is whatever we just typed. So we've seen that before in similar older tutorials that we've done. Now what we want to do is show off some of the features of this thing. We understand now that the text field is stateless and that's why we have to grab this unchanged but what are some other things that we can really do with this. Well we're going to play around with it a little bit. We're going to say max lines equal three. So we're going to have three max lines in here and we want autocorrect turned on. That's right autocorrect yeah buddy and let's just play around with that and see what that does. So let's grab this notice how we have three lines in here one and we have autocorrect. So if I just type and we can say catch comma and we can go down a line maybe. Can't figure out how to go down a line on the emulator here. Well I kind of did it. You get the point though we have multiple lines now that we can really play around with and the text is whatever blah blah blah catch. So you can have multi lines you can have autocorrection you can have all sorts of stuff you can even have this little this is an emulator so it won't work but I can click that and it'll actually dictate out whatever I'm saying it'll type it out for us. Pretty pretty awesome. So obscure text true. I think we've done this in a previous tutorial this is for passwords. Notice how it's a bunch of dots and as we type you only see the letter for a second and then bang. So we could actually say something like my top secret came to spell my top secret password. Bang. So let's comment that out for the time being. Let's say we want a decoration. We're going to do a new input decoration and we're going to say icons dot why not just icons dot print hit text and we will say type something here and we want label text to say what is your name. Uh oh something blew up. I guess that worked. So now you can see that we have a label text what is your name. Let me kind of reload this because it kind of shrinks when we do that. It says what is your name and then when you click on it it zooms it up there. We have an icon and it says type something here and we have multiple lines of text. That's actually really cool. One thing you should be aware of is this whole pattern of tracking the state and all that. It can seem a little cumbersome at times. So one little trick that you can do is you can say final text editing controller and we get the controller here and we can comment out this. Actually we can even leave it if we want to. I just say controller and give it the actual controller. Then what happens is and we will say we want on press two and I'm going to comment this. Just kind of playing around here and we're going to just print out the controller dot text. Let's reload this whole thing. So now when we click the button we're calling on press two which instead of grabbing the text variable is actually grabbing this controller variable. So we can say blah blah blah blah click and you can see we get the text and we didn't have to mess around with set state or any of that because we've got it all in this text editing controller. Actually pretty neat. So that in a nutshell is the text field. There's a little bit more to it but I don't want to get too in-depth. These are still beginner tutorials but as you can see this thing packs a lot of functionality into it probably more than most other frameworks out there and I was really just kind of blown away when I started playing with this. So let's end this with I hope you like Flutter. So that's it for this tutorial. If you're looking for the source code for this maybe maybe there we go go to my website voidromes.com click on tutorials. It'll take you right out to GitHub and I have links to all of the tutorials I do different series but you click on the Flutter tutorials and then I've got all of them you can clone the entire repo down to your hard drive and have the source for everything. On top of that you can join the Voidromes Facebook group. There is almost 1,800 other programmers out there all walks of life all different languages and we can definitely help if you have any questions. That's it thank you for watching.