Retrieve the value of a text field (official source)

In this recipe, learn how to retrieve the text a user has entered into a text field using the following steps:

Create a TextEditingController.
Supply the TextEditingController to a TextField.
Display the current value of the text field.

1. Create a `TextEditingController`

To retrieve the text a user has entered into a text field, create a TextEditingController and supply it to a TextField or TextFormField.

you've finished using it. This ensures that you discard any resources used by the object.

// Define a custom Form widget. class MyCustomForm extends StatefulWidget { const MyCustomForm({super.key});

@override State createState() => _MyCustomFormState(); }

// Define a corresponding State class. // This class holds the data related to the Form. class _MyCustomFormState extends State { // Create a text controller and use it to retrieve the current value // of the TextField. final myController = TextEditingController();

@override void dispose() { // Clean up the controller when the widget is disposed. myController.dispose(); super.dispose(); }

@override Widget build(BuildContext context) { // Fill this out in the next step. } }


## 2. Supply the `TextEditingController` to a `TextField`

Now that you have a `TextEditingController`, wire it up
to a text field using the `controller` property:


```dart
return TextField(controller: myController);

3. Display the current value of the text field

After supplying the TextEditingController to the text field, begin reading values. Use the text property provided by the TextEditingController to retrieve the String that the user has entered into the text field.

The following code displays an alert dialog with the current value of the text field when the user taps a floating action button.

FloatingActionButton(
  // When the user presses the button, show an alert dialog containing
  // the text that the user has entered into the text field.
  onPressed: () {
    showDialog&#x3C;void>(
      context: context,
      builder: (context) {
        return AlertDialog(
          // Retrieve the text that the user has entered by
          // using the TextEditingController.
          content: Text(myController.text),
        );
      },
    );
  },
  tooltip: 'Show me the value!',
  child: const Icon(Icons.text_fields),
),

Interactive example

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Retrieve Text Input',
      home: MyCustomForm(),
    );
  }
}

// Define a custom Form widget.
class MyCustomForm extends StatefulWidget {
  const MyCustomForm({super.key});

  @override
  State&#x3C;MyCustomForm> createState() => _MyCustomFormState();
}

// Define a corresponding State class.
// This class holds the data related to the Form.
class _MyCustomFormState extends State&#x3C;MyCustomForm> {
  // Create a text controller and use it to retrieve the current value
  // of the TextField.
  final myController = TextEditingController();

  @override
  void dispose() {
    // Clean up the controller when the widget is disposed.
    myController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Retrieve Text Input')),
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: TextField(controller: myController),
      ),
      floatingActionButton: FloatingActionButton(
        // When the user presses the button, show an alert dialog containing
        // the text that the user has entered into the text field.
        onPressed: () {
          showDialog&#x3C;void>(
            context: context,
            builder: (context) {
              return AlertDialog(
                // Retrieve the text that the user has entered by using the
                // TextEditingController.
                content: Text(myController.text),
              );
            },
          );
        },
        tooltip: 'Show me the value!',
        child: const Icon(Icons.text_fields),
      ),
    );
  }
}

Content from flutter/website, © The Flutter Authors, used under the Creative Commons Attribution 3.0 License; code samples under the BSD License.

Retrieve the value of a text field

1. Create a TextEditingController

3. Display the current value of the text field

Interactive example

1. Create a `TextEditingController`