TextField Widget – Flutter Widget Guide By Flutter Agency

· 8 min read
TextField Widget - Flutter Guide By Flutter Agency
TextField Widget - Flutter Guide By Flutter Agency

In this tutorial, we will implement TextField Widget in flutter and will learn about how to get data from TextField Widget in flutter.

What is TextField Widget in Flutter?

TextField Widget is used to get data from users and perform the desired operation.

Properties: 

  •  controller: The controller will specify the name of the controller to handle the TextField Widget.
  • hintText: To set hint text.
  • hintStyle: To set style for hint.
  • input type: To set the type of input keyboard whether it’s numeric or character.default input type is TextInputType.text but if the max line is one then TextInputType.multiline.
  • inputAction: inputAction will specify what kind of action to request when a TextField is focused.
  • helperText: helperText is a text that shows how the value will be used.
  • labelText: labelText is a text that defines the purpose of the input type.
  • autofocus: autofocus will have the boolean value true or false. If the user sets it true then that particular Textfield widget will get focus.
  • maxlength: To fix the maximum number of characters in TextField.
  • maxLines: maxLines will specify the maximum number of lines. The default value for maxLine is 1 but there is no limit to the number of lines text container will start with vertical available space for default one line.

How to use TextField Widget in a Flutter?

TextField(
      controller: nameController,
       hintText: "Firstname",  
      ),

We will get output like below:

textfield

Simple TextField Widget

How to apply decoration to Textfield Widget in Flutter?

This is simple just Textfield users can customize it as per requirement by wrapping it into Container Widget. e.g. If we would like to add a prefix icon and suffix icon in it?

Don’t get tensed about it that’s pretty simple like below :

TextField(
      controller: nameController,
         hintText: "Firstname",  
         helperText: "Helper Text Demo",
          labelText: "Label Text Demo",
          maxLength: 10,
           prefixIcon: Icon(
            Icons.account_circle,
            color: Colors.black45,
          ),
          suffixIcon: Icon(
            Icons.account_box,
            color: Colors.black45,
          ),
      ),

So we will get output like below:

textfieldSuffix

TextField with suffix icon and prefix icon

  • TextField Widget with Border Property

If you want to apply different types of border to Textfield then you have applied InputDecoration property in TextField.

Below is an example for enabledBorder in TextField.

TextField(
      controller: nameController,
         enabledBorder: OutlineInputBorder(
                    borderRadius: BorderRadius.all(
                      Radius.circular(10.0),
                    ),
                    borderSide: BorderSide(
                      color: Colors.red,
                      width: 1,
                    ),
                  ),
      ),

 

Below is an example for focusedBorder in TextField.

TextField(
      controller: nameController,
         focusedBorder: OutlineInputBorder(
                    borderRadius: BorderRadius.all(
                      Radius.circular(10.0),
                    ),
                    borderSide: BorderSide(
                      color: Colors.green,
                    ),
                  ),
      ),

With all these now our TextField will look like below :

TextField widget

TextField Widget with enableBorder and focusedBorder

Here note that TextField is an underlying TextField without form integration. so, if you want to use Textfield with a form then TextFormField is required. because TextFormField is handy in Form validation, save, and reset the field. we will now take a look at it.

Below is an example for focusedBorder in it.

TextFormField(
       controller: accountController,
       maxLength: 8
       decoration: InputDecoration(
        labelText: "labelTxt",
        helperText: "helperTxt",
        prefixIcon: Icon(
          Icons.account_circle,
          color: Colors.black45,
        ),
        suffixIcon: Icon(
          Icons.account_box,
          color: Colors.black45,
        ),
        enabledBorder: OutlineInputBorder(
          borderRadius: BorderRadius.circular(28.0),
          borderSide: BorderSide(
             color:Colors.green,
          ),
        ),
       focusedBorder: OutlineInputBorder(
          borderRadius: BorderRadius.circular(28.0),
          borderSide: BorderSide(
            color:Colors.green,
          ),
        ),
        hintText: "Enter Firstname", 
      ),
    );

We will get output like below:

TextFormField

TextFormField with suffix and prefix icon

The complete source code for above all TextField is as follows :

First, define three controllers like this :

TextEditingController nameController = TextEditingController();
Now TextEditingController cityController = TextEditingController();
And  TextEditingController accountController = TextEditingController();

Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
      // Textfield 
        Padding(
          padding: const EdgeInsets.all(6.0),
          child: TextField(
            style: Theme.of(context).textTheme.caption.copyWith(
                  fontWeight: FontWeight.w600,
                  fontSize: 18,
                  color: Colors.black,
                ),
            controller: nameController,
            keyboardType: TextInputType.text,
            textInputAction: TextInputAction.next,
            decoration: InputDecoration(
              focusColor: Colors.green,
              enabledBorder: OutlineInputBorder(
                borderRadius: BorderRadius.all(
                  Radius.circular(10.0),
                ),
                borderSide: BorderSide(
                  color: Colors.red,
                  width: 1,
                ),
              ),
              focusedBorder: OutlineInputBorder(
                borderRadius: BorderRadius.all(
                  Radius.circular(10.0),
                ),
                borderSide: BorderSide(
                  color: Colors.green,
                ),
              ),
              hintText: "Firstname",
              hintStyle: Theme.of(context).textTheme.caption.copyWith(
                    fontSize: 18,
                    color: Colors.grey,
                    fontWeight: FontWeight.w600,
                  ),
              fillColor: Colors.red,
            ),
            onChanged: (str) {
              // To Do
            },
            onSubmitted: (str) {
              // To Do
            },
          ),
        ),

          // Textfield with Suffix and Prefix

        Padding(
          padding: const EdgeInsets.all(5.0),
          child: TextField(
            style: Theme.of(context).textTheme.caption.copyWith(
                  fontWeight: FontWeight.w600,
                  fontSize: 18,
                  color: Colors.black,
                ),
            controller: cityController,
            keyboardType: TextInputType.text,
            textInputAction: TextInputAction.next,
            maxLength: 10,
            decoration: InputDecoration(
              focusColor: Colors.green,
              enabledBorder: OutlineInputBorder(
                borderRadius: BorderRadius.all(
                  Radius.circular(10.0),
                ),
                borderSide: BorderSide(
                  color: Colors.red,
                  width: 1,
                ),
              ),
              helperText: "Helper Text Demo",
              labelText: "Label Text Demo",
              focusedBorder: OutlineInputBorder(
                borderRadius: BorderRadius.all(
                  Radius.circular(10.0),
                ),
                borderSide: BorderSide(
                  color: Colors.green,
                ),
              ),
              prefixIcon: Icon(
                Icons.account_circle,
                color: Colors.black45,
              ),
              suffixIcon: Icon(
                Icons.account_box,
                color: Colors.black45,
              ),
              hintText: "Firstname",
              hintStyle: Theme.of(context).textTheme.caption.copyWith(
                    fontSize: 18,
                    color: Colors.grey,
                    fontWeight: FontWeight.w600,
                  ),
              fillColor: Colors.red,
            ),
            onChanged: (str) {
              // To do
            },
            onSubmitted: (str) {
              // To do
            },
          ),
        ),
      // Textform Field 
        Padding(
          padding: const EdgeInsets.all(6.0),
          child:  TextFormField(
      maxLength: 12,
      autofocus: false,
      textAlign: TextAlign.start,
      autovalidate: true,
      style: Theme.of(context).textTheme.caption.copyWith(
            fontWeight: FontWeight.w600,
            fontSize: 16,
            color: Colors.black,
          ),
      controller: accountController,
      keyboardType: TextInputType.text,
      textInputAction: TextInputAction.next,
      decoration: InputDecoration(
        labelText: "labelTxt",
        helperText: "helperTxt",
        contentPadding: EdgeInsets.all(15.0),
        prefixIcon: Icon(
          Icons.account_circle,
          color: Colors.black45,
        ),
        suffixIcon: Icon(
          Icons.account_box,
          color: Colors.black45,
        ),
        errorStyle: Theme.of(context).textTheme.caption.copyWith(
              color: Colors.red,
              fontWeight: FontWeight.w700,
            ),
        disabledBorder: OutlineInputBorder(
          borderRadius: BorderRadius.circular(28.0),
          borderSide: BorderSide(
            color: Color(0xFF26b78b),
          ),
        ),
        enabledBorder: OutlineInputBorder(
          borderRadius: BorderRadius.circular(28.0),
          borderSide: BorderSide(
            color: Color(0xFF26b78b),
          ),
        ),
        focusedErrorBorder: OutlineInputBorder(
          borderRadius: BorderRadius.circular(28.0),
          borderSide: BorderSide(
            color: Color(0xFF26b78b),
          ),
        ),
        errorBorder: OutlineInputBorder(
          borderRadius: BorderRadius.circular(28.0),
          borderSide: BorderSide(
            color: Color(0xFF26b78b),
          ),
        ),
        hintText: "Firstname",
        hintStyle: Theme.of(context).textTheme.caption.copyWith(
              fontWeight: FontWeight.w600,
              fontSize: 16,
              color: Colors.grey,
            ),
        focusedBorder: OutlineInputBorder(
          borderRadius: BorderRadius.circular(28.0),
          borderSide: BorderSide(
            color: Color(0xFF26b78b),
          ),
        ),
        focusColor: Colors.green,
      ),
      onChanged: (str) {
        // To do
      },
      onSaved: (str) {
        //  To do
      },
    ),
        ),
      ],
    );

So the Screenshot for all TextField will look like below :

TextField widget

All TextField in a screen

Conclusion:

So in this article, we have been through What is TextField in Flutter along with how to use it in a Flutter Mobile Application.

Do let us know if you need any assistance regarding flutter.
Keep Reading !!!

FlutterAgency.com is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget GuideFlutter ProjectsCode libs and etc.

FlutterAgency.com is one of the most popular online portal dedicated to Flutter Technology and daily thousands of unique visitors come to this portal to enhance their knowledge of Flutter.

Leave a Reply