textfield, and text editing controller, flutter video tutorial in English, part 23

hi friends I'm a doctor from easy approach and it's the twenty-third video of flutter video series so far we haven't learned any way to get the data from user suppose we have a login form then definitely we need to have a tax feel on it as well so that we can get the data from user using that tax field so in this video we are going to implement the tax field and we'll learn how to get the data from the tax field so let's move forward so what I'm doing initially I am removing the existing code of the default application so just remove this and making my own a stateful digit you can name anything I am giving here text field screen and now we need to give the reference of this tax field is Queen hair in place of my home page and now it is what we need to do we need to return here as careful widget as the root widget and in the body of this a scaffold I would have a column digit and inside the column I would have two different widgets the first would be the tax field and the second would be the button and whenever the user would hit on the button will extract the tax from the tax field and we'll show that extracted tax somewhere on the screen like making another text widget so basically we need to have three different widgets so initially I am making tax feed widget so you can make a text field by using text field widget as the name of widget and I want everything to be in center so you can give the main axis alignment Center and now if i refresh it you can see the text field widget here at the center of the screen now you can see it is actually there is no padding around this so you can give the padding we can do one thing we can cut this and wrap this widget inside the container so just make a container and in the child the textfield that you have cut and there's a property petting and you can give petting around to every side by using ads insets dot all and here you can give the value of the petting you want so now just refresh it now you can see the padding around your tax view now we need to make a button so what I'm doing actually I'm making another container and inside the container I'll make a flat button so just make a container here the container we just make a flat button inside the flat button we would give a child of tax widget can give any tax you want to see on the button so I'm just giving here click me and you can get the color off your button as well so I'm giving a red color and there's a property on press where you actually define what you need to do when the user would hit on this button so for now I'm just leaving it's empty but we'll work on it later and one more thing you need to give at the wid double dot infinity so that it can it cover all the screen and now if i refresh it you can see the button as well he can change the color of this click me as well but I am living it as it is and now what we need to do we can also give the pairing in this as well so now if I want to show extracted tax from this tax field whenever the user hit on the split button we need to have attached widget as well so that we can I show that tax in that tax widget so what I'm going I'm doing actually I'm making another text widget which I'll actually show the extracted text so now what we need to do we need to extract D tags inside this on press so to extract the text you need to associate a controller with the tax field so to associate a controller you need to have a controller first so we need to make a controller you can make a controller by making a final variable controller and you need to initialize it by text editing controller and now you can give this controller inside the text field there's a property controller and you can give here and now what we need to do we need to extract detects from this controller actually inside this on press and we need to store it in some other variable so that we can give the reference of that variable here so I'm making another variable that would store the extracted tags from the text field and just make it a string initially it would be empty so add I just name it name and you can give any and you you have to give the reference of that variable here so that it shows the latest value and now inside this on press we'll just call the set estate and inside the set estate we'll change the value of name so name equals 2 you can get the latest value from the tags field by using controller dot text and now if i refresh it so it is reloaded and now if i give some text like my name Moz and click on this button so you can see the tags here at the top of the screen and now if I change the text some as some other like sod so you can see the updated tags so this is it from this video actually in this video you have learned how to get the tags from text field in the next video we'll do some other funny stuff with the text field so thank you for watching

Channel: Easy Approach

Views: 43,452

Keywords: flutter, flutter tutorial, flutter sdk, learn flutter, google flutter, flutter tutorials, flutter forms, flutter for beginners, flutter course, flutter tutorial for beginners, flutter app development, text field, flutter textfield, text widget in flutter, tutorial flutter bahasa indonesia, text widget with style and direction error soution, layouts in flutter, flutter indonesia, how to get text of textfield in flutter

Id: Q96CK-GkbGM

Length: 5min 43sec (343 seconds)

Published: Mon Dec 23 2019