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

1. Create aTextEditingController.
2. Supply theTextEditingController to aTextField.
3. Display the current value of the text field.

To retrieve the text a user has entered into a text field, create aTextEditingController and supply it to aTextField orTextFormField.

// Define a custom Form widget.classMyCustomFormextendsStatefulWidget{constMyCustomForm({super.key});​@overrideState<MyCustomForm>createState()=>_MyCustomFormState();}​// Define a corresponding State class.// This class holds the data related to the Form.class_MyCustomFormStateextendsState<MyCustomForm>{// Create a text controller and use it to retrieve the current value// of the TextField.finalmyController=TextEditingController();​@overridevoiddispose(){// Clean up the controller when the widget is disposed.myController.dispose();super.dispose();}​@overrideWidgetbuild(BuildContextcontext){// Fill this out in the next step.}}

Now that you have aTextEditingController, wire it up to a text field using thecontroller property:

returnTextField(controller:myController);

After supplying theTextEditingController to the text field, begin reading values. Use thetext property provided by theTextEditingController 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(context:context,builder:(context){returnAlertDialog(// Retrieve the text that the user has entered by using the// TextEditingController.content:Text(myController.text),);},);},tooltip:'Show me the value!',child:constIcon(Icons.text_fields),),

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<MyCustomForm> createState() => _MyCustomFormState();}// Define a corresponding State class.// This class holds the data related to the Form.class _MyCustomFormState extends State<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(            context: context,            builder: (context) {              return AlertDialog(                // Retrieve the text the that user has entered by using the                // TextEditingController.                content: Text(myController.text),              );            },          );        },        tooltip: 'Show me the value!',        child: const Icon(Icons.text_fields),      ),    );  }}