How to get user input text from a TextField in Flutter

How to get user input text from a TextField in Flutter:

Flutter TextField widget is used to create a material design text-field widget. It is mainly used for getting user inputs. On clicking this widget, it opens up the keyboard from the bottom. User can enter a text in this widget and the text field will keep showing that text.

TextField widget has different properties. In this post, we will learn how to get the input text from a TextField using different properties.

I will create one small project and show you how to do that in different ways.

Using onChanged:

Let’s take a look the example below:

import 'package:flutter/material.dart';

void main() {
  runApp(TextFieldWidget());
}

class TextFieldWidget extends StatefulWidget {
  @override
  _TextFieldWidget createState() => _TextFieldWidget();
}

class _TextFieldWidget extends State<TextFieldWidget> {
  String currentText = "";

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: Scaffold(
            appBar: AppBar(
              title: Text('Example'),
            ),
            body: Container(
                margin: EdgeInsets.all(30),
                child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      TextField(
                        decoration: InputDecoration(
                            border: OutlineInputBorder(),
                            labelText: "Enter your Text"),
                        onChanged: (text) => setState(() {
                          currentText = text;
                        }),
                      ),
                      Text(currentText),
                    ]))));
  }
}

For this example, it will create one TextField and one text in a Column.

Here,

The text changed is called in onChanged and we are changing the value of currentText
currentText is the text displayed below the TextField
So, once we are changing the text, it is displaing below the TextField simultaneously.

Other properties:

It has a couple of other properties we can use to get the text entered in the TextField.

onTap:

It is called on each tap on the TextField. It doesn’t called the second tap of double tap.

onSubmitted:

It is called once the user clicks on done on the keyboard. We can read the string similar to the above program.

onEditingComplete:

It is similar to onSubmitted. It is called for any editing complete step like clicking on search, go etc.

Using a TextEditingController:

Another way to get user entered text in a TextField is by using a TextEditingController. We can pass the TextEditingController using the controller props and the entered text can be achieved by .text.

Below is the complete program:

import 'package:flutter/material.dart';

void main() {
  runApp(TextFieldWidget());
}

class TextFieldWidget extends StatefulWidget {
  @override
  _TextFieldWidget createState() => _TextFieldWidget();
}

class _TextFieldWidget extends State<TextFieldWidget> {
  String currentText = "";
  final controller = TextEditingController();

  void updateText() {
    setState(() {
      currentText = controller.text;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: Scaffold(
            appBar: AppBar(
              title: Text('Example'),
            ),
            body: Container(
                margin: EdgeInsets.all(30),
                child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      TextField(
                        controller: controller,
                        decoration: InputDecoration(
                            border: OutlineInputBorder(),
                            labelText: "Enter your Text"),
                      ),
                      Text(currentText),
                      RaisedButton(
                        child: Text("Submit"),
                        onPressed: updateText,
                      ),
                    ]))));
  }
}

It will create one TextField with a RaisedButton. On clicking the button, it will change the text of Text.

controller is the TextEditingController that we are passing to the TextField. The RaisedButton calls updateText method on pressing it and it is changing the value of currentText.

CodeVsColor

How to get user input text from a TextField in Flutter