TextField in Flutter, | Flutter Widget Explained

hey guys welcome back to my youtube channel today i am going to explain everything about text field widget in flutter here as you can see we have some text field and these text fields looks differently because i am going to show you different properties different callback functions everything related to the text field so that's why i have these sample text fields and here initially we will be focused on to this text field and here we can put anything but we can put maximum 10 characters here and after that let's focus here here we have this icon if we tap here then we are focused into next text field and here we can put the details and here we have this if we click here then it is gone then again if we tap here then we are focused into next text field and here we can type our password this is hidden and we can tap here to check and check these things so right now it is visible but by default it is not and then let's tap here now we are focused into next text field and here we have this number input keyboard so here we can put any number and after that here we have different icon and after tapping here the keyboard disappeared now we can click on this button and after clicking on this button i have printed this text whatever filled in this text fields so we will get all the text provided by the user into these text fields so this is what i am going to show you and in this process you will get to know everything about text field widget in flutter so if you are interested in this kind of tutorial then hit the like button subscribe to my channel for more tutorials like this and don't forget to hit the notification bell icon so that you get notified whenever i post a new tutorial on this channel so without wasting any more time let's get started okay so this is our project and here i have just cleaned the basic counter app and here i have just provided this text within the column and i have provided a padding here now instead of this text i am going to provide text field now after providing the text field here we can see a line has been drawn here and if we click here then we can see a cursor is blinking and the keyboard has appeared and here we can type something so this is our text field right now we can do lots of customization here the basic customization we can do by providing decoration and in the decoration we need to provide input decoration and here let me first provide some text by which user can understand what this text field is actually asking for and that we can provide by providing hint text and we need to provide a string here now it is much more clear to the user what this field is actually for along with it we have another thing called label text this is also string type and after saving it here we can see a text at the top has been appeared now let's restart our app quickly so that we can unfocus from this text field and now we can see only the label text is visible now when we tap here that time we can see that level text is moved to the top and then the hint text is present here if we provide both of the text then the label text is visible by default and when we will tap onto that text field that time the hint text will also be visible along with the level text and to customize it we have hinge style and we can provide text style and here we can provide styling which we normally put for text let's provide a color so this has been changed to blue and now let's see how we can change the style for this level text and that we can do by providing this label style now let me provide a different color which is red and we can see that it has been changed now let's provide some font so the font has been updated now let's change the style for this text which the user will put and for that we need to go outside of this decoration so outside of this decoration we can provide style and here also similarly we can provide textile so here we can see the change has been reflected and i don't want the font size increased over here so i can leave it like this now let me provide some background color to this text field so we can do that by first providing field to true now we can see that here we have some grayish background now let's change the color of it and that i can do by this fill color and here i am going to provide this black color so now it is much more prominent now i don't want this bottom border here so for that let's update it by providing border property and here we need to provide input border none so the border has been gone now let me change the keyboard type here for that we have keyboard type and here we have text input type here you can see we have different types available so whatever type we want we can provide that so here i'm providing email address and now we need to restart the app so here you can see it is email address keyboard as you can see the at the red symbol here and similarly we can provide number so here we have the number keyboard but i don't want number here i want text and along with that i want to change this icon here that i can do by providing text input action and here we need to provide text input action dot then here we can see lots of option available here and i want to provide next now let's reload so here we can see that our keyboard has been changed along with this icon now after that here we can provide max length if i provide 10 for the max length then we can provide maximum 10 character into this field okay so here i am typing but it is not taking any character here now here after that we have obscure text if we set it to true then the text will appeared as dot and if we want to change the dot with other character then we can do that by providing this obscuring character so here you can see it has been changed to star or hash whatever you want you can change that and by default it is set to these dots and we don't need this obscure text here for this name and also we don't need this label text now after this text field let's create another text field and i have commented out this max length now you can see that we don't have any space between these two text field so that's why i'm going to provide a sized box here now let me change this to your email id and the label text to email and here i'm going to provide a color black color and i don't want the max length now i want to provide some border here and i am not going to provide this failed color so to provide border i can provide outline input border and here you can see by default it will look like this and when we will tap into it then our label text will be moved to top at the position of this border now we have icon so here we can provide an icon which will be positioned at the left side of the text field and it is outside of the text field if we want to position this icon inside the border then that will be prefix icon and also we have another icon which is suffix icon and this icon will be positioned at the right side and as you can see here it is type of widget so instead of this icon i will provide icon button and here i will provide this icon and also we need to provide on pressed so now we can tap here and here i will change the keyboard type to email address so here you can see the keyboard type is being changed now after that let's provide sized box again and then i will create another text field and this time it will be password and here i don't want to provide this label text and for the icon i am going to provide this lock outline and for the icon i am going to provide this visibility off and for the password we need to provide this obscure text as true so now we can type anything and we don't need this styles also so from here also i am getting rid of this now here i want to provide a custom border here and to provide customized border we need to use enabled border instead of the border and within this outline input border widget we can provide some properties to customize it so first i am going to provide a border radius so it is border radius circular so the border has been changed and now we can see that when it is being focused that time it is showing the bottom border which is not matching with this style and it is not good at all to have different types of border for different state for a single text field and that we will do but before that let me customize it furthermore which is border side and here we can provide border side so here you can see color style width so we can provide color and here i am going to provide a black color and for the width of it i am going to provide three so here it has been changed now lets change the focused border and for that we have focus border and here also we have similar things so i can copy and paste it here and for this one i am going to provide a different color which is green now let's save it so here we can see it is already has been changed now it is not focused so it is the normal border now when it is focused that time it is getting changed so that's how we can customize the border in text field and now i am going to copy this text field one last time and this time it will be for edge and for this one the keyboard type will be number and here i am going to provide the input action as done which means this this icon and for this one i will provide the underline border and that we can do by providing this underline input border and now after that i will create a button called elevated button and now let's fetch the text which will be given into these fields and for that first here we need to create some controller that will be text editing controller so here let's create controller for each field so after the name it will be email then password and finally it will be edge controller and then let's assign those controller for the text fields for the controller attribute we can provide the controller which we have created so for this one we have name controller then we have email controller for this email text field and we have edge controller after the password controller now let's print the text so we have name namecontroller.txt so now let's see here let's provide some text but before that we are saying we have some error and that is because this layout is going out of the available space right now the keyboard is also taking some space so that's why let me wrap this complete thing with a widget called single child scroll view so now it has been gone now let's type something and click here now after that here we can see in the console we have the output so that's how we can take the input so here we have email controller then we have password controller and then we have edge controller so by providing name of the controller dot text we can get the text of that particular field and now i want to make this thing dynamic so that whenever i will click here that time this will be visible after that if i again click here then it will go back to this dots so it will toggle this obscure text so for that here i am creating a boolean variable called secure text and by default it will be set to true and for this button let me set it to opposite of what it is so that means right now it is true after pressing this button it will be set to false if it is set to false then after pressing the button it will be set to true and we need to provide that within set state to see the change in real time and after that let's provide here that variable now let's see so here we can see that it is doing the work now i want to change the icon here and that i can do by this so if the secure text is set to true then it will be this icon if it is set to false then it will be this icon so it's working perfectly fine now let's work on this button so whatever we are typing here after clicking on this button i want to make it clear so that i can do by providing the email controller dot clear now after that let's click here so here it has been cleared so this is working perfectly fine and now i want to work on the focus of these text fields so first i want to provide auto focus to true for this field now save it after saving it we need to reload the app so it has been reload and now you can see we have already this cursor present here so it is already has been auto focused now i want to change the focus to next text field by tapping on to this button so for that here we need to create some focus node so i have created email focus focus node similarly we need to create for password and edge now after that here we have on editing complete and this function will be triggered when we will click on this button after we have completed the typing and here we can provide focus scope of context dot request focus and within this request focus we need to provide the focus node which we want to focus and we need to assign the focus node also and that we can do by this focus node and here let's provide that this is email field so this is the email focus node then we have password focus mode and after that we have edge focus and now let's copy it and use it for this one and for this one it will go to password focus and here for the password it will be keyboard type text after that from here it will go to edge focus now let's reload the app so here we have the name now tap here so we have email now tap here so we have password focused now tap here we have the edge so here let's provide some edge and then after clicking on this icon which is the text input action done so by tapping on that the keyboard has been disappeared and now if we click here then we can see all the text which we have provided here that is being present to us and one other thing i want i i forgot to mention that is error text so here it is you can provide the error text for any text field by providing this error text and you need to pass the text message here if you provide null here then that is gone so you can check for the error and based on that you can display null or the text so this is the tutorial guys i hope you have learned something new from this tutorial if you do so then hit the like button subscribe to my channel for more tutorials like this and let me know by commenting down below if you have any kind of suggestion for me then also let me know and don't forget to share this tutorial with your friends and colleagues and i will see you guys in my next tutorial in the meantime have a great day goodbye

Channel: Pradip Debnath

Views: 2,996

Keywords: textfield in flutter, flutter textfield widget, flutter text field design, flutter textfield controller, custom text field flutter, textfield widget in flutter, flutter widgets tutorial, flutter widget explained, flutter widget example, flutter tutorial, flutter widgets, focus dynamically in flutter textfield, get data from textfield flutter, flutter input text field, flutter get text from textfield

Id: feMMp7qR-ME

Length: 18min 40sec (1120 seconds)

Published: Thu Jul 07 2022