#11 - TextField and TextFormField #CodeAndroid #Flutter

Hey guys its Vignesh from CodeAndroid In this video will see about TextField TextFields are used to get user input via keyboard To see about these, I already created a empty flutter project. In this adding Column as the body of the Scaffold Let's add "TextField" and save the code You can see we got the TextField and we can input some data First will see how to add label and hint for this to do that we need to use "decoration" for the decoration we need to pass InputDecoration Inside this "InputDecoration" we get options to set "hintText" You can see we got the hint text and it is displayed only when there is no text similarly we cab add label using "labelText" In-case if we want to customize out hintText or labelText then we can use "hintStyle" and "labelStyle" For this Style attribute we need to pass TextStyle as value Inside we can modify properties like color,size,weight and more here I am setting the size as 15 and color as black you can see the label color and size got updated now will see how to change the keyboard layout according to what kind of data we are requesting from user to set the keyboard layout we need to use "keyboardType" if we want user to input only numbers then we can use TextInputType.number Sorry we need to restart the application because the focus of the keyboard is not releasing So restarting the application You can see the keyboard layout is changed to number similarly we can use name,email,address and more If we want to ask some secret data like password then we need to hide the character while typing to do that we need to use "obscureText" attribute now setting this as true, and saving the code you can see, now the inputs are hidden when i change this to false we can see the inputs to limit the character we need to use maxLength attribute When we add this attribute, we get a label here where we can see how many character we entered and what is the max length If we want to get more text then we can set maxLines this will limit number of lines visible to the user So that user can scroll the text inside it These are the basic attribute we can use to customise functionality of the TextField Now will see how to customize the look of the TextField to add border inside InputDecoration we need to pass border value here i am passing "OutlineInputBorder" you can see, we got the border around the TextField but the borders are not visible properly So adding some padding to the Column you can see, initially we are getting the label in the center for the Textfield when the TextField get focus, the label is animating to the top when we use "UnderlineInputBorder", then we get the border only on the bottom side In some places we don't want the border itself To do that we need use InputBorder.none in these kind for place we might change the background of the TextField to do that we need to set color using "fillColor" attribute also we need to set "filled" as true Let's make all type for reference so duplicating this and changing the border to UnderlineInputBorder also setting label as "Description", hint as "Detailed Description" finally setting maxLines as 3 duplicate this once again and setting obscureText as true and border as "OutlineInputBorder" also changing the label and hind as "Password" now the borders are overlapping to fix that adding some space using SizedBox with height as 16 In Some cases we might need to add icons to the TextField when we use "prefixIcon", we get the icon inside the TextField when we use icon attribute, we get the icon outside the TextField and "suffixIcon" will place the icon rightside of the TextField If we see it closly, we can pass widget as the type for the icons So we are not restricted to use only icons Now i am going to use IconButton as the suffixIcon So that we can listen for the click Let's make this password to show or hide the content by changing obscureText status to do the change we need to store the state of obscureText in a variable So creating a boolean called "_secureText" and setting true as its default value in IconButton's OnPressed function, inverting the boolean variable inside setState function you can see on click of the icon the password is shown and hidden now will change the icon as well, according to the boolean if _secureText is true then showing "eye" icon otherwise showing "scecurity" icon you can see the icon also changing now In Flutter we have another widget called TextFormField Which does the same with some extra options i forgot to show two more attributes "errorText" is used to show error message on the textfield you can see when we pass string, we are getting the errortext below the TextField in red color when we pass null its going off to get the entered value from an TextField, we need to attach an controller So creating "TextEditingController" object and passing it to controller attribute of "Name" TextField Finally to trigger the read, adding a button Onclick of the button printing the text from the controller you can see we are getting only "Name" because there is no content in the TextField If i we input some value and press the button we get the value which is entered on the textfield in this case we are getting "CodeAndorid" like this to read a input from TextField we need to attach the controller now will see about TextFormField This TextFormField is suitable for forms by providing some extra options like validations So i am wrapping this TextFormField with a form widget Now we need an reference to this form widget so that we can use that reference to validate the form on click of the button to do that creating a GlobalKey of FormState and adding the key to the Form for the TextFormField adding some decoration You can see we got the TextField Before we do any validation, lets add some controller for the passoword as well So that we can see how to do the same without Form So renaming the controller to "_passwordController" and attaching to the "password" TextField Also creating new variable for holding the error message and attaching that to errorText attribute Now, on click of the button checking the length of the input text if the length is less than 3 character, then setting _passwordError as "Enter at lease 3 char" otherwise setting null We need to do this inside setState(). then only the UI will get refreshed You can see, if I press the button without entering any put, we are getting the error message if we input more than 3 char the error is going off We can do the same on TextFormField using Validator attribute in this we get the string entered on this TextField and we can do the validation here itself So I am copying the code and using the string from the function Now we can execute this validator using the form reference to do that getting the currentState of the form, and calling validate You can see when the char length is less than 3 char we are getting error message as well as the function is returing false If we enter more than 3 chars then the error message is going off and the function returned true Let's add another TextFormField inside the form So wrapping this TextFormField inside Colum, and duplication it Will use this for validating the name so chaning obscureText to false and changing the limit to 10 char Finally changing the label and hint text you can see ce are getting this overflow error because we don't have enough speace to place the content So i am wrapping this top Colum inside "SingleChildScrollView" Which makes it inner child to scroll you can see, now the error is gone Let's press the button you can see both filed are validated and we are getting error message now filling the name and pressing the button now the error on "name" field is gone but still its showing error on Password so entering the password and pressing the button you can see now the error on password also gone In this also we need to use controller to read the input Like this we can get input from user using TextField and TextFormField That's all for this video guys If you have any doubt please put it in the comment section I will try to answer it Hope you like it I will see you in my next video have a nice day

Channel: CodeAndroid

Views: 84,380

Keywords: codeandroid, code android, android, kotlin, tutorial, android kotlin tutorial, kotlin android tutorial, kotlin android, android tutorial for beginners, android tutorial 2017, jetbrains anko, kotlin language, android studio 3, studio, app, apps, application, development, SQLite, layout, Flutter, Flutter Developement, Dart, Flutter for beginner, flutter beginner tutorial, flutter tutorial, Dart tutorial, Google Flutter, Flutter for web, Flutter SDK

Id: eWa6iGncZ5Q

Length: 12min 54sec (774 seconds)

Published: Mon Sep 14 2020