How to Get the TextField Value in Flutter ??

3 min read
How to Get the TextField Value in Flutter
How to Get the TextField Value in Flutter

TextField Widget is used to get data from users and perform the desired operation so in this article we are going to take a look at how to get the TextField Value in Flutter ??

How to Get the TextField Value in Flutter??

Create your TextEditingController as a global variable in your State class and set it into your TextField widget.

TextEditingController emailController = new TextEditingController();

....


TextField(
  controller: emailController,
  obscureText: true,
  textAlign: TextAlign.left,
  decoration: InputDecoration(
    border: InputBorder.none,
    hintText: 'PLEASE ENTER YOUR EMAIL',
    hintStyle: TextStyle(color: Colors.grey),
  ),
)

Now you can get the value using :

emailController.text

You can get more information here: https://flutter.dev/docs/cookbook/forms/retrieve-input

The text field calls the onChanged callback whenever the user changes the text in the field.

If the user indicates that they are done typing in the field e.g., and by pressing a button on the soft keyboard, the text field calls the onSubmitted callback.

Using this callback, we can set the instance variables and use those variables on the onPress of submit button.

another easier option is to add the ‘onChanged‘ property inside the TextField class that will contain the String

String enteredText .... TextField( onChanged: (newText) { enteredText = newText; },
TextEditingController emailController = new TextEditingController();
        ....
        
        TextField(
          controller: emailController,
          obscureText: true,
          textAlign: TextAlign.left,
          decoration: InputDecoration(
            border: InputBorder.none,
            hintText: 'PLEASE ENTER YOUR EMAIL',
            hintStyle: TextStyle(color: Colors.grey),
          ),
        )

        emailController.text

So up next we will go through topics like flutter textfield initial value, flutter textfield set text, textfield flutter, flutter textfield validation, textformfield flutter, textfield( controller flutter), flutter textfield border, flutter textfield height, etc So Stay Tuned.

Conclusion:

Hope you enjoyed this article !!! Thanks for reading 馃檪

So in this article, we have walked through how to get the TextField Value in Flutter.

Do not forget to drop your valuable suggestions/feedback. We would love to assist you.

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聽Guide,聽Flutter Projects,聽Code libs聽and etc.

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

Leave a Reply