{"id":2107,"date":"2022-04-07T19:21:06","date_gmt":"2022-04-07T19:21:06","guid":{"rendered":"https:\/\/mdr.foobrdigital.com\/?p=2107"},"modified":"2022-04-07T19:21:06","modified_gmt":"2022-04-07T19:21:06","slug":"flutter-text-field","status":"publish","type":"post","link":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/2022\/04\/07\/flutter-text-field\/","title":{"rendered":"Flutter Text Field"},"content":{"rendered":"\n<p>A TextField or TextBox is an&nbsp;<strong>input element<\/strong>&nbsp;which holds the alphanumeric data, such as name, password, address, etc. It is a GUI control element that enables the user to&nbsp;<strong>enter text information<\/strong>&nbsp;using a programmable code. It can be of a single-line text field (when only one line of information is required) or multiple-line text field (when more than one line of information is required).<\/p>\n\n\n\n<p>TextField in Flutter is the most commonly used&nbsp;<strong>text input widget<\/strong>&nbsp;that allows users to collect inputs from the keyboard into an app. We can use the&nbsp;<strong>TextField<\/strong>&nbsp;widget in building forms, sending messages, creating search experiences, and many more. By default, Flutter decorated the TextField with an underline. We can also add several attributes with TextField, such as label, icon, inline hint text, and error text using an InputDecoration as the decoration. If we want to remove the decoration properties entirely, it is required to set the decoration to&nbsp;<strong>null<\/strong>.<\/p>\n\n\n\n<p>The following code explains a\u00a0<strong>demo example of TextFiled widget<\/strong>\u00a0in\u00a0Flutter:<a href=\"https:\/\/www.javatpoint.com\/flutter-textfield#\"><\/a><a href=\"https:\/\/www.javatpoint.com\/flutter-textfield#\"><\/a><a href=\"https:\/\/www.javatpoint.com\/flutter-textfield#\"><\/a><\/p>\n\n\n\n<ol><li><\/li><\/ol>\n\n\n\n<pre class=\"wp-block-code\"><code>TextField (  \n  decoration: InputDecoration(  \n    border: InputBorder.none,  \n    labelText: 'Enter Name',  \n    hintText: 'Enter Your Name'  \n  ),  \n);  <\/code><\/pre>\n\n\n\n<p>Some of the most common attributes used with the TextField widget are as follows:<\/p>\n\n\n\n<ul><li><strong>decoration:<\/strong>&nbsp;It is used to show the decoration around TextField.<\/li><li><strong>border:<\/strong>&nbsp;It is used to create a default rounded rectangle border around TextField.<\/li><li><strong>labelText:<\/strong>&nbsp;It is used to show the label text on the selection of TextField.<\/li><li><strong>hintText:<\/strong>&nbsp;It is used to show the hint text inside TextField.<\/li><li><strong>icon:<\/strong>&nbsp;It is used to add icons directly to the TextField.<\/li><\/ul>\n\n\n\n<p>We are going to see how to use TextField widget in the Flutter app through the following steps:<\/p>\n\n\n\n<p><strong>Step 1:<\/strong>&nbsp;Create a Flutter project in the IDE you used. Here, I am going to use Android Studio.<\/p>\n\n\n\n<p><strong>Step 2:<\/strong>\u00a0Open the project in Android Studio and navigate to the\u00a0<strong>lib<\/strong>\u00a0folder. In this folder, open the\u00a0<strong>main.dart<\/strong>\u00a0file and import the\u00a0<strong>material.dart<\/strong>\u00a0package as given below:<\/p>\n\n\n\n<p><a href=\"https:\/\/www.javatpoint.com\/flutter-textfield#\"><\/a><a href=\"https:\/\/www.javatpoint.com\/flutter-textfield#\"><\/a><a href=\"https:\/\/www.javatpoint.com\/flutter-textfield#\"><\/a><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import 'package:flutter\/material.dart';  <\/code><\/pre>\n\n\n\n<p><strong>Step 3:<\/strong>\u00a0Next, call the main\u00a0<strong>MyApp class<\/strong>\u00a0using void main run app function and then create your main widget class named as\u00a0<strong>MyApp extends with StatefulWidget<\/strong>:<a href=\"https:\/\/www.javatpoint.com\/flutter-textfield#\"><\/a><a href=\"https:\/\/www.javatpoint.com\/flutter-textfield#\"><\/a><a href=\"https:\/\/www.javatpoint.com\/flutter-textfield#\"><\/a><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>void main() => runApp( MyApp() );  \n  \nclass MyApp extends StatefulWidget { }  <\/code><\/pre>\n\n\n\n<p><strong>Step 4:<\/strong>\u00a0Next, we need to create the Scaffold widget -> Column widget in the class widget build area as given below:<a href=\"https:\/\/www.javatpoint.com\/flutter-textfield#\"><\/a><a href=\"https:\/\/www.javatpoint.com\/flutter-textfield#\"><\/a><a href=\"https:\/\/www.javatpoint.com\/flutter-textfield#\"><\/a><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>class MyApp extends StatefulWidget {  \n  @override  \n  Widget build(BuildContext context) {  \n    return Scaffold(  \n        appBar: AppBar(  \n          title: Text('Flutter TextField Example'),  \n        ),  \n        body: Padding(  \n            padding: EdgeInsets.all(15),  \n            child: Column(  \n              children: &lt;Widget> &#91;  \n              \n              ]  \n              )  \n            )  \n              )  \n         );  \n  }  \n}  <\/code><\/pre>\n\n\n\n<p><strong>Step 5:<\/strong>\u00a0Finally, create the TextField widget as the below code.<a href=\"https:\/\/www.javatpoint.com\/flutter-textfield#\"><\/a><a href=\"https:\/\/www.javatpoint.com\/flutter-textfield#\"><\/a><a href=\"https:\/\/www.javatpoint.com\/flutter-textfield#\"><\/a><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>child: TextField(  \n                    obscureText: true,  \n                    decoration: InputDecoration(  \n                      border: OutlineInputBorder(),  \n                      labelText: 'Password',  \n                      hintText: 'Enter Password',  \n                    ),  \n                  ),   <\/code><\/pre>\n\n\n\n<p>Let us see the complete source code that contains the TextField Widget. This Flutter application takes&nbsp;<strong>two TextFields and one RaisedButton<\/strong>. After filling the details, the user clicks on the button. Since we have not specified any value in the&nbsp;<strong>onPressed ()<\/strong>&nbsp;property of the button, it cannot print them to console.<\/p>\n\n\n\n<p>Replace the following code in the\u00a0<strong>main.dart<\/strong>\u00a0file and see the output.<a href=\"https:\/\/www.javatpoint.com\/flutter-textfield#\"><\/a><a href=\"https:\/\/www.javatpoint.com\/flutter-textfield#\"><\/a><a href=\"https:\/\/www.javatpoint.com\/flutter-textfield#\"><\/a><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import 'package:flutter\/material.dart';  \n  \nvoid main() {  \n  runApp(MaterialApp( home: MyApp(),));  \n}  \n  \nclass MyApp extends StatefulWidget {  \n  @override  \n  _State createState() => _State();  \n}  \n  \nclass _State extends State&lt;MyApp> {  \n  @override  \n  Widget build(BuildContext context) {  \n    return Scaffold(  \n        appBar: AppBar(  \n          title: Text('Flutter TextField Example'),  \n        ),  \n        body: Padding(  \n            padding: EdgeInsets.all(15),  \n            child: Column(  \n              children: &lt;Widget>&#91;  \n                Padding(  \n                  padding: EdgeInsets.all(15),  \n                  child: TextField(  \n                    decoration: InputDecoration(  \n                      border: OutlineInputBorder(),  \n                      labelText: 'User Name',  \n                      hintText: 'Enter Your Name',  \n                    ),  \n                  ),  \n                ),  \n                Padding(  \n                  padding: EdgeInsets.all(15),  \n                  child: TextField(  \n                    obscureText: true,  \n                    decoration: InputDecoration(  \n                      border: OutlineInputBorder(),  \n                      labelText: 'Password',  \n                      hintText: 'Enter Password',  \n                    ),  \n                  ),  \n                ),  \n                RaisedButton(  \n                  textColor: Colors.white,  \n                  color: Colors.blue,  \n                  child: Text('Sign In'),  \n                  onPressed: (){},  \n                )  \n              ],  \n            )  \n        )  \n    );  \n  }  \n} <\/code><\/pre>\n\n\n\n<p><strong>Output<\/strong><\/p>\n\n\n\n<p>When we run the application in android emulator, we should get UI similar to the following screenshot:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/static.javatpoint.com\/tutorial\/flutter\/images\/flutter-textfield.png\" alt=\"Flutter TextField\"\/><\/figure>\n\n\n\n<p>If we click inside the text box, we can see that a keyboard has appeared from the bottom of the screen, the label goes into the top left corner of the border, and the hint text shown into the field. The below screenshot explains it more clearly:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/static.javatpoint.com\/tutorial\/flutter\/images\/flutter-textfield2.png\" alt=\"Flutter TextField\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">How to retrieve the value of a TextField?<\/h2>\n\n\n\n<p>We know that Flutter does not have an ID like in Android for the TextField widget. Flutter allows the user to&nbsp;<strong>retrieve the text in mainly two ways<\/strong>: First is the onChanged method, and another is the controller method. Both are discussed below:<\/p>\n\n\n\n<p><strong>1. onChanged method:<\/strong>\u00a0It is the easiest way to retrieve the text field value. This method store the current value in a simple variable and then use it in the TextField widget. Below is the sample example:<\/p>\n\n\n\n<p><a href=\"https:\/\/www.javatpoint.com\/flutter-textfield#\"><\/a><a href=\"https:\/\/www.javatpoint.com\/flutter-textfield#\"><\/a><a href=\"https:\/\/www.javatpoint.com\/flutter-textfield#\"><\/a><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>String value = \"\";  \nTextField(  \n  onChanged: (text) {  \n    value = text;  \n  },  \n)  <\/code><\/pre>\n\n\n\n<p><strong>2. Controller method:<\/strong>\u00a0It is a popular method to retrieve text field value using\u00a0<strong>TextEditingController<\/strong>. It will be attached to the TextField widget and then listen to change and control the widget&#8217;s text value. Below is the sample code:<a href=\"https:\/\/www.javatpoint.com\/flutter-textfield#\"><\/a><a href=\"https:\/\/www.javatpoint.com\/flutter-textfield#\"><\/a><a href=\"https:\/\/www.javatpoint.com\/flutter-textfield#\"><\/a><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>TextEditingController mycontroller = TextEditingController();  \nTextField(  \n  controller: mycontroller,  \n)   <\/code><\/pre>\n\n\n\n<p>Sample code for listening to the changes.<\/p>\n\n\n\n<p><a href=\"https:\/\/www.javatpoint.com\/flutter-textfield#\"><\/a><a href=\"https:\/\/www.javatpoint.com\/flutter-textfield#\"><\/a><a href=\"https:\/\/www.javatpoint.com\/flutter-textfield#\"><\/a><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>controller.addListener(() {  \n  \/\/ Do something here  \n});  <\/code><\/pre>\n\n\n\n<p>Sample code to get or set the value.<\/p>\n\n\n\n<p><a href=\"https:\/\/www.javatpoint.com\/flutter-textfield#\"><\/a><a href=\"https:\/\/www.javatpoint.com\/flutter-textfield#\"><\/a><a href=\"https:\/\/www.javatpoint.com\/flutter-textfield#\"><\/a><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>print(controller.text); \/\/ Print current value  \ncontroller.text = \"Demo Text\"; \/\/ Set new value   <\/code><\/pre>\n\n\n\n<p>Let us see the second way in detail to retrieve the text field value in Flutter application with the help of following steps:<\/p>\n\n\n\n<ol><li>Create a TextEditingController.<\/li><li>Attach the TextEditingController to a TextField using controller property.<\/li><li>Retrieve the value of the TextField by using the&nbsp;<strong>text()<\/strong>&nbsp;method provided by the TextEditingController.<\/li><\/ol>\n\n\n\n<p>Now, create a new Flutter project in your IDE and open the\u00a0<strong>main.dart<\/strong>\u00a0file. Replace the below code in the main.dart file. In this example, we are going to display the\u00a0<strong>alert dialog<\/strong>\u00a0with the current value of the text field when the user taps on a button.<a href=\"https:\/\/www.javatpoint.com\/flutter-textfield#\"><\/a><a href=\"https:\/\/www.javatpoint.com\/flutter-textfield#\"><\/a><a href=\"https:\/\/www.javatpoint.com\/flutter-textfield#\"><\/a><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import 'package:flutter\/material.dart';  \n  \nvoid main() {  \n  runApp(MaterialApp( home: MyApp(),));  \n}  \n  \nclass MyApp extends StatefulWidget {  \n  @override  \n  _State createState() => _State();  \n}  \n  \nclass _State extends State&lt;MyApp> {  \n  TextEditingController nameController = TextEditingController();  \n  TextEditingController passwordController = TextEditingController();  \n  @override  \n  Widget build(BuildContext context) {  \n    return Scaffold(  \n        appBar: AppBar(  \n          title: Text('Flutter TextField Example'),  \n        ),  \n        body: Padding(  \n            padding: EdgeInsets.all(15),  \n            child: Column(  \n              children: &lt;Widget>&#91;  \n                Padding(  \n                  padding: EdgeInsets.all(15),  \n                  child: TextField(  \n                    controller: nameController,  \n                    decoration: InputDecoration(  \n                      border: OutlineInputBorder(),  \n                      labelText: 'User Name',  \n                      hintText: 'Enter Your Name',  \n                    ),  \n                  ),  \n                ),  \n                Padding(  \n                  padding: EdgeInsets.all(15),  \n                  child: TextField(  \n                    controller: passwordController,  \n                    obscureText: true,  \n                    decoration: InputDecoration(  \n                      border: OutlineInputBorder(),  \n                      labelText: 'Password',  \n                      hintText: 'Enter Password',  \n                    ),  \n                  ),  \n                ),  \n                RaisedButton(  \n                  textColor: Colors.white,  \n                  color: Colors.blue,  \n                  child: Text('Sign In'),  \n                  onPressed: (){  \n                    return showDialog(  \n                      context: context,  \n                      builder: (context) {  \n                        return AlertDialog(  \n                          title: Text(\"Alert Message\"),  \n                          \/\/ Retrieve the text which the user has entered by  \n                          \/\/ using the TextEditingController.  \n                          content: Text(nameController.text),  \n                          actions: &lt;Widget>&#91;  \n                            new FlatButton(  \n                              child: new Text('OK'),  \n                              onPressed: () {  \n                                Navigator.of(context).pop();  \n                              },  \n                            )  \n                          ],  \n                        );  \n                      },  \n                    );  \n                  },  \n                )  \n              ],  \n            )  \n        )  \n    );  \n  }  \n}  <\/code><\/pre>\n\n\n\n<p><strong>Output:<\/strong><\/p>\n\n\n\n<p>When we run the application in android emulator, we should get UI similar to the following screenshot:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/static.javatpoint.com\/tutorial\/flutter\/images\/flutter-textfield3.png\" alt=\"Flutter TextField\"\/><\/figure>\n\n\n\n<p>Click inside the text box and add values, as shown in the field. When we press the&nbsp;<strong>sign-in button<\/strong>, an alert dialog box appeared containing the text that the user has entered into the field. If we click on the&nbsp;<strong>OK<\/strong>&nbsp;button, the alert dialog will disappear. Look into the below screenshot:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/static.javatpoint.com\/tutorial\/flutter\/images\/flutter-textfield4.png\" alt=\"Flutter TextField\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">How to make TextField expandable?<\/h3>\n\n\n\n<p>Sometimes, we want to expand a TextField that means it can have more than one line. Flutter can do this very easily by adding the attributes\u00a0<strong>maxLines<\/strong>\u00a0and set it to\u00a0<strong>null<\/strong>, which is one by default. We can also specify the exact value to expand the number of lines by default.<\/p>\n\n\n\n<p><a href=\"https:\/\/www.javatpoint.com\/flutter-textfield#\"><\/a><a href=\"https:\/\/www.javatpoint.com\/flutter-textfield#\"><\/a><a href=\"https:\/\/www.javatpoint.com\/flutter-textfield#\"><\/a><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>TextField(  \n  maxLines: 4,  \n)  <\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">How to control the size of TextField value?<\/h3>\n\n\n\n<p>TextField widget also allows us to restrict the maximum number of characters inside the text field. We can do this by adding the\u00a0<strong>maxLength<\/strong>\u00a0attributes as below:<\/p>\n\n\n\n<p><a href=\"https:\/\/www.javatpoint.com\/flutter-textfield#\"><\/a><a href=\"https:\/\/www.javatpoint.com\/flutter-textfield#\"><\/a><a href=\"https:\/\/www.javatpoint.com\/flutter-textfield#\"><\/a><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>TextField(  \n  maxLength: 10,  \n),  <\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">How to obscure text field value?<\/h3>\n\n\n\n<p>Obscure means to make the field not readable or not understandable easily. The obscure text cannot visible clear. In Flutter, it is mainly used with a text field that contains a password. We can make the value in a TextField obscure by setting the\u00a0<strong>obscureText<\/strong>\u00a0to\u00a0<strong>true<\/strong>.<a href=\"https:\/\/www.javatpoint.com\/flutter-textfield#\"><\/a><a href=\"https:\/\/www.javatpoint.com\/flutter-textfield#\"><\/a><a href=\"https:\/\/www.javatpoint.com\/flutter-textfield#\"><\/a><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>TextField(  \n  obscureText: true,  \n), <\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>A TextField or TextBox is an&nbsp;input element&nbsp;which holds the alphanumeric data, such as name, password, address, etc. It is a GUI control element that enables the user to&nbsp;enter text information&nbsp;using a programmable code. It can be of a single-line text field (when only one line of information is required) or multiple-line text field (when more [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[585],"tags":[],"_links":{"self":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/posts\/2107"}],"collection":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/comments?post=2107"}],"version-history":[{"count":0,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/posts\/2107\/revisions"}],"wp:attachment":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/media?parent=2107"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/categories?post=2107"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/tags?post=2107"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}