Flutter Text Field important things you need to know
Tags: flutter, dart, programming, mobile
Published: 2020-01-13 15:10:47

---
title: Flutter Text Field important things you need to know
published: true
description: text field initial value, validation and more
tags: flutter, dart, programming, mobile
cover_image: https://mightytechno.com/wp-content/uploads/2020/01/Flutter.png
canonical_url: https://mightytechno.com/flutter-textfield/
---


In Flutter, you can use the [TextField](https://mightytechno.com/flutter-textfield/) widget to get user inputs. Also, it contains different properties to adjust look and feel of the TextField. But when using TextField there will be some pain point to solve. You will find solutions with examples for those pain point from this article.

#Set the initial value to text field
Most of the developers have a requirement to set the initial value to the text field like showing edit view to initial fields. But in Flutter there is no property in textField widget to set the initial value. But you can use a controller to set that initial Value. 

When initializing controller you can set the value to text property. Then that value will appear as an initial value in the text field. You can initialize controller in initState or you can set text property in initState.



```dart
      TextEditingController controller;
       
       @override
          void initState() {
            super.initState();
            controller = TextEditingController(text: "Initi");
        
       }
       
         @override
          Widget build(BuildContext context) {
            return Container(
              child: TextField(
                controller: controller,
              ),
            );
          }
```


#Validate input with Input Formatter 

inputFormatter property will allow specifying what kind of input need to accept by input fields. inputFormatter accept list of TextInputFormatter. In here we use WhitelistingTextInputFormatter class to specify the whitelisted characters. Also, you can use BlacklistingTextInputFormatter class to specify the restricted characters.


```dart
    @override
          Widget build(BuildContext context) {
            return Container(
              child: TextField(
                controller: controller,
                inputFormatters: [WhitelistingTextInputFormatter(RegExp("[A-Z]"))],
              ),
            );
          }
```


#Multi-line text field

The default text field is configured to be a single line. But we can change this by setting maxLines property to null. Then the text field will be expanded based on the content

```dart
 @override
          Widget build(BuildContext context) {
            return Container(
              child: TextField(
                controller: controller,
                TextField(
                  controller: controller,
                  maxLines:null
                )
              ),
            );
          }

```
![Multi-line text field](https://mightytechno.com/wp-content/uploads/2020/01/Screen-Shot-2020-01-10-at-11.49.50-AM.png)



#Validation and add an error message

Fluter provides an inbuilt way of adding a nice error message to input fields. For that first, you need to set InputDecoration for decoration property and InputDecoration will allow setting errorText property.

If we directly set an errorText it will appear all the times. Also, Fluter will make text and border to the red when you set error text.

As an example, in here I will validate the text when onChange occur and based on that you can set errorText property a null or a text.



```dart
          TextEditingController controller;
          bool isNameValid = true;
          RegExp regExp = new RegExp(r'^[a-zA-Z]+$',);
        
          @override
          void initState() {
            super.initState();
            controller = TextEditingController();
          }
        
          @override
          Widget build(BuildContext context) {
            return Container(
              child: Center(
                child: TextField(
                  onChanged: (value){
                    if(regExp.hasMatch(value)){
                        isNameValid = true;
                    } else {
                        isNameValid = false;
                    }
                    setState(() {
                      
                    });
                  },
                  decoration: InputDecoration(
                    labelText: "Enter Name",
                    errorText: isNameValid ? null : "Invalid name"
                  ),
                  controller: controller,
                ),
              ),
            );
          }

```
![Validation and add an error message](https://mightytechno.com/wp-content/uploads/2020/01/Screen-Shot-2020-01-10-at-12.56.08-PM.png)



#Remove text field underline while keeping a hint
You can set border none to remove the underline and set labeltext to show the hind


```dart
 TextField(
                decoration: InputDecoration(
                  border: InputBorder.none,
                  labelText: "First Name",
                ),
                controller: controller,
              )
```


#Change Input type like number,email 
Mobile natively support to show the different layout for different input fields like showing number pad for number input and show text keyboard to text input. In Flutter, you can set preferred input type by setting keyboardType property.

```dart
 TextField(
                keyboardType: TextInputType.number,
                controller: controller,
              )
```



![Change Input type flutter](https://mightytechno.com/wp-content/uploads/2020/01/Screen-Shot-2020-01-11-at-12.12.33-PM.png)



#Text Field inside Row
You can't just put TextField inside Row and it will not render. Because Row widget needs to know the size of the child elements. Therefore you can wrap the Flexible widget and it will work like charm.

```dart
   Row(
      children: <Widget>[
                Flexible(
                  child: new TextField(
                    decoration: InputDecoration(
                      labelText: "First Name",
                    ),
                  ),
                )
              ],
            )

```


###Conclusion
I hope you get answers for some pain point when using the text field in a flutter. If you have any questions please mention in below 


Originally published at [mightytechno](https://mightytechno.com/flutter-textfield/)

Connect with me - [Instagram](https://www.instagram.com/mighty_techno) |[Blog](https://mightytechno.com/) |[Youtube](https://www.youtube.com/channel/UCwxiHP2Ryd-aR0SWKjYguxw)(https://twitter.com/mightytechno)